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

machine.js

const editPageMachine = Machine({
    id: 'editPage',
    initial: 'preparing',
    states: {
      preparing: {
        on: {
          CREAT_ENTITY: 'creating',
          UPDATE_ENTITY: 'updating'
        }
      },
      creating: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              LOAD_DATA: 'loading',
              SAVE_ENTITY: 'saving',
              CANCEL_CREATING: 'canceling',
            }
          },
          loading: {
            on: {
              LOAD_SUCCEEDED: 'idle',
              LOAD_FAILED: 'idle'
            }
          },
          saving: {
            on: {
              SAVE_SUCCEEDED: 'idle',
              SAVE_FAILED: 'idle'
            }
          },
          canceling: {
            on: {
              '': '#editPage.left'
            }
          },
        }
      },
      updating: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              LOAD_DATA: 'loading',
              SAVE_ENTITY: 'saving',
              DELETE_ENTITY: 'deleting',
            }
          },
          loading: {
            on: {
              LOAD_SUCCEEDED: 'idle',
              LOAD_FAILED: 'idle'
            }
          },
          saving: {
            on: {
              SAVE_SUCCEEDED: 'idle',
              SAVE_FAILED: 'idle'
            }
          },
          deleting: {
            on: {
              DELETE_SUCCEEDED: '#editPage.left',
              DELETE_FAILED: 'idle'
            }
          },
        }
      },
      left: {
        type: 'final'
      }
    }
  });