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

machine.js

const createFilterMachine = (id, applyTransformer) => Machine({
  id,
  context: {
    filterData: {}
  },
  initial: 'idle',
  states: {
    idle: {
      on: {
        OPEN: 'editing',
      }
    },
    loading: {
      on: {
        SUCCESS: 'idle'
      }
    },
    editing: {
      on: {
        'CLOSE': {
          target: 'idle',
          actions: 'applyFilter'
        },
        'UPDATE': {
          target: 'editing',
          actions: 'filterChanged'
        }
      }
    }
  },
}, {
  actions: {
    filterChanged: (context, event) => {
      assign({ filterData: applyTransformer(event.value) })
    },
    applyFilter: sendParent('FILTER_APPLIED')
  }
});





const filterSetupConfig = {
  guestCount: {
    type: 'count',
    transformFn: data => data
  }
};


const AppMachine = Machine({
  id: 'appMachine',
  initial: 'fetchingAllOptions',
  context: {
    allAvailableOptions: {},
    filterRefs: null,
    lastAppliedFilter: '',
  },
  states: {
    fetchingAllOptions: {
      entry: 'createFilters',
      after: {
        1000: 'interactive'
      },
    },
    interactive: {
      type: 'parallel',
      states: {
        filters: {
          initial: 'idle',
          states: {
            idle: {
              entry: (context) => console.log('idle', context),
              on: {
                FILTER_APPLIED: {
                  target: ['fetching', '#resultsFetching'],
                  actions: [(context) => console.log(context, 'fetching things')]
                }
              }
            },
            fetching: {
              after: {
                1000: 'idle'
              },
              entry: () => console.log('fetching')
            }
          }
        },
        results: {
          initial: 'idle',
          states: {
            idle: {},
            fetching: {
              id: 'resultsFetching',
              after: {
                1200: 'idle'
              },
            }
          }
        },
      }
    },
  },
}, {
  actions: {
    createFilters: assign((context) => {
      const filterRefs = Object.entries(filterSetupConfig).reduce((acc, filterConfig) => ({
        ...acc,
        [filterConfig[0]]: spawn(createFilterMachine(filterConfig[0], filterConfig[1].transformFn))
      }), {});

      return { ...context, filterRefs }
    })
  }
});