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

machine.js

const privateViewState = {
  initial: "checkAuthorization",
  states: {
    checkAuthorization: {
      on: {
        SUCCESS: "showPrivatePage",
        FAILURE: "canRefreshToken",
      },
    },
    canRefreshToken: {
      on: {
        SUCCESS: "attemptTokenRefresh",
        FAILURE: "redirectToLogin",
      },
    },
    attemptTokenRefresh: {
      on: {
        SUCCESS: "checkRoles",
        FAILURE: "redirectToLogin",
      },
    },
    checkRoles: {
      on: {
        SUCCESS: "showPrivatePage",
        FAILURE: "showDashboard",
      },
    },
    redirectToLogin: {
      type: "final",
    },
    showDashboard: {
      type: "final",
    },
    showPrivatePage: {
      type: "final",
    },
  },
};

const publicViewState = {
  initial: "checkIsLoginPage",
  states: {
    checkIsLoginPage: {
      on: {
        SUCCESS: "checkAuthorization",
        FAILURE: "showPublicPage",
      },
      invoke: {
        id: 'getUser',
        src: (context, event) => console.log("AM I THE LOGIN PAGE?"),
        onDone: {
          // target: 'checkAuthorization',
          actions: assign({ user: (context, event) => event.data })
        },
        onError: {
          // target: 'failure',
          actions: assign({ error: (context, event) => event.data })
        }
      }
    },
    checkAuthorization: {
      on: {
        SUCCESS: "canRefreshToken",
        FAILURE: "showPublicPage",
      },
    },
    canRefreshToken: {
      on: {
        SUCCESS: "attemptTokenRefresh",
        FAILURE: "showPublicPage",
      },
    },
    attemptTokenRefresh: {
      on: {
        SUCCESS: "redirectToDashboard",
        FAILURE: "showPublicPage",
      },
    },
    showPublicPage: {
      type: "final",
    },
    redirectToDashboard: {
      type: "final",
    },
  },
};

const fetchMachine = Machine({
  id: "fetch",
  initial: "idle",
  states: {
    idle: {
      on: {
        PUBLIC_PAGE: "publicView",
        PRIVATE_PAGE: "privateView",
      },
    },
    publicView: {
      ...publicViewState,
    },
    privateView: {
      ...privateViewState,
    },
  },
});