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 deleting = (destination) => ({
  initial: 'confirmingDeletion',
  states:  {
    confirmingDeletion: {
      entry:  'setAccountToRemove',
      invoke: {
        id:     'confirmDelete',
        onDone: [
          {
            cond:   'deletingIsCanceled',
            target: destination,
          },
          {
            cond:   'deletingIsConfirmed',
            target: 'deleting',
          },
        ],
        onError: {
          actions: 'setError',
          target:  destination,
        },
        src: 'confirmDelete',
      },
    },
    deleting: {
      invoke: {
        id:     'deleteAccount',
        onDone: {
          actions: 'removeAccountFromList',
          target:  destination,
        },
        onError: {
          actions: 'setError',
          target:  destination,
        },
        src: 'deleteAccount',
      },
    },
  },
}
)

 const accountManagerMachine = Machine (
  {
    context: {
      accounts:  [],
      listError: '',
    },
    entry:   'spawnEditor',
    id:      'Account Manager',
    initial: 'loadingList',
    states:  {
      accountError: {
        on: {
          RETRY:          'loadingAccount',
          SELECT_ACCOUNT: {
            actions: 'setAccountToLoad',
            target:  'loadingAccount',
          },
        },
      },
      idle: {
        id:      'idle',
        initial: 'default',
        states:  {
          default: {
            on: {
              DELETE_ACCOUNT: 'deleting',
              NEW_ACCOUNT:    {
                actions: ['sendNewItemToEditor', 'sendEditToEditor'],
                target:  '#withAccount',
              },
              SELECT_ACCOUNT: {
                actions: 'setAccountToLoad',
                target:  '#loadingAccount',
              },
            },
          },
          deleting: deleting ('#idle'),
        },
      },
      listError: {
        on: {
          RETRY: 'loadingList',
        },
      },
      loadingAccount: {
        id:     'loadingAccount',
        invoke: {
          onDone: {
            actions: 'sendSetItemToEditor',
            target:  'withAccount',
          },
          onError: {
            actions: 'setError',
            target:  'accountError',
          },
          src: 'getAccount',
        },
      },
      loadingList: {
        invoke: {
          onDone: {
            actions: 'setList',
            target:  'idle',
          },
          onError: {
            actions: 'setError',
            target:  'listError',
          },
          src: 'getAccounts',
        },
      },
      withAccount: {
        id:      'withAccount',
        initial: 'default',
        states:  {
          confirmingToClearForm: {
            entry: 'sendDiscardToEditor',
            on:    {
              CANCELED:  'default',
              DISCARDED: {
                actions: ['sendNewItemToEditor', 'sendEditToEditor'],
                target:  'default',
              },
            },
          },
          confirmingToLoadAccount: {
            entry: 'sendDiscardToEditor',
            on:    {
              CANCELED:  'default',
              DISCARDED: '#loadingAccount',
            },
          },
          default: {
            on: {
              '*': {
                actions: 'sendToEditor',
              },
              DELETE_ACCOUNT: 'deleting',
              DISCARDED:      [
                {
                  cond:   'isNew',
                  target: '#idle',
                },
              ],
              ITEM_CREATED: {
                actions: 'addAccountToList',
              },
              ITEM_UPDATED: {
                actions: 'updateAccountInList',
              },
              NEW_ACCOUNT: [
                {
                  actions: ['sendNewItemToEditor', 'sendEditToEditor'],
                  cond:    'editorIsInViewMode',
                },
                {
                  target: 'confirmingToClearForm',
                },
              ],
              SELECT_ACCOUNT: [
                {
                  actions: 'setAccountToLoad',
                  cond:    'editorIsInViewMode',
                  target:  '#loadingAccount',
                },
                {
                  actions: 'setAccountToLoad',
                  target:  'confirmingToLoadAccount',
                },
              ],
            },
          },
          deleting: deleting ('#withAccount'),
        },
      },
    },
  })