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

machine.js

const machineId = 'dataBoard';
const initialValues = {}
const dataTableMachine = Machine(
 
{
      id: machineId,
      initial: 'idle',
      context: {
        key: null,
        editingIndex: null,
        values: { ...initialValues },
        errors: {}
      },
      states: {
        idle: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                DELETE: [
                  { target: 'confirmDelete', cond: 'canDelete', actions: ['onDelete'] }
                ],
                ADD: [
                  {
                    target: `#${machineId}.editing.add`,
                    cond: 'havePermissions',
                    actions: ['onAdd']
                  }
                ],
                EDIT: [
                  {
                    target: `#${machineId}.editing.edit`,
                    cond: 'havePermissions',
                    actions: ['onEdit']
                  }
                ]
              }
            },
            confirmDelete: {
              on: {
                DELETE: 'deleting',
                CANCEL: 'idle'
              }
            },
            deleting: {
              invoke: {
                src: 'remove',
                onDone: {
                  target: 'idle',
                  actions: ['resetKey']
                },
                onError: 'errorDelete'
              }
            },
            errorDelete: {
              on: {
                DELETE: [
                  { target: 'confirmDelete', cond: 'canDelete', actions: ['onDelete'] }
                ],
                ADD: [
                  {
                    target: `#${machineId}.editing.add`,
                    cond: 'havePermissions',
                    actions: ['onAdd']
                  }
                ],
                EDIT: [
                  {
                    target: `#${machineId}.editing.edit`,
                    cond: 'havePermissions',
                    actions: ['onEdit']
                  }
                ]
              }
            }
          }
        },
        editing: {
          states: {
            add: {
              initial: 'idle',
              states: {
                idle: {
                  on: {
                    CHANGE: { actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'canDelete',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    SAVE: 'checkingValues'
                  }
                },
                confirmDelete: {
                  on: {
                    DELETE: 'deleting',
                    CANCEL: 'idle'
                  }
                },
                deleting: {
                  invoke: {
                    src: 'remove',
                    onDone: {
                      target: 'idle',
                      actions: ['resetKey']
                    },
                    onError: 'errorDelete'
                  }
                },
                errorDelete: {
                  on: {
                    CHANGE: { target: 'idle', actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'havePermissions',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    SAVE: 'checkingValues'
                  }
                },
                checkingValues: {
                  invoke: {
                    src: 'onSaveNewCheck',
                    onDone: 'savingNew',
                    onError: { target: 'errorChecking', actions: ['onErrorChecking'] }
                  }
                },
                errorChecking: {
                  on: {
                    CHANGE: { target: 'idle', actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'canDelete',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] }
                  }
                },
                savingNew: {
                  invoke: {
                    src: 'saveNew',
                    onDone: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    onError: { target: 'errorSaving', actions: ['onSaveNewError'] }
                  }
                },
                errorSaving: {
                  on: {
                    CHANGE: { target: 'idle', actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'canDelete',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    SAVE: 'checkingValues'
                  }
                }
              }
            },
            edit: {
              initial: 'idle',
              states: {
                idle: {
                  on: {
                    CHANGE: { actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'canDelete',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    SAVE: 'checkingValues'
                  }
                },
                confirmDelete: {
                  on: {
                    DELETE: 'deleting',
                    CANCEL: 'idle'
                  }
                },
                deleting: {
                  invoke: {
                    src: 'remove',
                    onDone: { target: 'idle', actions: ['resetKey'] },
                    onError: 'errorDelete'
                  }
                },
                errorDelete: {
                  on: {
                    CHANGE: { target: 'idle', actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'canDelete',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    SAVE: 'checkingValues'
                  }
                },
                checkingValues: {
                  invoke: {
                    src: 'onSaveChangesCheck',
                    onDone: 'savingChanges',
                    onError: { target: 'errorChecking', actions: ['onErrorChecking'] }
                  }
                },
                errorChecking: {
                  on: {
                    CHANGE: { target: 'idle', actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'canDelete',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] }
                  }
                },
                savingChanges: {
                  invoke: {
                    src: 'saveChanges',
                    onDone: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    onError: { target: 'errorSaving', actions: ['onSaveChangesError'] }
                  }
                },
                errorSaving: {
                  on: {
                    CHANGE: { target: 'idle', actions: ['onChange'] },
                    DELETE: [
                      {
                        target: 'confirmDelete',
                        cond: 'canDelete',
                        actions: ['onDelete']
                      }
                    ],
                    CANCEL: { target: `#${machineId}.idle`, actions: ['clearContext'] },
                    SAVE: 'checkingValues'
                  }
                }
              }
            }
          }
        }
      }
    }
 
 ,
    {
      guards: {
        canDelete: () => Boolean('not new row or not editing row and have permissions'),
        havePermissions: () => true
      }
    }
);