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: 'cascadingSelectControls',
    context: {},
    initial: 'awaitingFirstSelection',
    states: {
      awaitingFirstSelection: {
        on: {
          FIRST_SELECTED: {
            target: 'firstSelected',
            actions: 'assignFirstSelection',
          },
        },
      },
      firstSelected: {
        initial: 'loadingSecondOptions',
        exit: ['clearSecond'],
        on: {
          FIRST_SELECTED: {
            actions: 'assignFirstSelection',
            target: '.loadingSecondOptions',
            internal: false
          },
        },
        states: {
          loadingSecondOptions: {
            invoke: {
              src: 'fetchSecondOptions',
            },
            on: {
              SECOND_OPTIONS_LOADED: {
                actions: 'assignSecondOptions',
                target: 'awaitingSecondSelection',
              },
            },
          },
          awaitingSecondSelection: {
            on: {
              SECOND_SELECTED: {
                actions: 'assignSecondSelection',
                target: 'secondSelected',
              },
            },
          },
          secondSelected: {
            initial: 'loadingThirdOptions',
            on: {
              SECOND_SELECTED: {
                actions: 'assignSecondSelection',
                target: '.loadingThirdOptions',
                internal: false },
            },
            exit: ['clearThird'],
            states: {
              loadingThirdOptions: {
                invoke: {
                  src: 'fetchThirdOptions',
                },
                on: {
                  THIRD_OPTIONS_LOADED: {
                    actions: 'assignThirdOptions',
                    target: 'awaitingThirdSelection',
                  },
                },
              },
              awaitingThirdSelection: {
                on: {
                  THIRD_SELECTED: {
                    target: 'thirdSelected',
                    actions: 'assignThirdSelection',
                  },
                },
              },
              thirdSelected: {},
            },
          },
        },
      },
    },
  });