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

machine.js

const checkAuth = () => false;
const getTwitchAuth = async () => ({id: 123, displayName: 'jlengstorf'});
const getNetlifyAuth = async () => 'auth';
const getCurrentConfig = () => 'config';
const getNetlifySites = () => ['site'];

const machine = Machine({
  id: 'dashboard',
    initial: 'checkingAuth',
    context: {
      userID: undefined,
      channel: undefined,
      site: undefined,
      sites: [],
      effects: [],
    },
    states: {
      checkingAuth: {
        invoke: {
          src: 'checkAuth',
          onDone: 'configure',
          onError: 'login',
        },
      },
    login: {
      initial: 'twitch',
      states: {
        twitch: {
          invoke: {
            src: getTwitchAuth,
            onDone: {
              actions: assign((_ctx, event) => ({
                channel: event.data.displayName,
                userID: event.data.id,
              })),
              target: 'netlify',
            },
          },
        },
        netlify: {
          invoke: {
            src: getNetlifyAuth,
            onDone: {
              target: '#configure-user',
            },
          },
        },
      },
    },
    configure: {
      id: 'configure-user',
      initial: 'loading',
      invoke: {
        src: getCurrentConfig,
        onDone: {
          actions: [
            assign((_ctx, event) => ({
              site: event.data && event.data.site_id,
            })),
          ],
          target: 'display',
        },
        onError: '.loading',
      },
      states: {
        loading: {
          invoke: {
            src: getNetlifySites,
            onDone: {
              actions: [
                assign((_ctx, event) => ({ sites: event.data })),
                
              ],
              target: 'setSiteID',
            },
          },
        },
        setSiteID: {
          on: {
            SET_SITE_ID: {
              actions: assign((_ctx, event) => {
                console.log(event);
                return { site: event.site };
              }),
              target: 'saving',
            },
          },
        },
        saving: {
          invoke: {
            src: ctx =>
              saveNetlifySiteID({ siteID: ctx.site, userID: ctx.userID }),
            onDone: {
              target: '#display-effects',
            },
            onError: {
              actions: assign((_ctx, event) => ({ errorMessage: event.data })),
            },
          },
        },
      },
    },
    display: {
      id: 'display-effects',
      initial: 'loading',
      states: {
        loading: {
          invoke: {
            src: ctx => loadEffects(ctx.site),
            onDone: {
              actions: assign((_ctx, event) => ({
                effects: event.data.effects,
                publicURL: event.data.publicURL,
              })),
              target: 'loaded',
            },
          },
        },
        loaded: {
          entry: assign({
            effects: ctx =>
              ctx.effects.map(effect => ({
                name: effect,
                ref: spawn(effectMachine.withContext({ name: effect })),
              })),
          }),
        },
      },
    },
  },
});