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 makeLoader = ({ id, src, next }) => {
  return {
    loading: {
      invoke: {
        id: id,
        src: src,
        onDone: {
          target: 'ready'
        },
        onError: {
          target: 'retry'
        }
      }
    },
    retry: {
      invoke: {
        id: id,
        src: src,
        onDone: {
          target: 'ready'
        },
        onError: {
          target: '#fitment-guide.error'
        }
      }
    },
    ready: {
      on: {
        SELECT: 'selected'
      }
    },
    selected: {
      on: {
        DESELECT: 'ready',
        SELECT: 'selected',
        NEXT: next
      }
    }
  };
};

const fitmentGuideStateChart = {
  id: 'fitment-guide',
  initial: 'idle',
  states: {
    idle: {
      on: {
        START: 'years'
      }
    },
    error: {
      on: {
        RESET: 'idle'
      }
    },
    years: {
      initial: 'loading',
      states: {
        ...makeLoader({
          id: 'fetchYears',
          src: 'FitmentGuide/fetchYears',
          next: '#fitment-guide.makes'
        })
      }
    },
    makes: {
      initial: 'loading',
      states: {
        ...makeLoader({
          id: 'fetchMakes',
          src: 'FitmentGuide/fetchMakes',
          next: '#fitment-guide.models'
        })
      }
    },
    models: {
      initial: 'loading',
      states: {
        ...makeLoader({
          id: 'fetchModels',
          src: 'FitmentGuide/fetchModels',
          next: '#fitment-guide.smartSubmodels'
        })
      }
    },
    smartSubmodels: {
      initial: 'loading',
      states: {
        ...makeLoader({
          id: 'fetchSubModels',
          src: 'FitmentGuide/fetchSubmodels',
          next: '#fitment-guide.smartSizes'
        })
      }
    },
    smartSizes: {
      initial: 'loading',
      states: {
        ...makeLoader({
          id: 'fetchSmartSizes',
          src: 'FitmentGuide/fetchSmartSizes',
          next: '#fitment-guide.vehicle'
        })
      }
    },
    vehicle: {
      initial: 'complete',
      states: {
        complete: { type: 'final' }
      }
    }
  }
};

const vehicleSelect = Machine(fitmentGuideStateChart);