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

machine.js

// Edit Contact (Machine)
const context = {
  application_config: {
    max_attempts: 5,
    buttons: {
      save: {
        name: 'SAVE',
        display: true,
        disabled: true
      }
    }
  },
  application_data: {
    attempts: 0,
    record: {},
    search_address_input: '',
    search_results: [],
    fields: {
      first_name: {
        id: 'first_name',
        error: false,
        errorText: '',
        label: 'First Name',
        required: true,
        placeholder: 'Enter First Name',
        icon: 'user',
        value: ''
      },
      last_name: {
        id: 'last_name',
        error: false,
        errorText: '',
        label: 'Last Name',
        required: true,
        placeholder: 'Enter Last Name',
        icon: 'user',
        value: ''
      },
      company_name: {
        id: 'company_name',
        error: false,
        errorText: '',
        label: 'Company',
        required: true,
        placeholder: 'Enter Company Name',
        icon: 'building-types',
        value: ''
      },
      title: {
        id: 'title',
        error: false,
        errorText: '',
        label: 'Job Title',
        required: true,
        placeholder: 'Enter Job Title',
        icon: 'jobs',
        value: ''
      },
      address: {
        id: 'address',
        error: false,
        errorText: '',
        label: 'Address',
        required: false,
        placeholder: 'Enter Address',
        icon: '',
        value: ''
      },
      phone_numbers: {
        value: [
          {
            id: 'phone_number',
            error: false,
            errorText: '',
            label: 'Phone Number',
            required: true,
            placeholder: 'Phone Number',
            icon: 'phone',
            phone_number: '',
            is_primary: true
          }
        ]
      },
      emails: {
        value: [
          {
            id: 'email',
            error: false,
            errorText: '',
            label: 'Email',
            required: true,
            placeholder: 'Enter Email',
            icon: 'envelope',
            email: '',
            is_primary: true
          }
        ]
      },
      preferred_contacted: {
        email: {
          id: 'email',
          is_preferred: true
        },
        phone_number: {
          id: 'phone_number',
          is_preferred: true
        }
      }
    }
  },
  params: {
    id: ''
  },
}

const config = {
  id: 'edit-contact',
  initial: 'loading',
  on: {
    COMPONENT_UNMOUNT: 'done'
  },
  states: {
    loading: {
      id: 'loading',
      initial: 'get_application_config',
      states: {
        get_application_config: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'get-application-config',
            src: 'getApplicationConfig'
          },
          on: {
            SUCCESS: {
              actions: ['assignApplicationConfig'],
              target: 'get_application_data'
            },
            ERROR: {
              actions: ['toastGetApplicationConfigErrorMessage'],
              target: '#retry'
            }
          }
        },
        get_application_data: {
          after: {
            REQUEST_TIMEOUT: 'request_timeout'
          },
          invoke: {
            id: 'get-application-data',
            src: 'getApplicationData'
          },
          on: {
            SUCCESS: {
              actions: ['assignApplicationData', 'resetRetry'],
              target: '#ready'
            },
            ERROR: {
              actions: ['toastGetApplicationDataErrorMessage'],
              target: '#retry'
            }
          }
        },
        request_timeout: {
          on: {
            REFRESH: '#loading'
          }
        }
      }
    },
    ready: {
      id: 'ready',
      initial: 'fetch',
      on: {
        REFETCH_RECORD: {
          actions: ['assignRecordId'],
          target: '#fetch'
        }
      },
      states: {
        fetch: {
          id: 'fetch',
          after: {
            REQUEST_TIMEOUT: 'error'
          },
          invoke: {
            id: 'fetch-record',
            src: 'fetchRecord'
          },
          on: {
            SUCCESS: {
              actions: ['assignRecord'],
              target: 'loaded'
            },
            FAILED: {
              actions: ['toastErrorFetchingMessage'],
              target: 'error'
            }
          }
        },
        loaded: {
          type: 'parallel',
          states: {
            contact: {
              on: {
                ADD_FIELD: {
                  actions: ['assignAddNewInputField'],
                  target: '#has_pending_change'
                },
                REMOVE_FIELD: {
                  actions: ['assignRemoveSelectedInputField'],
                  target: '#has_pending_change'
                },
                SELECT_PRIMARY: {
                  actions: ['assignNewPrimary'],
                  target: '#has_pending_change'
                }
              },
              initial: 'no_pending_change',
              states: {
                no_pending_change: {
                  id: 'no_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFields'],
                      target: 'has_pending_change'
                    },
                    SUBMIT: {
                      actions: ['toastNoChangesMadeMessage']
                    }
                  }
                },
                has_pending_change: {
                  id: 'has_pending_change',
                  on: {
                    INPUT_CHANGE: {
                      actions: ['updateFields']
                    },
                    SUBMIT: {
                      target: 'validating'
                    }
                  }
                },
                validating: {
                  id: 'validating',
                  invoke: {
                    id: 'validation',
                    src: 'validation'
                  },
                  on: {
                    VALIDATE_ERROR: {
                      actions: ['assignErrorMessageToFields'],
                      target: 'has_pending_change'
                    },
                    SUCCESS: {
                      actions: ['logSave'],
                      target: 'server_validation'
                    }
                  }
                },
                server_validation: {
                  id: 'server-validation',
                  invoke: {
                    id: 'server-validations',
                    src: 'serverValidations'
                  },
                  on: {
                    SERVER_VALIDATE_ERROR: {
                      actions: ['assignServerValidationErrorMessage'],
                      target: 'has_pending_change'
                    },
                    SUCCESS: {
                      actions: ['logSave'],
                      target: 'submitting'
                    }
                  }
                },
                submitting: {
                  id: 'submitting',
                  after: {
                    REQUEST_TIMEOUT: {
                      actions: ['toastUpdateContactTimeoutMessage'],
                      target: 'has_pending_change'
                    }
                  },
                  invoke: [
                    {
                      id: 'save-record',
                      src: 'saveRecord'
                    }
                  ],
                  on: {
                    SUCCESS: {
                      actions: ['assignRecord'],
                      target: 'submitted'
                    },
                    ERROR: {
                      actions: ['toastUpdateContactErrorMessage'],
                      target: 'has_pending_change'
                    }
                  }
                },
                submitted: {
                  entry: [
                    'toastUpdateContactSuccessMessage',
                    'notifyChangesToListener'
                  ],
                  after: {
                    REQUEST_TIMEOUT: 'no_pending_change'
                  }
                }
              }
            },
            address: {
              id: 'search_mode',
              initial: 'waiting_search_input',
              on: {
                SEARCH_ADDRESS_INPUT: {
                  actions: ['assignSearchAddress'],
                  target: ['#searching', '#has_pending_change']
                }
              },
              states: {
                waiting_search_input: {
                  id: 'waiting_search_input',
                  on: {
                    SELECT_ADDRESS: {
                      actions: ['setAddress'],
                      target: '#has_pending_change'
                    }
                  }
                },
                searched: {
                  on: {
                    SELECT_ADDRESS: {
                      actions: ['setAddress'],
                      target: ['#has_pending_change', 'waiting_search_input']
                    }
                  }
                },
                searching: {
                  id: 'searching',
                  invoke: [
                    {
                      id: 'search-location',
                      src: 'searchLocation'
                    }
                  ],
                  on: {
                    SUCCESS: {
                      actions: ['assignSearchResults'],
                      target: 'searched'
                    },
                    FAILED: {
                      target: 'waiting_search_input'
                    }
                  }
                }
              }
            }
          }
        },
        error: {
          on: {
            REFRESH: 'fetch'
          }
        }
      }
    },
    retry: {
      id: 'retry',
      on: {
        RETRY: [
          {
            cond: 'hasReachedMaxAttempts',
            target: 'error'
          },
          {
            actions: ['incrementRetry'],
            target: 'loading'
          }
        ]
      }
      // always: [
      //   {
      //     cond: 'hasReachedMaxAttempts',
      //     target: 'done'
      //   },
      //   {
      //     actions: ['incrementRetry'],
      //     target: '#loading'
      //   }
      // ]
    },
    timeout: {
      id: 'done',
      type: 'final'
    },
    error: {
      id: 'done',
      type: 'final'
    },
    done: {
      id: 'done',
      type: 'final'
    }
  }
}

const implementations = {
  delays: {
    REQUEST_TIMEOUT: () => 5000
  }
}

Machine(config, implementations)