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)

  function isLoading(context, event) {
    return context.isLoading;
  }
  
  function runJobSearch(context, event) {
    return {}
  }


  const fetchMachine = Machine(
          {
            id: 'fetch',
            initial: 'idle',
            context: {
              retrieverId: 2,
              filters: {},
              retries: 0,
              isLoading: false,
              results: {}
            },
            states: {
              idle: {
                on: {
                  PARSE_FILTERS: {
                    target: 'fetchLoading',
                    actions: ['parseFilters'],
                  },
                },
              },
              fetchLoading: {
                on: {
                  FETCH: {
                    target: 'fetchingResults',
                    actions: [assign({ isLoading: true }), 'setLoading'],
                  },
                },
              },
              fetchingResults: {
                invoke: {
                  src: (context) => runJobSearch(context.filters, context.retrieverId),
                  onDone: {
                    target: 'fetchResults',
                    actions: assign({
                      results: (context, event) => ({
                        ...context.results,
                        ...event.data,
                      }),
                    }),
                  },
                  onError: {
                    target: 'fetchError',
                  },
                },
              },
              fetchResults: {
                on: {
                  RESULTS: {
                    target: 'fetchSuccess',
                    actions: [assign({ isLoading: false }), 'completed'],
                  },
                  EMPTY: {
                    target: 'fetchLoading',
                    actions: ['resetFilters'],
                  },
                },
              },
              fetchSuccess: {
                type: 'final',
              },
              fetchError: {
                on: {
                  RETRY: {
                    target: 'fetchLoading',
                    actions: [
                      assign({
                        isLoading: false,
                        retries: (context, event) => context.retries + 1,
                      }),
                    ],
                  },
                },
              },
            },
          },
          {
            actions: {
              // action implementations
              setLoading: (context, event) => {
                console.log('Loading...')
              },
              parseFilters: (context, event) => {
                console.log('Parsing Filters...')
              },
              resetFilters: (context, event) => {
                console.log('Resetting Filters...')
              },
              completed: (context, event) => {
                console.log('Fetch completed! ')
                console.log('Setting filters in state! ')
                console.log(context.results)
              },
            },
          }
        );