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

machine.js

const handleRequestSuccess = assign({
  results: (_ctx, event) => event.results
});

const handleHistoryPopState = assign({
  results: (_ctx, event) => event.results
});

const searchFSM = Machine({
  id: 'search',
  initial: 'boot',
  context: {
    results: []
  },
  states: {
    boot: {
      on: {
        '': {
          target: 'idle',
          actions: ['replaceHistoryState']
        }
      }
    },
    idle: {
      on: {
        HISTORY_POPSTATE: {
          actions: [handleHistoryPopState]
        },
        CHANGE_TEXT_INPUT: 'debouncing',
        CHANGE_OPTION: 'fetching'
      }
    },
    debouncing: {
      enter: ['startDebounceTimer'],
      exit: ['clearDebounceTimer'],
      on: {
        HISTORY_POPSTATE: {
          target: 'idle',
          actions: [handleHistoryPopState]
        },
        CHANGE_TEXT_INPUT: 'debouncing',
        DEBOUNCE_TIMER: 'fetching',
        CHANGE_OPTION: 'fetching'
      }
    },
    fetching: {
      exit: ['clearSpinnerTimer', 'clearPendingRequest'],
      entry: ['startRequest', 'startSpinnerTimer'],
      on: {
        CHANGE_TEXT_INPUT: 'debouncing',
        CHANGE_OPTION: 'fetching',
        HISTORY_POPSTATE: {
          target: 'idle',
          actions: [handleHistoryPopState]
        },
        SEARCH_REQUEST_SUCCESS: {
          target: 'idle',
          actions: [handleRequestSuccess]
        },
        SEARCH_REQUEST_FAILURE: {
          target: 'error',
          actions: ['handleRequestFailure']
        }
      },
      initial: 'start',
      states: {
        start: {
          on: {
            TIMER: 'spinner'
          }
        },
        spinner: {
          type: 'final'
        }
      }
    },
    error: {
      on: {
        '': {
          target: 'idle',
          actions: ['logRequestError']
        }
      }
    }
  }
});