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

machine.js

function fetchSecondOptions(someId){
  return new Promise(resolve => {
    setTimeout(() => resolve([]), 300);
  });
}

function fetchThirdOptions(someId){
  return new Promise(resolve => {
    setTimeout(() => resolve([]), 500);
  });
}


const cascadingSelectControlsMachine = Machine(
  {
    id: "cascadingSelectControls",
    initial: "awaitingFirstSelection",
    states: {
      awaitingFirstSelection: {
        on: {
          FIRST_SELECTED: "firstSelected"
        },
      },
      firstSelected: {
        initial: "loadingSecondOptions",
        on: {
          FIRST_SELECTED: ".loadingSecondOptions"
        },
        states: {
          loadingSecondOptions: {
            invoke: {
              src: (context, event) => fetchSecondOptions(event.data),
              onDone: {
                target: 'awaitingSecondSelection'
              }
            }
          },
          awaitingSecondSelection: {
            on: {
              SECOND_SELECTED: "loadingThirdOptions"
            }
          },
          loadingThirdOptions: {
            invoke: {
              src: (context, event) => fetchThirdOptions(event.data),
              onDone: {
                target: 'secondSelected'
              }
            }
          },
          secondSelected: {
            initial: "awaitingThirdSelection",
            on: {
              SECOND_SELECTED: "loadingThirdOptions"
            },
            states: {
              awaitingThirdSelection: {
                on: {
                  THIRD_SELECTED: "thirdSelected"
                }
              },
              thirdSelected: {}
            }
          }
        }
      }
    },
  },
  {},
);