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

machine.js

const searchStarWarsPeople = search =>
  fetch(`https://swapi.co/api/people/?search=${search}`).then(response =>
    response.json()
  );

const searchMachine = Machine(
  {
    id: "searchMachine",
    context: {
      search: "",
      result: {},
      error: {}
    },
    initial: "blank",
    states: {
      blank: {
        entry: "captureSearch"
      },
      debouncing: {
        entry: "captureSearch",
        after: {
          300: "searching"
        }
      },
      searching: {
        invoke: {
          id: "doSearch",
          src: "fetchResults",
          onDone: {
            target: "searchSuccess",
            actions: "captureResult"
          },
          onError: {
            target: "searchFailure",
            actions: "captureError"
          }
        }
      },
      searchSuccess: {
        on: {
          "": [
            {
              cond: "resultsEmpty",
              target: "searchNoResults"
            },
            {
              target: "searchResults"
            }
          ]
        }
      },
      searchResults: {},
      searchNoResults: {},
      searchFailure: {}
    },
    on: {
      SEARCH_CHANGED: [
        {
          cond: "searchIsEmpty",
          target: "blank"
        },
        {
          target: "debouncing"
        }
      ]
    }
  },
  {
    actions: {
      captureSearch: assign((_ctx, evt) => {
        return { search: evt.search };
      }),
      captureResult: assign({ result: (_ctx, evt) => evt.data }),
      captureError: assign({ error: (_ctx, evt) => evt.data })
    },
    guards: {
      searchIsEmpty: (_ctx, evt) => {
        return !evt.search || evt.search.length === 0;
      },
      resultsEmpty: (ctx, _evt) => {
        return ctx.result.count === 0;
      }
    },
    services: {
      fetchResults: (ctx, _evt) => searchStarWarsPeople(ctx.search)
    }
  }
);