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 suggestionMachine = Machine({
  id: "suggestion",
  initial: "idle",
  context: {
    suggestions: []
  },
  states: {
    idle: {},
    fetching: {},
    successWithResults: {
      on: {
        ADD_ITEM: {
          target: 'idle',
          action: sendParent(context => {
            return {
              type: 'ADD_ITEM',
              data: context
            }
          })
        }
      }
    },
    successNoResults: {},
    failure: {}
  }
});

const facetMachine = Machine({
  type: "parallel",
  id: "facet",
  initial: "fetching",
  context: {
    facets: {}
  },
  states: {
    idle: {
      on: {
        FETCH: "fetching"
      }
    },
    fetching: {
      on: {
        SUCCESS: "success",
        FAILURE: "failure"
      }
    },
    success: {
      on: {
        FETCH: 'fetching'
      }
    },
    failure: {
      on: {
        FETCH: 'fetching'
      }
    }
  }
});

const searchResultsMachine = Machine({
  type: "parallel",
  id: "searchResults",
  initial: "fetching",
  context: {
    searchResults: [],
    page: 0,
    pagePer: 25,
    sortKey: null,
    sortDir: 'desc'
  },
  states: {
    idle: {
      on: {
        FETCH: "fetching"
      }
    },
    fetching: {
      on: {
        SUCCESS: "success",
        FAILURE: "failure"
      }
    },
    success: {
      on: {
        FETCH: "fetching"
      }
    },
    failure: {}
  }
});

const searchMachine = Machine({
  id: "search",
  initial: "idle",
  context: {
    selectedItems: new Map()
  },
  states: {
    idle: {
      entry: assign({
        suggestionRef: () => spawn(suggestionMachine, 'suggestions')
      }),
      on: {
        ADD_ITEM: "active",
        SET_ITEM: "active"
      }
    },
    active: {
      entry: assign({
        facetRef: () => spawn(facetMachine, 'facet'),
        searchResultsRef: () => spawn(searchResultsMachine, 'searchResults')
      }),
      on: {
        ADD_ITEM: {
          target: "active",
          actions: [
            send("FETCH", {
              to: context => {
                console.log(context);
                return context.facetRef
              }
            }),
            send("FETCH", {
              to: context => context.facetRef
            })
          ]
        },
        SET_ITEM: "active",
        REMOVE_ITEM: "active"
      }
    }
  }
});