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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
const states = {
  INITIAL: 'INITIAL',
  LOADING: 'LOADING',
  READY: 'READY',
  ERROR: 'ERROR',
  STEP_ONE: 'STEP_ONE',
  STEP_TWO: 'STEP_TWO',
  STEP_THREE: 'STEP_THREE'
}

const events = {
  FETCH_DATA: 'FETCH_DATA',
  RETRY: 'RETRY',
  TO_STEP_ONE: 'TO_STEP_ONE',
  TO_STEP_TWO: 'TO_STEP_TWO',
  TO_STEP_THREE: 'TO_STEP_THREE'
}

const fetchCompanyData = () =>  fetch('https://api.myjson.com/bins/123456').then(res => res.json()).catch(err => err)

  
const stepMachine = Machine({
  id: 'stepMachine',
  initial: [states.INITIAL],
  context: {
    originId: undefined,
    destinationId: undefined,
    date: undefined,
    passengers: undefined,
    vehicles: undefined,
    data: null,
    tripType: undefined,
    error: undefined
  },
  states: {
    [states.INITIAL]: {
      on: {
        [events.FETCH_DATA]: {
          target: states.LOADING
        }
      }
    },
    [states.LOADING]: {
      invoke: {
        id: 'fetchCompanyData',
        src: 'fetchCompanyData',
        onDone: {
          target: states.READY,
          actions: 'setData'
        },
        onError: {
          target: states.ERROR,
          actions: 'setError'
        },
      }
    },
    [states.READY]: {
      initial: states.STEP_ONE,
      states: {
        [states.STEP_ONE]: {
          on: {
            [events.TO_STEP_TWO]: {
              target: [states.STEP_TWO]
            }
          }
        },
        [states.STEP_TWO]: {
          on: {
            [events.TO_STEP_ONE]: {
              target: states.STEP_ONE
            },
            [events.TO_STEP_THREE]: {
              target: states.STEP_THREE
            }
          }
        },
        [states.STEP_THREE]: {
          type: 'final',
          on: {
            [events.TO_STEP_TWO]: {
              target: states.STEP_TWO
            }
          }
        },
      }
    },
    [states.ERROR]: {
      on: {
        [events.RETRY]: {
          target: states.LOADING
        }
      }
    },
  }
}, {
  actions: {
    setData: assign({
      data: (_, e) => e.data
    }),
    setError: assign({
      error: (_, e) => e.data
    })
  },
  services: {
    fetchCompanyData
  }
})