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 formMachine = Machine({
  id: 'formMachine',
  context: {
    authedUser: null,
  },
  initial: 'form',
  states: {
    form: {
      on: {
        INPUT_ERROR: 'formError',
        SAVE: 'saving',
        EDIT: 'form',
      }
    },
    formError: {
      on: {
        EDIT: 'form'
      }
    },
    saving: {
      on: {
        SUCCESS: 'success',
        ERROR: 'formError'
      }
    },
    success: {
      type: 'final',
      // Since this state doesn't handle the event, it bubbles up
      entry: sendParent('SUCCESS'),
    },
  },
});

// While in `loading` state, sending an event of 'SUCCESS' expects an object with key 'authedUser' to be the currently authenticated user (or not)
const fetchMachine = Machine({
  id: 'completeSetup',
  context: {
    authedUser: null,
  },
  initial: 'loading',
  states: {
    loading: {
      on: {
        '': { target: 'form', cond: ({ authedUser }) => authedUser },
        ERROR: 'loadError',
        SUCCESS: {
          target: 'form',
          actions: assign({
            authedUser: (context, event) => event.authedUser,
          }),
        }
      }
    },
    loadError: {
      type: 'final',
    },
    form: {
      initial: 'changePassword',
      states: {
        changePassword: {
          invoke: {
            id: 'formMachine',
            src: formMachine,
            data: {
              authedUser: (context) => context.authedUser,
            }
          },
          on: {
            SUCCESS: [
              { target: 'success', cond: ({ authedUser }) => authedUser },
              { target: 'signin', cond: ({ authedUser }) => !authedUser },
            ],
          },
        },
        signin: {
          invoke: {
            id: 'formMachine',
            src: formMachine,
            data: {
              authedUser: (context) => context.authedUser,
            }
          },
          on: {
            SUCCESS: 'success',
          },
        },
        success: {
          type: 'final',
          entry: sendParent('SUCCESS'),
        }
      }
    }
  },
});