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

machine.js

const editorMachine = Machine({
  id: 'editor',
  initial: 'idle',
  context: {
    // The item we want to edit
    itemToEdit: { title: '', content: '' }
  },
  states: {
    idle: {
      enter: {
        actions: ['clearInputFields']
      },
      on: {
        NEW: {
          target: 'createNewContent'
        },
        EDIT: {
          target: 'editContent',
          actions: ['setItemsToEdit']
        }
      }
    },
    createNewContent: {
      enter: {
        actions: ['clearInputFields']
      },
      on: {
        ENTER_TITLE: {
          actions: ['assignTitle']
        },
        ENTER_CONTENT: {
          actions: ['assignContent']
        },
        SAVE: {
          target: 'submittingItem'
        },
        CANCEL: {
          target: 'idle'
        },
        EDIT: {
          target: 'editContent',
          actions: ['setItemsToEdit']
        }
      }
    },
    editContent: {
      on: {
        ENTER_TITLE: {
          actions: ['assignTitle']
        },
        ENTER_CONTENT: {
          actions: ['assignContent']
        },
        SAVE: {
          target: 'updateItem'
        },
        CANCEL: {
          target: 'idle',
          actions: ['clearInputFields']
        },
        EDIT: {
          target: 'editContent',
          actions: ['setItemsToEdit']
        },
        NEW: {
          target: 'createNewContent',
          actions: ['clearInputFields']
        }
      }
    },
    submittingItem: {
      invoke: {
        id: 'submitItem',
        src: 'submitItem',
        onDone: {
          target: 'idle',
          actions: ['setSuccessMessage']
        },
        onError: {
          actions: ['setErrorMessages']
        }
      },
    },
    updateItem: {
      invoke: {
        id: 'updateItem',
        src: 'updateItem',
        onDone: {
          target: 'idle',
          actions: ['setSuccessMessage']
        },
        onError: {
          actions: ['setErrorMessages']
        }
      },
    }
  }
}, {
  actions: {
    setItemsToEdit: assign((ctx, event) => {
      console.log('setItemsToEdit ctx =', ctx)
      console.log('setItemsToEdit event =', event)
    }),
    clearInputFields: assign((ctx, event) => {
      console.log('clearInputField ctx =', ctx)
      console.log('clearInputField vent =', event)
    }),
    assignTitle: () => {},
    assignContent: () => {},
    setErrorMessage: () => {},
    setSuccessMessages: () => {},
    submitItem: ((ctx, event) => {}),
    updateItem: ((ctx, event) => {})
  }
})