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 customerListMachine = Machine({
    id:      'Customer Editor',
    initial: 'loadingList',

    states: {
      editMode: {
        entry:   'setDefaultForm',
        id:      'editMode',
        initial: 'editing',
        states:  {
          discarding: {
            invoke: {
              onDone: [
                {
                  cond:   'dataIsCancel',
                  target: 'editing',
                },
                {
                  actions: 'setEmptyCustomer',
                  cond:    'isNew',
                  target:  '#idle',
                },
                {
                  actions: 'resetSelectedCustomer',
                  cond:    'wantedCustomerIsCurrent',
                  target:  '#viewMode',
                },
                {
                  actions: 'setEmptyCustomer',
                  cond:    'discardReasonIsNewCustomer',
                  target:  'editing',
                },
                {
                  cond:   'isDiscardingForAnotherCustomer',
                  target: '#loadingCustomer',
                },
                {
                  actions: 'resetSelectedCustomer',
                  cond:    'discardReasonIsSelectCustomer',
                  target:  '#viewMode',
                },
              ],
              src: 'checkChanges',
            },
          },
          editing: {
            on: {
              DISCARD: {
                actions: 'setDiscardReason',
                target:  'discarding',
              },
              NEW_CUSTOMER: {
                actions: ['setEmptyCustomer', 'setDiscardReason'],
                target:  'discarding',
              },
              SELECT_CUSTOMER: {
                actions: ['setWantedCustomerId', 'setDiscardReason'],
                target:  'discarding',
              },
              SUBMIT: [
                {
                  actions: 'updateCustomer',
                  cond:    'isNotNew',
                  target:  'submitting.updating',
                },
                {
                  actions: 'createCustomer',
                  cond:    'isNew',
                  target:  'submitting.creating',
                },
              ],
              UPDATE_FIELD: {
                actions: 'updateField',
              },
            },

          },
          submitting: {
            states: {
              creating: {
                invoke: {
                  onDone: {
                    actions: 'updateCustomerInList',
                    target:  '#viewMode',
                  },
                  onError: {
                    actions: 'setError',
                    target:  '#editMode.editing',
                  },
                  src: 'createCustomer',
                },
              },
              updating: {
                invoke: {
                  onDone: {
                    actions: 'addCustomerToList',
                    target:  '#viewMode',
                  },
                  onError: {
                    actions: 'setError',
                    target:  '#editMode.editing',
                  },
                  src: 'updateCustomer',
                },
              },
            },
          },
        },
      },
      idle: {
        id: 'idle',
        on: {
          NEW_CUSTOMER: {
            actions: ['setEmptyCustomer', 'setDiscardReason'],
            target:  'editMode.editing',
          },
          SELECT_CUSTOMER: {
            actions: 'setWantedCustomerId',
            target:  'loadingCustomer',
          },
        },
      },
      listError: {
        on: {
          RETRY: 'loadingList',
        },
      },
      loadingCustomer: {
        id:     'loadingCustomer',
        invoke: {
          onDone: {
            actions: 'setSelectedCustomer',
            target:  'viewMode',
          },
          onError: {
            actions: 'setError',
            target:  'idle',
          },
          src: 'getCustomer',
        },
      },
      loadingList: {
        invoke: {
          onDone: {
            actions: 'setCustomerList',
            target:  'idle',
          },
          onError: {
            actions: 'setError',
            target:  'listError',
          },
          src: 'getCustomers',
        },
      },
      viewMode: {
        id: 'viewMode',
        on: {
          EDIT:         'editMode',
          NEW_CUSTOMER: {
            actions: ['setEmptyCustomer', 'setDiscardReason'],
            target:  'editMode.editing',
          },
          SELECT_CUSTOMER: [
            {
              cond:   'customerIsCurrent',
              target: 'viewMode',
            },
            {
              actions: 'setWantedCustomerId',
              cond:    'customerIsNotCurrent',
              target:  'loadingCustomer',
            },
          ],
        },
      },
    },
  },
  {
    guards: {
      isNew: () => true,
      isNotNew: () => true,
      wantedCustomerIsCurrent: () => true,
      wantedCustomerIsNotCurrent: () => true,
      valueIsCancel: () => false,
    }
  });