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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  function invokeFetchBreeds() {
  return fetch("https://api.thecatapi.com/v1/breeds").then(response =>
    response.json(), error => Promise.reject(error)
  );
}
  
  const fetchMachine = Machine({
  id: "cat-wiki",
  context: {
    breeds: [],
    breed: {}
  },
  initial: "loading",
  states: {
    loading: {
      invoke: {
        id: "fetch-breeds",
        src: invokeFetchBreeds,
        onDone: {
          target: "loaded",
          actions: assign({
            breeds: (_, event) => event.data
          })
        },
        onError: "failed"
      }
    },
    loaded: {
      type: "final",
      states: {
        selected: {}
      },
      on: {
        SELECT: {
          target: ".selected",
          actions: assign((context, event) => {
            console.log(context, event)
            const selected = context.breeds.find(
              ({ name }) => name === event.name
            );

            return {
              ...context,
              selected
            };
          })
        }
      }
    },
    failed: {
      on: {
        RETRY: "loading"
      }
    }
  }
});