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

machine.js

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'loading',
    context: {
      data: {},
      error: {},
    },
    states: {
      loading: {
        invoke: {
          src: 'fetchData',
          onDone: {
            target: 'success',
            actions: assign({
              data: (_, event) => event.data,
            }),
          },
          onError: {
            target: 'failure',
            actions: assign({
              error: (_, event) => event.data,
            }),
          },
        },
      },
      success: {
        entry: 'postSuccess',
        on: {
          '': {
            target: 'collapsed'
          }
        }
      },
      failure: {
        type: 'final',
      },
      collapsed: {
        entry: ['onCollapsed'],
        on: {
          'EXPAND': {
            target: 'expanded'
          },
          'FETCH': {
            target: 'loading'
          },
        }
      },
      expanded: {
        entry: ['onExpand'],
        on: {
          'COLLAPSE': {
            target: 'collapsed'
          },
          'FETCH': {
            target: 'loading'
          },
        }
      },
    },
    
  });