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

machine.js

  const pipelineItemMachine = Machine({
    id: 'pipelineItem',
    initial: 'compact',
    context: {
      quotes: []
    },
    states: {
      compact: {
        on: {
          EXPAND: 'fetching'
        }
      },
      fetching: {
        on: {
          RESOLVE: 'expanded',
          REJECT: 'failure'
        }
      },
      expanded: {
        on: {
          COMPACT: 'compact',
          VIEW_QUOTE: {
            target: 'expanded',
            actions: 'notifyParentViewQuote'
          },
          REQUOTE: {
            target: 'expanded',
            actions: 'notifyParentRequote'
          }
        }
      },
      failure: {
        on: {
          RETRY: {
            target: 'fetching'
          }
        }
      }
    }
  },{
    actions: {
      notifyParentViewQuote: (c,e) => {
        sendParent({type: 'VIEW_QUOTE', quote: {quoteId: 1234}})
      },
      notifyParentRequote: (c,e) => {
        sendParent({type: 'REQUOTE', quote: {quoteId: 4321}})
      }
    }
  });