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

machine.js

Machine({
  id: 'Fleet Page API',
  initial: 'idle',
  context: {
    dog: null,
    schedule: null,
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading',
        FOCUS_REQUIREMENT: 'focused',
        CALCULATE: 'calculating',
      }
    },
    // Requirement focused
    focused: {
      on: {
        REASSIGN: 'reassigning',
        UNASSIGN: 'unassigning',
      }
    },
    // recalculate fleet schedule
    calculating: {
      // async pattern here
    },
    // reassign a requirement to a different vessel
    reassigning: {
      // async pattern here
    },
    unassigning: {
      // async pattern here
    },
    loading: {
      invoke: {
        id: 'fetchDog',
        src: (context, event) => fetch('https://dog.ceo/api/breeds/image/random')
          .then(data => data.json()),
        onDone: {
          target: 'resolved',
          actions: assign({
            dog: (_, event) => event.data
          })
        },
        onError: 'rejected'
      },
      on: {
        CANCEL: 'idle'
      }
    },
    resolved: {
      type: 'final'
    },
    rejected: {
      on: {
        FETCH: 'loading'
      }
    }
  }
})