Generated by XState Viz: https://xstate.js.org/viz

machine.js

const defaultFilters = ['defaultFilter']

const filterBarMachine = Machine(
  {
    id: 'filter-bar',
    initial: 'idle',

    context: {
      filters: defaultFilters,
      newFacet: undefined,
    },
    
    on: {
      // handle component args change
      CHANGE_ARGS: {
        actions: [
          assign({
            filters: (_context, { filters }) => filters,
          }),
        ],
      },
    },

    states: {      
      idle: {
        on: {
          '': [],
          SUBMIT: 'loading',
          RESET: {
            actions: ['resetFilters'],
            target: 'loading',
          },
          START_SELECT: 'select',
          DELETE_FILTER: {
            actions: ['deleteFilter'],
            target: 'loading',
          },
        },
      },
      
      select: {
        initial: 'facet',
        states: {
          facet: {
            on: {
              ADD_NEW_FACET: {
                actions: ['addNewFacet'],
                target: 'facet_value',
              },
              STOP: '#filter-bar.idle',
            }
          },
          facet_value: {
            exit: ['deleteNewFacet'],
            on: {
              ADD_NEW_FILTER: {
                actions: ['addNewFilter'],
                target: '#filter-bar.loading',
              },
              STOP: '#filter-bar.idle',
            },
          },
        }
      },
      loading: {
        entry: ['updateQueryParam'],
        on: {
          SUCCESS: 'idle',
        },
      },
    },
  },
  {
    actions: {
      resetFilters: assign({ filters: (context, event) => defaultFilters }),
      addNewFacet: assign({ newFacet: (context, event) => event.filter }),
      deleteNewFacet: assign({ newFacet: (context, event) => undefined }),
      addNewFilter: assign({ filters: (context, event) => [...context.filters, 'newFilter'] }),
      deleteFilter: assign({ filters: (context, event) => context.filters.slice(0, -1) }),
      updateQueryParam: () => console.log('Update query param'),
    }
  },
);