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

machine.js

const USER_HAS_AGREED_TO_WELCOME = false;
const USER_IS_LOGGED_IN = false;
  
const conversationMachine = Machine({
  id: 'welcomeSequence',
  initial: 'idle',
  context: {
    hasVisitedPrior: null,
    user: null,
    conversationSlug: null,
  },
  states: {
    idle: {
      invoke: {
        id: 'userHasAgreedToWelcome',
        src: 'hasVisitedPrior',
        onDone: {
          target: 'enter',
          actions: ['updateVisited'],
        },
        onError: {
          target: 'welcome',
          actions: ['updateVisited'],
        },
      },
    },
    welcome: {
      on: {
        ENTER: {
          target: 'enter',
          actions: ['setVisited'],
        },
        EXIT: 'abort',
      },
    },
    enter: {
      invoke: {
        id: 'authenticated',
        src: 'checkUser',
        onDone: {
          target: 'active',
          actions: ['updateUser'],
        },
        onError: {
          target: 'unauthenticated',
          actions: ['updateUser'],
        },
      },
    },
    unauthenticated: {
      on: {
        SIGN_UP: 'signUp',
        LOG_IN: 'login',
      },
    },
    login: {
      on: {
        SUCCESS: 'active',
      },
    },
    signUp: {
      on: {
        SUCCESS: 'active',
      },
    },
    abort: {
      type: 'final',
    },
    active: {
      type: 'final',
    },
  },
},
{
  guards: {
    hasVisitedPrior: context => context.hasVisitedPrior,
    authenticated: context => context.user,
  },
  actions: {
    updateVisited: assign({ hasVisitedPrior: (_context, evt) => evt.data }),
    updateUser: assign({
      user: (_context, evt) => evt.data,
    }),
    setVisited: () => {
      console.log({ hit: 'hit' });
      try {
        const visited = window.localStorage.getItem(
          'TEDConversationsIntroduced',
        );
        if (!visited) {
          return window.localStorage.setItem(
            'TEDConversationsIntroduced',
            new Date().toISOString(),
          );
        }
        return visited;
      } catch (err) {
        return null;
      }
    },
  },
  services: {
    hasVisitiedPrior: () => USER_HAS_AGREED_TO_WELCOME ? Promise.resolve(true) : Promise.reject(false),
    checkUser: () => USER_IS_LOGGED_IN ? Promise.resolve(true) : Promise.reject(false),
  },
});