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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const fetchMachine = Machine({
  initial: 'closed',
  context: {
    filter: '',
  },
  states: {
    closed: {
      on: {
        TOGGLE: 'open',
        OPEN: 'open',
      },
    },
    open: {
      initial: 'filtered',
      on: {
        TOGGLE: 'closed',
        CLOSE: 'closed',
        FILTER: {
          target: 'open.filtering',
          actions: [
            actions.cancel('debounce-filter'),
            send({
              type: 'APPLY_FILTER'
            }, {
              delay: 300,
              id: 'debounce-filter'
            })
          ],
        },
      },
      states: {
        filtering: {
          on: {
            APPLY_FILTER: [
              {
                target: 'filtered',
                actions: [actions.assign({ filter: (_context, { filter }) => filter })],
              },
            ],
          },
        },
        filtered: {},
      },
    },
  },
})