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

machine.js

const ALL = "All";

const fetchMachine = Machine(
  {
    id: "fetch",
    initial: "loading",
    context: { characters: [], filtered: [], genders: [], retries: 0 },

    states: {
      loading: {
        invoke: {
          src: "getCharacters",
          onDone: { target: "success", actions: "updateCharacters" },
          onError: { target: "failure" },
        },
      },

      success: { on: { FILTER: { actions: "filter" } } },

      failure: {
        after: { 1000: { target: "loading", cond: "okToRetry" } },
        exit: "updateRetries",
      },
    },
  },
  {
    actions: {
      updateCharacters: assign({
        characters: (_, { data }) => data,
        filtered: (_, { data }) => data,
        genders: (_, { data }) => [
          ALL,
          ...[...new Set(data.map(c => c.gender))].sort(),
        ],
      }),

      updateRetries: assign({ retries: ({ retries }) => retries + 1 }),

      filter: assign({
        filtered: ({ characters }, { genderOption }) =>
          genderOption === ALL
            ? characters
            : characters.filter(c => c.gender === genderOption),
      }),
    },

    guards: { okToRetry: ({ retries }) => retries < 5 },

    services: {
      getCharacters: async () => {
        const characters = await (await fetch(
          "https://ghibliapi.herokuapp.com/people",
        )).json();
        return characters.sort((a, b) => (a.name < b.name ? -1 : 1));
      },
    },
  },
);