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 authMachine = Machine(
    {
      id: "auth",
      type: "parallel",
      context: {
        retries: 0,
        timeout: 20000,
      },
      states: {
        auth: {
          initial: "loggedout",
          states: {
            loggedout: {
              entry: (context, event) => console.log("loggedout entry", context),
              on: {
                AUTHENTICATE: "authenticating",
              },
            },
            authenticating: {
              entry: [
                (context, event) => {
                  console.log("authenticating entry", context);
                },
                send("FETCH"),
              ],
              exit: send("RESET"),
              after: { ["auth.timeout"]: "TIMER" },
              on: {
                AUTH_SUCCESS: "loggedin",
                AUTH_FAIL: "loggedout",
                TIME_OUT: "loggedout",
              },
            },
            loggedin: {
              on: {
                LOGOUT: "loggedout"
              }
            },
          },
        },
        fetch: {
          initial: "idle",
          states: {
            idle: {
              on: {
                FETCH: "loading",
              },
            },
            loading: {
              on: {
                RESOLVE: "success",
                REJECT: "failure",
              },
            },
            success: {
              entry: send("AUTH_SUCCESS"),
              on: {
                RESET: "idle"
              }
            },
            failure: {
              entry: send("AUTH_FAIL"),
              on: {
                RESET: "idle",
                RETRY: {
                  target: "loading",
                  actions: assign({
                    retries: (context, event) => context.retries + 1,
                  }),
                },
              },
            },
          },
        },
      },
    },
    {
      actions: {
        // action implementations
        AUTHENTICATE: (context, event) => {
          console.log("calling auth...");
        },
        AUTH_SUCCESS: (context, event) => {
          console.log("recieved success response");
        },
        AUTH_FAIL: (context, event) => {
          console.log("receoved fail response");
        },
      },
      services: {
        SEND_AUTH: (context, event) => {
          console.log("sendging auth", context, event);
        },
        TIMER: (context, activity) => (callback, onReceive) => {
          console.log("timer started");
          const id = setTimeout(() => {
            console.log("timeout");
  
            callback({ type: "TIME_OUT" });
          }, context.timeout);
  
          return () => {
            console.log("clear timer");
            clearTimeout(id);
          };
        },
      },
    }
  );