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(  {
    id: 'fetch-machine',
    initial: 'idle',
    context: {
      q: '',
      offset: 0,
      selected: {},
      results: [],
      filters: {},
      error: '',
    },
    states: {
      idle: {
        on: {
          SET_QUERY: {
            target: 'selected',
            actions: 'assignQuery',
          },
        },
      },
      selected: {
        on: {
          SET_QUERY: {
            target: 'selected',
            actions: 'assignQuery',
          },
          FETCH_RESULTS: {
            target: 'pending',
            actions: assign((ctx) => ({
              ...ctx,
              offset: 0,
            })),
          },
        },
      },
      pending: {
        on: {
          LOAD_RESULTS: {
            target: 'success',
            actions: 'loadData',
          },
          ERROR: {
            target: 'failure',
            actions: 'assignError',
          },
        },
      },
      success: {
        on: {
          SET_QUERY: {
            target: 'selected',
            actions: 'assignQuery',
          },
          TOGGLE_FILTER: {
            target: 'pending',
            actions: 'toggleFilter',
          },
          CLEAR_FILTER: {
            target: 'pending',
            actions: 'clearFilter',
          },
        },
      },
      failure: {
        on: {
          SET_QUERY: {
            target: 'selected',
            actions: 'assignQuery',
          },
        },
      },
    },
    on: {
      LOAD_RESULTS: {
        target: 'success',
        actions: 'loadData',
      },
      ERROR: {
        target: 'failure',
        actions: 'assignError',
      },
      RESET: {
        target: 'idle',
        actions: 'resetData',
      },
    },
  },
);