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

machine.js

const reservationModal = {
  initial: 'closed',
  states: {
    closed: {
      on: {
        OPEN: 'open'
      }
    },
    open: {
      on: {
        CLOSE: 'closed'
      }
    }
  }
}
const signoutModal = {
  initial: 'hidden',
  states: {
    hidden: {
      on: {
        SHOW: 'shown'
      }
    },
    shown: {
      on: {
        HIDE: 'hidden',
        SIGNOUT: 'logout'
      }
    },
    logout: { type: 'final'}
  }
}

const fetchUser = () => {
  return Promise.resolve({ id: 33, name: 'Test'})
}
  
const classMachine = Machine({
  id: 'class',
  context: { data: undefined, error: undefined },
  initial: 'loading',
  states: {
    loading: {
      invoke: {
        id: 'geData',
        src: (context, event) => fetchUser(),
        onDone: {
          target: 'success',
          actions: assign({ data: (context, event) => event.data })
        },
        onError: {
          target: 'failure',
          actions: assign({ error: (context, event) => event.data })
        }
      },
    },
    failure: {
      on: {
        RETRY: 'loading'
      }
    },
    success: {
      type: 'parallel',
      states: {
        reservation: reservationModal,
        logout: signoutModal
      }
    },
  }
})