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

machine.js

const {cancel} = actions

Machine(
  {
    id: `searchBox`,
    initial: `idle`,
    context: {
      query: ``,
      results: [],
    },
    states: {
      idle: {
        on: {
          TYPE: {
            actions: [`assignQuery`, `cancelSearch`, `sendSearchEvent`],
          },
          SEARCH: {
            cond: `searchValid`,
            target: `searching`,
          },
        },
      },

      searching: {
        invoke: {
          id: `search`,
          src: `search`,
          onDone: {
            actions: `setResults`,
            target: `idle`,
          },
        },
      },
    },
  },
  {
    actions: {
      assignQuery: assign({
        query: (ctx, e) => e.query || `test`
      }),
      cancelSearch: cancel(`debouncedSearch`),
      sendSearchEvent: send(`SEARCH`, {
        delay: 2500,
        id: `debouncedSearch`,
      }),
      
      setResults: assign({
        results: (ctx, e) => [{}, {}]
      }),
    },
    guards: {
      searchValid: (ctx) => ctx.query.trim().length > 0,
    },
  }
)