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 changeStep = assign({
  currentStep: (context, event) => {
    return context.currentStep + 1;
  }
});

const getIntro = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 3000);
  });
};

const isTheLastStep = (context) => {
  const lastStep = context.steps.length;
  const { currentStep } = context;
  if (lastStep === currentStep) {
    return true;
  }
  return false;
};

const multiStepMachine = Machine(
  {
    id: 'MultiSteps',
    initial: 'idle',
    context: {
      steps: [0, 1, 2],
      currentStep: 0
    },
    states: {
      idle: {
        on: {
          FETCH: 'loading'
        }
      },
      loading: {
        invoke: {
          id: 'getIntroUser',
          src: 'getIntro',
          onDone: {
            target: 'intro'
          },
          onError: {
            target: 'failure'
          }
        }
      },
      failure: {
        on: {
          RETRY: 'loading'
        }
      },
      intro: {
        on: {
          NEXT: [
            {
              target: 'finish',
              // Only transition to 'searching' if the guard (cond) evaluates to true
              cond: 'isTheLastStep'
            },
            { target: '', actions: ['changeStep'] }
          ],
          SKIP: {
            target: 'finish'
          }
        }
      },
      finish: {
        type: 'final'
      }
    }
  },
  {
    actions: {
      changeStep
    },
    services: {
      getIntro
    },
    guards: {
      isTheLastStep
    }
  }
);
  
  // const fetchMachine = Machine({
  //   id: 'fetch',
  //   initial: 'idle',
  //   context: {
  //     retries: 0
  //   },
  //   states: {
  //     idle: {
  //       on: {
  //         FETCH: 'loading'
  //       }
  //     },
  //     loading: {
  //       on: {
  //         RESOLVE: 'success',
  //         REJECT: 'failure'
  //       }
  //     },
  //     success: {
  //       type: 'final'
  //     },
  //     failure: {
  //       on: {
  //         RETRY: {
  //           target: 'loading',
  //           actions: assign({
  //             retries: (context, event) => context.retries + 1
  //           })
  //         }
  //       }
  //     }
  //   }
  // });