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

machine.js

const initialContext = {
  username: null,
};

/* 
USER STATES
A user can be in one of the following states. 
These states are calculated as a result of the `enrolledTOTP` and `registration` properties on the user record.
  - enrolledRegistered: is enrolled (in the maillist) and registered (has registration record in DB) 
  - not enrolledRegistered: is not enrolled (not in the maillist) and not registered (no reg record in DB)
  - enrolledOnly: is enrolled (in the maillist) but not registered (no reg record)
  - registeredOnly: is not enrolled (in the maillist) but is registered (has reg record in DB) -- unlikely but possible
*/

const userStates = {
  initial: 'display',
  states: {
    display: {},
    enrolledRegistered: {
      on: {
        REMOVE_REGISTRATION: { target: 'unregistering' },
        REMOVE_ENROLLMENT: { target: 'unenrolling' },
      },
    },
    notEnrolledRegistered: {
      on: {
        ENROLL: {
          target: 'enrolling',
        },
      },
    },
    enrolledOnly: {
      on: {
        REMOVE_ENROLLMENT: { target: 'unenrolling' },
      },
    },
    registeredOnly: {
      on: {
        ENROLL: {
          target: 'enrolling',
        },
      },
    },

    // remove enrollment and registration
    unenrolling: {},

    // remove registration record
    unregistering: {},

    enrolling: {},
  },
};

const adminMachine = Machine({
  id: 'ADMIN_APP',
  initial: 'ready',
  context: {
    ...initialContext,
  },
  states: {
    ready: {
      on: {
        SEARCH: {
          target: 'searching',
        },
      },
    },
    searching: {
      on: {
        SEARCH_SUCCESS: {
          target: 'display',
        },
        ERROR_INVALID_USER: {
          target: 'invalidUser',
        },
        ERROR_SERVER_ERROR: {
          target: 'serverError',
        },
      },
    },
    invalidUser: {
      on: {
        RESET: 'ready',
      },
    },
    serverError: {
      on: {
        SEARCH: 'searching',
        RESET: 'ready',
      },
    },
    display: {
      on: {
        RESET: 'ready',
      },
      ...userStates,
    },
  },
});