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

machine.js

const factoryViewing = Machine({
  id: 'factoryViewing',
  initial: 'idle',
  states: {
    idle: {
      on: {
        LOAD: 'loading'
      }
    },
    loading: {
      on: {
        SUCCESS: 'interacting',
        ON_EMPTY: 'empty',
        DID_ERROR: 'error',
      }
    },
    // State
    interacting: {
      initial: 'idle',
      states: {
        // State
        idle: {
          on: {
            HAS_ORDERS: 'factorySelection',
            NO_ORDERS: 'empty',
          }
        },
        // State
        factorySelection: {
          on: {
            SELECT_FACTORY: 'specificFactoryView'
          }
        },
        // State
        specificFactoryView: {
          initial: 'idle',
          on: {
            UNSELECT_FACTORY: 'factorySelection',
            SELECT_FACTORY: 'specificFactoryView',
          },
          states: {
            // State
            idle: {
              on: {
                HAS_DATA: 'orders',
                NO_DATA: 'dispatchedAll',
              }
            },
            // State
            dispatchedAll: {},
            orders: {
              initial: 'noOrdersSelected',
              states: {
                noOrdersSelected: {
                  on: {
                    SELECT_ORDER: 'specificOrder',
                  }
                },
                specificOrder: {
                  on: {
                    SELECT_ORDER: 'specificOrder',
                  }},
              }
            },
          }
        },
        empty: {},
      }
    },
    empty: {},
    error: {}
  },
  on: {
    RELOAD: 'loading'
  }
})