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

machine.js

const canSearch = (context, event) => {
  return event.query && event.query.length > 0;
}

const fetchResults = async (context, event) => {
  if (!context.query.length) {
    throw new Error('No query specified');
  }

  return [
    `${context.query} Result A`, 
    `${context.query} Result B`, 
    `${context.query} Result C`
  ];
}

const fetchSuggestions = async (context, event) => {
  if (!context.query.length) {
    throw new Error('No query specified');
  }  

  return [
    `${context.query} Suggestion A`, 
    `${context.query} Suggestion B`, 
    `${context.query} Suggestion C`
  ];
}

const fetchMachine = Machine({
  id: "search",
  initial: "idle",
  context: {
    query: "",
    results: null,
    suggestions: null
  },
  states: {
    idle: {
      on: {
        SEARCH: {
          target: "fetchingResults",
          cond: canSearch,
          actions: [
            "assignQuery",
            "clearResults", 
            "clearSuggestions"
          ]
        }
      }
    },
    fetchingResults: {
      invoke: {
        id: 'fetchResults',
        src: fetchResults,
        onDone: [
          {
            target: "fetchingSuggestions",
            cond: "hasNoResults"
          },
          {
            target: "showingResults",
            actions: "assignResults"
          }
        ],
        onError: {
          target: "searchFailure"
        }
      }
    },
    showingResults: {
      on: {
        SEARCH: "fetchingResults"
      }      
    },    
    showingResultsNotFound: {
      on: {
        SEARCH: "fetchingResults"
      } 
    },    
    fetchingSuggestions: {
      invoke: {
        id: 'fetchSuggestions',
        src: fetchSuggestions,
        onDone: [
          {
            target: "showingResultsNotFound",
            cond: "hasNoSuggestions"
          },
          {
            target: "showingSuggestions",
            actions: "assignSuggestions"
          }
        ],
        onError: {
          target: "searchFailure"
        }
      }      
    },
    showingSuggestions: {
      on: {
        SEARCH: "fetchingResults"
      }      
    },
    searchFailure: {
      on: {
        SEARCH: "fetchingResults"
      }      
    }
  }
},
{
  guards: {
    hasNoResults: (context, event) => {
      return !!event.data;
    },
    hasNoSuggestions: (context, event) => {
      return !!event.suggestions;
    }
  },
  actions: {
    assignQuery: assign({
      query: (context, event) => event.query
    }),
    assignResults: assign({
      results: (context, event) => event.data
    }),                
    assignSuggestions: assign({
      suggestions: (context, event) => event.data
    }),    
    clearResults: (context, event) => {
      context.results = null;
    },
    clearSuggestions: (context, event) => {
      context.suggestions = null;
    }
  }
});