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

machine.js

const { log, pure } = actions;

const searchModes = {
 MAKE: 'Make',
 MODEL: 'Model',
 ENGINE: 'Engine',
 CATALOG: 'Catalog'
};

const searchMachine = Machine(
 {
  id: 'sm',
  context: {
   RegionId: 1,
   MakeId: 0,
   ModelId: 0,
   EngineId: 0,
   CategoryId: 0,
   PartNumber: '',
   BrandName: '',
   Query: ''
  },
  initial: 'search',
  states: {
   search: {
    initial: 'definite',
    on: {
     '': {
      target: 'feed',
      cond: 'isPartSpecified'
     },
     ASK: {
      target: '.indefinite',
      actions: ['log', 'setContext']
     },
     'GET.make': { target: '#routine.make' },
     'GET.model': {
      target: '#routine.model',
      cond: 'isMakeSpecified'
     },
     'GET.engine': {
      target: '#routine.engine',
      cond: 'isModelSpecified'
     },
     'GET.category': { target: '#routine.category' }
    },
    states: {
     indefinite: {
      on: {
       SET: [
        {
         target: 'definite',
         actions: ['log', 'setContext']
        }
       ]
      }
     },
     definite: {
      initial: 'router',
      states: {
       router: {
        id: 'router',
        on: {
         '': [
          {
           target: 'routine.category',
           cond: 'isVehicleSpecified'
          },
          {
           target: 'routine.engine',
           cond: 'isModelSpecified'
          },
          {
           target: 'routine.model',
           cond: 'isMakeSpecified'
          },
          {
           target: 'routine.make'
          }
         ]
        }
       },
       routine: {
        id: 'routine',
        initial: 'make',
        states: {
         make: {
          on: {
           SET: {
            target: '#router',
            actions: ['log', 'setContext']
           }
          }
         },
         model: {
          on: {
           SET: {
            target: '#router',
            actions: ['log', 'setContext']
           }
          }
         },
         engine: {
          on: {
           SET: {
            target: '#router',
            actions: ['log', 'setContext']
           },
           SKIP: {
            target: 'category'
           }
          }
         },
         category: {
          on: {
           SET: {
            target: '#sm.search',
            actions: ['log', 'setContext']
           }
          }
         }
        }
       }
      }
     }
    }
   },
   feed: {
    type: 'final'
   }
  }
 },
 {
  actions: {
   log: log(),
   setContext: assign((context, { type, ...eventData }) => {
    return {
     ...context,
     ...eventData
    };
   })
  },
  guards: {
   isVehicleSpecified: (context, event, { cond }) => {
    // cond === { type: 'searchValid', minQueryLength: 3 }
    return context.EngineId || event.EngineId > 0;
   },
   isModelSpecified: (context, event, { cond }) => {
    // cond === { type: 'searchValid', minQueryLength: 3 }
    return context.ModelId || event.ModelId > 0;
   },
   isEngineSpecified: (context, event, { cond }) => {
    // cond === { type: 'searchValid', minQueryLength: 3 }
    return context.EngineId || event.EngineId > 0;
   },
   isMakeSpecified: (context, event, { cond }) => {
    // cond === { type: 'searchValid', minQueryLength: 3 }
    return context.MakeId || event.MakeId > 0;
   },
   isCategorySpecified: (context, event, { cond }) => {
    // cond === { type: 'searchValid', minQueryLength: 3 }
    return context.CategoryId || event.CategoryId > 0;
   },
   isPartSpecified: (context, event, { cond }) => {
    const byCode =
    (context.PartNumber && context.BrandName) ||
    (event.PartNumber && event.BrandName);
    const byCatalog =
    (context.ModelId && context.CategoryId) ||
    (event.ModelId && event.CategoryId);
    return byCode || byCatalog;
   }
  }
 }
 );