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

machine.js

const editinMachine = Machine({
	id: 'editingMachine',
	initial: 'idle',
	context: {
		id: null,
		name: null,
		email: null,
		errorMessage: null,
	},
  on: {
    ERROR: {
      actions: ['setErrorMessage']
    }
  },
	states: {
		idle: {
			on: {
				ADD: {
				  target: 'editing',
					actions: ['onNew', 'removeErrorMessage'],
				},
				EDIT: [{
					target: 'editing',
					actions: ['onEdit', 'removeErrorMessage'],
					cond: 'isExistingRecord'
				}, {
				  actions: ['setNoIdError']
				}],
				DELETE: [
					{
						cond: 'isExistingRecord',
						target: 'delete',
						actions: ['setDeleteId', 'removeErrorMessage'],
					},
				],
			},
		},
		editing: {
			on: {
			  CHANGE: {
			    actions: [
			      'removeErrorMessage',
			      'setEmailAndName'
			      ]
			  },
				SAVE: [{
					target: 'saving',
					actions: ['removeErrorMessage'],
					cond: 'isEmailAndNameAreSet'
				}, {
				  actions: ['setNoRequiredError']
				}],
				CANCEL: {
					target: 'idle',
					actions: ['removeErrorMessage'],
				},
			},
		},
		saving: {
			invoke: {
				src: 'saveMutation',
				onDone: {
					target: 'idle',
					actions: ['resetContext'],
				},
				onError: {
					target: 'editing',
					actions: ['setErrorMessage'],
				},
			},
		},
		delete: {
			on: {
				CONFIRM: {
					target: 'deleting',
					actions: ['removeErrorMessage'],
				},
				CANCEL: {
					target: 'idle',
					actions: ['removeErrorMessage'],
				},
			},
		},
		deleting: {
			invoke: {
				src: 'deleteMutation',
				onDone: {
					target: 'idle',
					actions: ['resetContext'],
				},
				onError: {
					target: 'delete',
					actions: ['setErrorMessage'],
				},
			},
		},
	},
}, {
  guards: {
    isExistingRecord: () => true,
    isEmailAndNameAreSet: () => true
  }
})