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',
    initial: 'idle',
    context: {
      loading: false,
      errors: false,
      searchTerm: '',
      searchResults: null
    },
    states: {
      idle: {
        on: {
          ACTIVATE: 'active'
        }
      },
      active: {
        initial: 'idle',
        states: {
          idle: {},
          fetchLiveSearchResults: {
            entry: assign({
              loading: (_, _event) => true,
              errors: (_, _event) => false,
            }),
            invoke: 'fetchLiveSearchResults', 
            onDone: {
              target: 'results',
              actions: [
                assign({
                  loading: (_, _event) => false,
                  errors: (_, _event) => false,
                })
              ]
            },
          },
          results: {}
        },
        on: {
          CLEAR_SEARCH_TERM: {
            target: '.idle',
            actions: assign({
              searchTerm: (_, event) => ""
            }),
          }
        }
      },
    },
    on: {
      SEARCH: [
        {
          target: '.active.fetchLiveSearchResults',
          actions: assign({
            searchTerm: (_, event) => event.data
          }),
          cond: {type: 'searchValid'}
        },
        {
          target: '.active.idle',
          actions: assign({
            searchTerm: (_, event) => event.data
          })
        }
      ]
    }
  }, {
    guards: {
      searchValid: (context, event) => {
        return context.searchTerm.length > 3
      }
    }
  });