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

machine.js

async function invokeFetch(context) {
  console.log(context)
  const { documentUrl } = context;

  return await fetch(`https://google.com`)
}


const DocMachine = Machine({
  id: 'doc-chat',
  initial: 'idle',
  context: {
    url: null,
    title: null,
  },
  states: {
    idle: {},
   selected: {
      initial: 'loading',
      states: {
        loading: {
          invoke: {
            id: 'get-doc',
           src: invokeFetch,
            onDone: {
              target: 'loaded',
              action: assign({
                documentUrl: (context, event) => event.url
              }),
            },
            onError: 'error'
          },
        },
        'loaded': {},
        'error': {}
      }
    }
  },
  on: {
    SELECT: {
      target: '.selected',
      action: assign({
        documentUrl: (context, event) => event.url
      }),
    },
    DESELECT: {
      target: '.idle',
      action: assign({
        documentUrl: () => null,
      }),
    },
  },
});

const docSelectEvent = {
  type: 'SELECT',
  url: 'reactjs'
}

const docDeselectEvent = {
  type: 'DESELECT',
  url: 'meh'
}