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 g = {
  isActive: (context) => !!context.isActive
}

const a = {
  setStatusFromEvent: assign({
    isActive: (context, event) => {
      console.log('prototyping service response...')
      return !context.isActive
    }
  })
}

const s = {
  submitToggle: (context, event) => {
    console.log('submitToggle', context, event)
    return new Promise((resolve => {
      setTimeout(() => {
        resolve({ isActive: 'foo' })
      })
    }))
  }
}

const toggleActiveMachine = {
  initial: 'unknown',

  context: {
    isActive: false
  },

  states: {
    unknown: {
      id: 'unknown',

      on: {
        '': [
          { target: 'isActive', cond: 'isActive' },
          { target: 'isPaused' }
        ]
      }
    },
    isActive: {
      id: 'isActive',
      initial: 'idle',

      states: {
        idle: {
          on: {
            PAUSE: '#toggleState'
          }
        }
      }
    },
    isPaused: {
      id: 'isPaused',
      initial: 'idle',

      states: {
        idle: {
          on: {
            ACTIVATE: '#toggleState'
          }
        }
      }
    },

    toggleState: {
      id: 'toggleState',

      initial: 'showConfirm',
      onDone: '#unknown',

      states: {
        showConfirm: {
          on: {
            CANCEL: '#unknown',
            SUBMIT: 'submitToggle'
          }
        },

        submitToggle: {
          initial: 'loading',
          onDone: '#unknown',

          states: {
            loading: {
              invoke: 'submitToggle',
              onError: 'failure',
              onDone: {
                target: 'success',
                actions: ['setStatusFromEvent']
              }
            },

            failure: {
              after: {
                2000: 'showConfirm'
              }
            },

            success: {
              after: {
                2000: 'done'
              }
            },

            done: {
              type: 'final'
            }
          }
        }
      }
    }
  }
}

Machine(toggleActiveMachine, {
  guards: g,
  actions: a,
  services: s
})