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 authStates = {
  initial: 'signin',
  states: {
    signin: {
        on: {
          SUBMIT: 'loading'
        }
    },
    loading: {
      on: {
        NEW_PASSWORD_REQUIRED: 'newpassword',
        MFA_SETUP: 'mfasetup',
        SOFTWARE_TOKEN_MFA: 'mfaauth'
      }        
    },
    newpassword: {
      on: {
        SUBMIT: 'loading'
      }        
    },      
    mfasetup: {
      on: {
        SUBMIT: 'mfaauth'
      }
    },
    mfaauth: {
      on: {
        SUCCESS: 'authenticated',
        FAIL: 'failure'
      }        
    },
    authenticated: {
      type: 'final'
    },
    failure: {
      on: {
        RETRY: 'signin'
      } 
    }
  }
} 

const applicationStates = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      on: {
        RESOLVE: 'success',
        REJECT: 'error'
      }
    },
    success: {
      type: 'final'
    },
    error: {}
  }  
}
 
const progressStates = {
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      on: {
        RESOLVE: 'loaded',
        REJECT: 'error'
      }
    },
    loaded: {
      on: {
        SAVE: 'saving'
      }
    },
    saving: {
      on: {
        RESOLVE: 'saved',
        REJECT: 'error'
      }
    },
    saved: {
      type: 'final'
    },
    error: {}
  }  
}

const formStates = {
  initial: 'data',
  states: {
    data: {
      on: {
        SAVE_COMPLETE: 'validating',
        SAVE_INCOMPLETE: 'success'
      }
    },
    validating: {
      on: {
        INVALID: 'error',
         VALID: 'success'
      }
    },
    success: {
      type: 'final'
    },
    error: {}
  }
}

const pageStates = {
  initial: "idle",
  states: {
    idle: {
      on: { FETCH: "loading" }
    },
    loading: {
      entry: ["load"],
      on: {
        RESOLVE: {
          target: "form",
          actions: assign({
            data: (context, event) => event.data
          })
        },
        REJECT: {
          target: "error",
          actions: assign({
            data: (context, event) => event.data
          })
        }
      }
    },
    form: {
      ...formStates,
      on: {
        SAVE: 'saving'
      }
    },
    saving: {
      on: {
        RESOLVE: 'success',
        REJECT: 'error'
      }
    },    
    success: {
      type: 'final'
    },
    error: {}
  }  
}
  
const appMachine = Machine({
  id: 'app',
  context: {},
  type: "parallel",
  states: {
     auth:{
      id: 'auth',
      context: {},
      ...authStates
    }, 
    application:{
      context: {
        daysremaining: undefined
      },      
      ...applicationStates
    },
    progress:{
      context: {},      
      initial: 'idle',
      ...progressStates
    },
    page:{
      id: "form",
      context: {},      
      ...pageStates
    }
  }
});