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 machine = Machine(
  {
    id: "datapoints",
    type: "parallel",
    context: {
      token: null,
      promise: null,
      expiresAt: 0,
    },
    states: {
      auth: {

        initial: "startup",
        states: {
          startup: {
            on: {
              "": [
                { target: "loggedIn", cond: "loggedIn" },
                { target: "loggedOut", cond: "loggedOut" },
              ],
            },
          },
          requesting: {
            invoke: {
              id: "refreshToken",
              src: "refreshToken",
              onError: [
                { target: "loggedIn", cond: "loggedIn" },
                { target: "loggedOut", cond: "loggedOut" },
              ],
              onDone: { target: "loggedIn", actions: ["tokenRefreshed"] },
            },
          },
          loggedIn: {
            activities: ["countdown"],
            on: {
              LOGOUT: "loggedOut",
              TICK: [
                { target: "requesting", cond: "expired" },
                {
                  target: "loggedIn",
                  actions: actions.assign({
                    expiresAt: (context) => context.expiresAt - 1,
                  }),
                },
              ],
            },
          },
          loggedOut: {
            entry: "clearData",
            on: {
              LOGIN: "requesting",
            },
          },
        },
      },
      network: {
        initial: "nstartup",
        states: {
          nstartup: {
            on: {
              ONLINE: "online",
              OFFLINE: "offline",
            },
          },
          offline: {
            on: {
              ONLINE: "online",
            }
          },
          online: {
            on: {
              OFFLINE: "offline"
            }
          },
        },
      },
    },
  },
  {
    guards: {
      loggedIn: (context, _event) =>
        context.token !== null && context.promise !== null,
      loggedOut: (context, _event) => context.token === null,
      requesting: (context, _event) => context.promise !== null,
      expired: (context, _event) => context.expiresAt <= 0,
    },
    actions: {
      // saveToken: (context, event) => {
      //     context.token = event.data;
      //     context.expiresAt = "10";
      // },
      // savePromise: (context, event) => (context.promise = event.data),
      // startTimer: actions.send("TICK", {
      //     delay: 1000,
      //     id: "mainTimer",
      //   }),
      
      clearTimer: () => actions.cancel("mainTimer"),
      clearData: () =>
        actions.assign({
          token: null,
          promise: null,
        }),
      tokenRefreshed: actions.assign({
        expiresAt: 10,
        token: (c, e) => e.data,
      }),
    },
    services: {
      refreshToken: (_context, _event) =>
        new Promise((res, _rej) => {
          const t = setTimeout(() => {
            clearTimeout(t);
            res("test-token");
          }, 3000);
        }),
    },
    activities: {
      countdown: (context, activity) => {
        console.log("started", context, activity)
        // Start the beeping activity
        const interval = setInterval(() => actions.send("TICK"));

        // Return a function that stops the beeping activity
        return () => clearInterval(interval);
      }
    }    
  }
);