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

machine.js

const programsQuery = ctx => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        program: {
          id: ctx.params.id,
          name: 'hey',
        },
      });
    }, 1000);
  });
};

const WizardMachine = Machine(
  {
    id: 'wizardMachine',
    context: {
      program: {},
      map: {},
      errors: [],
      steps: [],
      params: {
        slug: '',
        programType: '',
        id: '',
      },
      currentStep: '',
      pageInfo: {
        hasPrevious: false,
        hasNext: false,
      },
    },
    initial: 'initializing',
    states: {
      initializing: {
        on: {
          'WIZARD.command.initialize': {
            actions: ['initializeMap'],
            target: 'query',
          },
        },
      },
      query: {
        initial: 'loading',
        states: {
          loading: {
            invoke: {
              id: 'programQuery',
              src: programsQuery,
              onError: {
                target: 'failure',
                actions: ['setErrors'],
              },
              onDone: {
                target: 'success',
                actions: ['setProgram'],
              },
            },
          },
          failure: {
            on: {
              'WIZARD.command.retryQuery': 'loading',
            },
          },
          success: {
            on: {
              '': {
                target: '#wizardMachine.step',
                actions: ['populateSteps', 'verifyCurrentStep'],
              },
            },
          },
        },
      },
      step: {
        on: {
          NEXT: () => console.log('next'),
          BACK: () => console.log('back'),
          SUBMIT: () => console.log('submit'),
        },
        initial: 'idle',
        states: {
          idle: {
            on: {
              'STEP.command.submit': 'loading',
            },
          },
          loading: {},
        },
      },
    },
  },
  {
    actions: {
      initializeMap: () => {
        console.log('initializeMap');
        //
      },
      setProgram: () => {
        console.log('setProgram');
        // set ctx.program with program data
      },
      setErrors: () => {
        console.log('setErrors');
        // set ctx.errors with any errors
      },
      populateSteps: () => {
        console.log('populateSteps');
        // add step actors
      },
      verifyCurrentStep: () => {
        console.log('verifyCurrentStep');
        // see what steps are valid
        // if requested step is valid, all good
        // ['valid', 'valid', 'invalid', 'invalid'] -> can't request step 4. should pop them to step 3
        // set step
      },
    },
  },
);