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

machine.js

const states = {
  IDLE: 'IDLE',
  LOADED: 'LOADED',
  LOADING: 'LOADING',
  SEND: 'SEND',
  SENDED: 'SENDED',
  SENDING: 'SENDING',
  SHOW_BILL: 'SHOW_BILL',
  SHOW_CATEGORIES: 'SHOW_CATEGORIES',
  SHOW_CATEGORY: 'SHOW_CATEGORY',
}

const transitions = {
  ADD_PRODUCT: 'ADD_PRODUCT',
  CANCEL: 'CANCEL',
  CLOSE_ORDER: 'CLOSE_ORDER',
  SEND_ORDER: 'SEND_ORDER',
  SHOW_CATEGORIES: 'SHOW_CATEGORIES',
  SHOW_CATEGORY: 'SHOW_CATEGORY',
  UPDATE_CLIENT: 'UPDATE_CLIENT',
  UPDATE_PRODUCT: 'UPDATE_PRODUCT',
}


const context = {
  categories: [],
  client: null,
  products: [],
  selectedCategory: null,
  id: null,
}

const ordersMachine = Machine(
  {
    id: 'orders',
    initial: states.IDLE,
    context,
    states: {
      [states.IDLE]: {
        on: {
          [transitions.CANCEL]: {
            actions: 'cancelOrder',
          },
          [transitions.SHOW_CATEGORIES]: states.SHOW_CATEGORIES,
          [transitions.SEND_ORDER]: {
            target: states.SEND,
          },
          [transitions.CLOSE_ORDER]: states.SHOW_BILL,
          [transitions.UPDATE_CLIENT]: {
            actions: 'updateClient',
          },
          [transitions.UPDATE_PRODUCT]: {
            actions: 'updateProduct',
          },
        },
      },
      [states.SHOW_CATEGORIES]: {
        initial: states.LOADING,
        states: {
          [states.LOADING]: {
            invoke: {
              id: 'load_categories',
              src: ({ categories }) => {
                if (categories.length > 0) {
                  return categories
                } else {
                  return Firebase.getCollection('menu')
                }
              },
              onDone: {
                target: states.LOADED,
                actions: ['loadCategories'],
              },
              onError: states.LOADING,
            },
          },
          [states.LOADED]: {
            type: 'final',
          },
        },
        on: {
          [transitions.SHOW_CATEGORY]: {
            target: states.SHOW_CATEGORY,
            actions: ['setSelectedCategory'],
          },
          [transitions.CANCEL]: states.IDLE,
        },
      },
      [states.SHOW_CATEGORY]: {
        initial: states.LOADING,
        states: {
          [states.LOADING]: {
            invoke: {
              id: 'loadCategory',
              src: ({ categories }) => {
                if (categories[0].products.length > 0) {
                  return [...categories.map(({ products }) => products)]
                } else {
                  return Firebase.getCollectionGroup('products')
                }
              },
              onDone: {
                target: states.LOADED,
                actions: 'loadProducts',
              },
            },
          },
          [states.LOADED]: {
            type: 'final',
          },
        },
        on: {
          [transitions.ADD_PRODUCT]: {
            target: states.IDLE,
            actions: ['addProduct'],
          },
          [transitions.CANCEL]: states.SHOW_CATEGORIES,
        },
      },
      [states.SEND]: {
        initial: states.SENDING,
        states: {
          [states.SENDING]: {
            invoke: {
              id: 'sendOrder',
              src: ({ client, products }) => {
                return Firebase.createDocument('orders', {
                  client,
                  products: products.map(product => ({
                    ...product,
                    sended: true,
                  })),
                })
              },
              onDone: {
                target: states.SENDED,
                actions: 'loadOrder',
              },
            },
          },
          [states.SENDED]: {
            type: 'final',
          },
        },
        onDone: states.IDLE,
      },
      [states.SHOW_BILL]: {
        type: 'final',
      },
    },
  },
  {
    actions,
  },
)