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

machine.js

// * Stubbed out methods so we can copy the machine to the xstate visualizer
const fetchAll = () => {}
const setRemoteData = () => {}
const isDeselectingLastSelectedItem = () => {}
const selectMenuItem = () => {}
const deselectMenuItem = () => {}
const isNotCreated = (ctx, e) => false
const isNotYetActive = (ctx, e) => false
const hasOrderedAndIsActive = (ctx, e) => false
const hasOrderedAndIsExpired = (ctx, e) => false
const hasNotOrderedAndIsActive = (ctx, e) => false
const hasNotOrderedAndIsExpired = (ctx, e) => false
createMenuMachine({ isoWeek: "2019-W49", appTime: "2019-11-29T13:12:00-08:00" })
function createMenuMachine({ isoWeek, appTime }) {
  const activeMachine = {
    initial: "nothingSelected",
    states: {
      somethingSelected: {
        on: {
          VERIFY: "verifying",
          SELECT: {
            target: "somethingSelected",
            actions: "selectMenuItem",
          },
          DESELECT: [
            {
              target: "nothingSelected",
              cond: "isDeselectingLastSelectedItem",
              actions: "deselectMenuItem",
            },
            {
              target: "somethingSelected",
              actions: "deselectMenuItem",
            },
          ],
        },
      },
      nothingSelected: {
        on: {
          SELECT: {
            target: "somethingSelected",
            actions: "selectMenuItem",
          },
        },
      },
      verifying: {
        on: {
          SUBMIT: "submitting",
          CHANGE_ORDER: "somethingSelected",
        },
      },
      submitting: {
        on: {
          SUCCESS: "success",
          ERROR: "error",
        },
      },
      success: {
        type: "final",
      },
      error: {
        type: "final",
      },
    },
  }

  return Machine(
    {
      strict: true, // TODO Remove?
      id: "menu",
      initial: "loading",
      context: {
        isoWeek,
        appTime,
        selected: {},
        remoteData: undefined,
      },
      states: {
        loading: {
          invoke: {
            id: "fetchAll",
            src: (ctx, e) => fetchAll({ isoWeek: ctx.isoWeek }),
            onDone: [
              {
                target: "notYetActive",
                cond: "isNotCreated",
              },
              {
                target: "notYetActive",
                cond: "isNotYetActive",
                actions: "setRemoteData",
              },
              {
                target: "hasOrdered.expired",
                cond: "hasOrderedAndIsExpired",
                actions: "setRemoteData",
              },
              {
                target: "hasOrdered.active",
                cond: "hasOrderedAndIsActive",
                actions: "setRemoteData",
              },
              {
                target: "hasNotOrdered.expired",
                cond: "hasNotOrderedAndIsExpired",
                actions: "setRemoteData",
              },
              {
                target: "hasNotOrdered.active",
                actions: "setRemoteData",
              },
            ],
            onError: {
              target: "error",
            },
          },
        },
        notYetActive: {
          type: "final",
        },
        hasOrdered: {
          states: {
            expired: {
              type: "final",
            },
            active: {
              type: "final",
            },
          },
        },
        hasNotOrdered: {
          states: {
            expired: {
              type: "final",
            },
            active: { ...activeMachine },
          },
        },
        error: {
          type: "final",
        },
      },
    },
    {
      guards: {
        isDeselectingLastSelectedItem,
        isNotCreated,
        isNotYetActive,
        hasOrderedAndIsExpired,
        hasOrderedAndIsActive,
        hasNotOrderedAndIsExpired,
      },
      actions: {
        setRemoteData,
        selectMenuItem,
        deselectMenuItem,
      },
    }
  )
}