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

machine.js

const FiltersMachine = Machine({
  id: 'filters',
  initial: 'loading',
  context: {
    results: [],
    filterParams: []
  },
  states: {
    loading: {
      initial: 'fetchingAllFilterOptions',
      states: {
        fetchingAllFilterOptions: {
          after: {
            1500: '#idle'
          },
          exit: sendParent('FILTERS_READY')
        },
        refiningFilters: {
          after: {
            1500: '#idle'
          },
          exit: sendParent('REFINEMENT_SUCCESS')
        }
      },
    },
    idle: {
      id: 'idle',
      on: {
        REFINE_FILTERS: 'loading.refiningFilters',
      }
    },
    failure: {
      on: {
        RETRY: 'loading'
      }
    }
  }});


const ResultsMachine = Machine({
  id: 'resultsMachine',
  initial: 'defaultContent',
  states: {
    defaultContent: {
      on: {
        REFINING_FILTERS: 'loading'
      }
    },
    loading: {
      after: {
        1500: 'success'
      }
    },
    noResults: {},
    error: {},
    success: {}
  },
});

const PassListPageRequests = Machine({
  id: 'passListPageRequests',
  initial: 'loading',
  states: {
    loading: {
      initial: 'initialFilters',
      invoke: [{
          id: 'resultsMachine',
          src: ResultsMachine
        }, {
          id: 'filtersMachine',
          src: FiltersMachine
        }],
      states: {
        initialFilters: {
          on: {
            FILTERS_READY: '#waitingForRefinement'
          },
        },
        refiningFilters: {
          entry: [
            send('REFINE_FILTERS', {to: 'filtersMachine'}),
            send('REFINING_FILTERS', {to: 'resultsMachine'})
          ],
          on: {
            REFINEMENT_SUCCESS: {
              target: '#waitingForRefinement'
            }
          }
        }
      },
    },
    waitingForRefinement: {
      id: 'waitingForRefinement',
      on: {
        FILTERS_CHANGED: 'loading.refiningFilters'
      }
    }
  }
});