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)
  
  const fetchMachine = Machine({
    id: 'status',
    initial: 'indeterminate',
    context: {
      color: 'orange',
      icon: 'halt'
    },
    states: {
      indeterminate: {
        on: {
          CLICK: {
            target: 'awaitingApproval',
            actions: assign({
              color: 'blue',
              icon: 'letter'
            })
          }
        }
      },
      awaitingApproval: {
        on: {
          CLICK: {
            target: 'approved',
            actions: assign({
              color: 'green',
              icon: 'thumbsup'
            })
          }
        }
      },
      approved: {
        on: {
          CLICK: {
            target: 'declined',
            actions: assign({
              color: 'red',
              icon: 'thumbsdown'
            })
          }
        }
      },
      declined: {
        on: {
          CLICK: {
            target: 'indeterminate',
            actions: assign({
              color: 'orange',
              icon: 'halt'
            })
          }
        }
      }
    }
  });