Gym checkin machine

machine.js

const getClasses = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: 'erick', isTrue: true})
    }, 5000)
  })
}

const getReservations = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ reservations: 10 })
    }, 3000)
  })
}

const logoutMachine = {
  id: 'logout',
  initial: 'hideButton',
  states: {
    hideButton: { on: { DISPLAY_BUTTON: 'displayButton' } },
    displayButton: {
      initial: 'hidden',
      states: {
        hidden: { on: { SHOW: 'shown' } },
        shown: { on: { HIDE: 'hidden', LOGOUT: 'logout' } },
        logout: { type: 'final', entry: 'logoutUser' },
      },
      on: { HIDE_BUTTON: 'hideButton' },
    },
  },
};



const reservationMachine = {
  id: 'reservation',
  initial: 'loading',
  states: {
    loading: {
      invoke: {
        id: 'fetchReservations',
        src: () => getReservations(),
        onDone: {
          target: 'success',
          actions: assign({
            data: (context, event) => ({ ...context.data, ...event.data})
          }),
        },
        onError: {
          target: 'failure',
          actions: assign({
            error: (context, event) => ({ ...context.data, ...event.data})
          }),
        },
      },
    },
    success: {
      on: {
        '': {
          target: 'show',
          cond: ({ data }) => (data ? true : false),
        },
      },
    },
    show: {
      on: { HIDE: 'hide', 
            VIEW_RESERVATIONS: 'viewReservations' } },
    hide: {
      on: {
        SHOW: 'show'
      }
    },
    failure: {
      on: {
        RETRY: 'loading'
      }
    },
    viewReservations: {
      type: 'final',
      entry: 'viewReservations'
    },
  },
};







const classMachine = Machine({
  id: 'classes',
  context: { data: { isTrue: false}, error: undefined },
  type: 'parallel',
  states: {
    classes: {
      id: 'class',
      initial: 'loading',
      states: {
        loading: {
          invoke: {
            id: 'geData',
            src: () => getClasses(),
            onDone: [
              {
                target: 'success',
                actions: assign({
                data: (context, event) => ({ ...context.data, ...event.data})
              }),
              },
              ],
            onError: {
              target: 'failure',
              actions: assign({
                error: (context, event) => ({ ...context.data, ...event.data})
              }),
            },
          },
        },
        failure: { on: { RETRY: 'loading' } },
        success: { on:{
          '': { target: 'reservations', cond: (context) => {
            return context.data.isTrue
          } }
        } },
        reservations: reservationMachine,
      }
    },
    logout: logoutMachine,
  }
});