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 documentEdit = Machine({
  id: 'documentEdit',
  initial: 'view',
  context: {
    status: 'draft'
  },
  on: {
    SET_STATUS: {
      actions: ['setStatus', 'log']
    },
    SET_DRAFT: {
      actions: ['setDraft']
    },
    SET_COLLABORATION: {
      actions: ['setCollaboration']
    }
  },
  states: {
    view: {
      id: 'view',
      entry: ['log'],
      on: {
        TOGGLE_MODE: {
          target: 'edit'
        },
        CONFIRM: {
          target: 'confirming',
          actions: ['log']
        },
        PROGRESSING: {
          target: 'progressing',
          actions: ['log']
        }
      }
    },
    edit: {
      on: {
        TOGGLE_MODE: {
          target: 'view'
        },
        SAVE: [{
          target: '#saving.draft', cond: 'isDraft'
        }, {
          target: '#saving.collaboration', cond: 'isCollaboration'
        }]
      }
    },
    saving: {
      states: {
        draft: {
          id: 'saving.draft',
          invoke: {
            src: 'savingDraft',
            onDone: {
              target: '#view'
            },
            onError: {
              target: '#view'
            }
          }
        },
        collaboration: {
          id: 'saving.collaboration',
          invoke: {
            src: 'savingCollaboration',
            onDone: {
              target: '#view'
            },
            onError: {
              target: '#view'
            }
          }
        }
      }
    },
    confirming: {
      on: {
        YES: 'progressing',
        NO: 'view'
      }
    },
    progressing: {
      initial: 'init',
      states: {
        init: {
          always: [{
            target: 'draft',
            cond: 'isDraft'
          }, {
            target: 'collaboration',
            cond: 'isCollaboration'
          }]
        },
        draft: {
          entry: ['log'],
          id: 'progress.draft',
          invoke: {
            src: 'progressDraft',
            onDone: {
              target: '#view'
            },
            onError: {
              target: '#view'
            }
          }
        },
        collaboration: {
          entry: ['log'],
          id: 'progress.collaboration',
          invoke: {
            src: 'progressCollaboration',
            onDone: {
              target: '#view'
            },
            onError: {
              target: '#view'
            }
          }
        }
      }
    }
  }
}, {
  actions: {
    setStatus: assign({
      status: (context, event) => event.value
    }),
    setDraft: assign({
      status: 'draft'
    }),
    setCollaboration: assign({
      status: 'collaboration'
    }),
    log: (context, event) => {
      console.log('documentEditMachine', event.type, event.payload)
    }
  },
  services: {
    progressDraft: async (context, event) => {
      return Promise.resolve()
    },
    savingDraft: async (context, event) => {
      return Promise.resolve()
    }
  },
  guards: {
    isDraft: (context) => context.status === 'draft',
    isCollaboration: (context) => context.status === 'collaboration'
  }
})