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 hasPreviouslyLoadedApp = (context, event) => {
    // return Math.random() >= 0.4;
    return !context.appLoaded || context.appLoaded < context.version;
  }
  
  const isAuthenticated = (context, event) => {
    // return Math.random() >= 0.4;
    return context.user && !!context.user.token; // typescript optional user check
  }
  
  const getProfileInformation = ({user}) => {
    console.log('user', user)
    return new Promise((resolve, reject) => {
      resolve({ user: { id: 'lasdkfjsldkjf' } })
    })
  }

  const fetchMachine = Machine({
    id: 'app',
    initial: 'splash',
    context: {
      user: {
        token: 'nfd'
      },
      error: undefined,
      appLoaded: 0.8,
      version: 1
    },
    states: {
      splash: {
        initial: 'startStart',
        states: {
          startStart: {
            after: {
              3000: 'startCheck'
            }
          },
          startCheck: {
            on: {
              '': [
                { target: '#app.onboarding', cond: hasPreviouslyLoadedApp },
                { target: '#app.authenticated.idle', cond: isAuthenticated },
                { target: '#app.login' }
              ]
            }
          }
        }
      },
      onboarding: {
        id: 'onboarding',
        initial: 'welcome',
        states: {
          welcome:{
            on: {
              NEXT: {
                target: 'features'
              }
            }
          },
          features: {
            on: {
              PREV: {
                target: 'welcome'
              },
              NEXT: {
                target: 'bookAppointments'
              }
            }
          },
          bookAppointments: {
            on: {
              PREV: {
                target: 'features'
              },
              NEXT: {
                target: 'onBoarded'
              }
            }
          },
          onBoarded: {
            type: 'final'
          }
        },
        on: {
          SKIP: {
            target: 'login'
          }
        },
        onDone: 'login'
      },
      login: {
        initial: 'phone',
        states: {
          phone: {
            on: {
              'ENTERED': {
                target: 'phoneVerification'
              }
            }
          },
          phoneVerification: {
            on: {
              'VALID': {
                target: 'loggedIn'
              }
            }
          },
          loggedIn: {
            type: 'final'
          }
        },
        onDone: 'authenticated.idle',
        on: {
          'REGISTER': {
            target: 'register'
          },
          'ACCOUNT_RECOVERY': {
            target: 'accountRecovery'
          }
        }
      },
      register: {
        initial: 'phone',
        states: {
          phone: {
            on: {
              'ENTERED': {
                target: 'phoneVerification'
              }
            }
          },
          phoneVerification: {
            on: {
              'VERIFIED': {
                target: 'email'
              }
            }
          },
          email: {
            on: {
              'EMAIL_ENTERED': {
                target: 'emailVerification'
              }
            }
          },
          emailVerification: {
            on: {
              'VERIFIED': {
                target: 'registered'
              }
            }
          },
          registered: {
            type: 'final'
          }
        },
        onDone: 'authenticated.idle'
      },
      accountRecovery: {
        inital: 'recover',
        states: {
          recover: {
            on: {
              target: 'emailVerification'
            }
          },
          emailVerification: {
            on: {
              'VERIFIED': {
                target: 'changePhone'
              }
            }
          },
          changePhone: { // question
            on: {
              'AUTHENTICATED': {
                target: 'authenticated'
              },
              'CHANGE_PHONE': {
                target: 'updatePhone'
              }
            }
          },
          updatePhone: {
            on: {
              'VERIFY': {
                target: 'verifyPhone'
              }
            }
          },
          verifyPhone: {
            on: {
              'AUTHENTICATED': {
                target: 'authenticated'
              }
            }
          },
          authenticated: {
            type: 'final'
          }
        },
        onDone: 'authenticated.idle'
      },
      authenticated: {
        // type: 'parallel',
        entry: 'appLoaded',
        initial: 'idle',
        states: {
          idle: {
            invoke: {
              id: 'getProfile',
              src: (context, event) => getProfileInformation(context),
              onDone: {
                target: 'map',
                actions: assign({ user: (context, event) => { return {...context.user, ...event.data.user } } })
              },
              onError: {
                target: 'map', // 'failure',
                actions: assign({ error: (context, event) => event.data })
              }
            }
          },
          map: {},
          // booking: {},
          // profile: {},
          // editProfile: {},
          // viewAppointment: {},
          // upcomingAppointments: {},
          // selector: {},
          // goals: {},
          // feedback: {},
          // upload: {},
          // failure: {}
        }
      },
      termsOfService: {}, // modal? so that we can close and get back to the last screen
    },
    on: {
      'TOS': {
        target: 'termsOfService'
      }
    }
  }, {
    actions: {
      appLoaded: assign({ appLoaded: (context) => context.version })
    }
  });