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

machine.js

const token = Machine(
    {
        id: "token",
        initial: "idle",
        context: {
            data: null,
            expired: true,
            online: false,
            loaded: false,
        },
        states: {
            idle: {
                initial: "unloaded",
                states: {
                    unloaded: {
                        entry: [actions.sendParent("UNLOADED")],
                        on: {
                            LOAD: "loading",
                        },
                    },
                    prior: {
                        type: "history",
                        target: "unloaded",
                    },
                    loaded: {
                        entry: actions.sendParent("LOADED"),
                        on: {
                            EXPIRED: { target: "loading" },
                            always: { target: "loading", cond: "expired" },
                        },
                    },
                },
            },
            loading: {
                initial: "start",
                on: {
                    UNLOAD: "idle.unloaded",
                    OFFLINE: ".start",
                },
                states: {
                    fetching: {
                        on: {
                            SUCCESS: { target: "idle.loaded", actions: "setData" },
                            FAILED: "idle",
                        },
                    },
                    start: {
                        on: {
                            always: { target: "fetching", cond: "online" },
                        },
                    },
                },
            },
        },
    },
    {
        guards: {
            expired: (context) => context.expired,
            loaded: (context) => context.data != null,
            online: (context) => context.online,
        },
        actions: {
            clearData: () =>
                actions.assign({
                    data: null,
                }),
            setData: () =>
                actions.assign({
                    data: dummyTokenData,
                }),
        },
    },
);

const auth = Machine({
    id: "auth",
    initial: "loggedOut",
    states: {
        start: {
            on: {
                LOGIN: "loggedIn",
                LOGOUT: "loggedOut",
            },
        },
        loggedIn: {
            on: {
                UNLOADED: "loggedOut",
                LOGOUT: { actions: actions.send("UNLOAD", { to: "#token" }) },
            },
        },
        loggedOut: {
            on: {
                LOADED: "loggedIn",
                LOGIN: { actions: actions.send("LOAD", { to: "#token.idle" }) },
            },
        },
    },
});


const network = Machine(
    {
        id: "network",
        context: {
            online: false,
        },
        initial: "start",
        states: {
            start: {
                on: {
                    always: [{ target: "online", cond: "online" }, { target: "offline" }],
                },
            },
            offline: {
                entry: "offline", // [actions.send("OFFLINE", { to: "#token" }), actions.assign({ online: false })],
                on: {
                    NET_UP: "online",
                },
            },
            online: {
                entry: "online", // [actions.send("ONLINE", { to: "#token" }), actions.assign({ online: true })],
                on: {
                    NET_DOWN: "offline",
                },
            },
        },
    },
    {
        actions: {
            online: () =>
                actions.assign({
                    online: true,
                }),
            offline: () =>
                actions.assign({
                    online: false,
                }),
        },
    },
);


const manager = Machine(
    {
        id: "datapoints",
        context: {
            networkRef: null,
            authRef: null,
            tokenRef: null,
        },
        initial: "start",
        states: {
            start: {
                // entry: ["createNetwork", "createAuth", "createToken"],
                invoke: [auth, token, network]
            },
        },
    },
    {
        // guards: {
        //     auth: (context) => context.authRef != null,
        //     token: (context) => context.tokenRef != null,
        //     network: (context) => context.networkRef != null,
        // },
        actions: {
            createNetwork: (context) =>
                context.networkRef === null &&
                actions.assign({ networkRef: () => spawn(network, { name: "network", autoForward: true }) }),
            createToken: (context) =>
                context.tokenRef === null &&
                actions.assign({ tokenRef: () => spawn(token, { name: "token", autoForward: true }) }),
            createAuth: (context) => context.authRef === null && actions.assign({ tokenRef: () => spawn(auth, "auth") }),
        },
    },
);