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

machine.js

const stopMachine = Machine({
  id: 'stop',
  initial: 'idle',
  context: {
    id: undefined
  },
  states: {
    idle: {
      on: {
        START: 'pending',
        STALL: 'stalled'
      }
    },
    stalled: {
      on: {
        UNSTALL: 'idle'
      }
    },
    pending: {
      onEntry: sendParent(ctx => ({ type: 'STOP_PENDING', stopId: ctx.id })),
      initial: 'pending',
      states: {
        pending: {
          on: {
            CANCEL: 'idle',
            FILL_BILL_OF_LADING: 'fillingBillOfLading'
          }
        },
        fillingBillOfLading: {
          on: {
            SAVE: 'billOfLadingFilled',
            CANCEL: 'pending'
          }
        },
        // TODO does it really make sense? Or is it UI sugar?
        // TODO make it cancelable
        billOfLadingFilled: {
          after: {
            // TODO 5000 or so
            1000: {
              target: 'completed'
            }
          }
        }
      }
    },
    canceled: {
      onEntry: sendParent(ctx => ({ type: 'STOP_CANCELLED', stopId: ctx.id })),
      on: {
        '': 'idle'
      }
    },
    completed: {
      type: 'final',
      onEntry: sendParent(ctx => ({ type: 'STOP_COMPLETED', stopId: ctx.id }))
    },
    // TODO feels like a hack
    selected: {
      type: 'history'
    }
  },
  on: {
    SELECT_STOP: {
      // TODO feels like a hack
      target: 'selected',
      actions: sendParent(ctx => ({ type: 'SELECT_STOP', stopId: ctx.id }))
    }
  }
}, {
  guards: {
  }
})