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({
  initial: 'unknown',

  context: {
    // some additional data like identifier here
    isActive: false
  },

  states: {
    // @see https://xstate.js.org/docs/guides/transitions.html#transient-transitions
    unknown: {
      id: 'unknown',

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

    isActive: {
      id: 'isActive',
      initial: 'idle',

      states: {
        idle: {
          on: {
            PAUSE: 'confirm'
          }
        },

        confirm: {
          initial: 'idle',
          onDone: '#unknown',

          on: {
            CANCEL: '#unknown',
          },

          states: {
            idle: {
              on: {
                SUBMIT: 'submitPausing'
              },
            },

            submitPausing: {
              invoke: 'submitPausing', // handles loading, error, success
              onError: 'failure',
              onDone: 'success'
            },

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

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

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

    isPaused: {
      id: 'isPaused',
      initial: 'idle',

      states: {
        idle: {
          on: {
            ACTIVATE: 'confirm'
          }
        },

        confirm: {
          initial: 'idle',
          onDone: '#unknown',

          on: {
            CANCEL: '#unknown',
          },

          states: {
            idle: {
              on: {
                SUBMIT: 'submitActivation'
              },
            },

            submitActivation: {
              invoke: 'submitActivation', // handles loading, error, success
              onError: 'failure',
              onDone: 'success'
            },

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

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

            done: {
              type: 'final'
            }
          }
        }
      }
    }
  }
}, {
  guards: {
    isActive: (ctx) => ctx.isActive
  }
});