Machine - Routing using state machines

machine.js

// machine.js
import { Machine } from "xstate";

// Conditions for some of our transitions
const guards = {
  hasJobIncome: (context) => context.has_job_income === true,
};

export const routingMachine = Machine({
  // Initial state is mostly useful for visualizations, for our purposes.
  initial: routes.auth.login,
  states: {
    [routes.auth.login]: {
      on: {
        LOG_IN: routes.apply.start,
        FORGOT_PASSWORD: routes.auth.reset,
      },
    },
    [routes.auth.reset]: {
      on: {
        RESET: routes.auth.login,
      },
    },
    [routes.apply.start]: {
      on: {
        CONTINUE: routes.apply.name,
      },
    },
    [routes.apply.name]: {
      on: {
        CONTINUE: routes.apply.income,
      },
    },
    [routes.apply.income]: {
      on: {
        CONTINUE: [
          {
            cond: "hasJobIncome",
            target: routes.apply.documents,
          },
          // If the above condition isn't met, we route to this page instead:
          { target: routes.apply.review },
        ],
      },
    },
    [routes.apply.documents]: {
      on: {
        CONTINUE: routes.apply.review,
      },
    },
    [routes.apply.review]: {
      on: {
        CONTINUE: routes.apply.success,
      },
    },
    [routes.apply.success]: {},
  },
  guards,
});