function EditProfileForm()

in src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/panels/SettingsPanelEditProfile/EditProfileForm.tsx [168:318]
142 lines of code
6 McCabe index (conditional complexity)

function EditProfileForm(props: {
  actions: {
    onHandleUpdateProfileData: typeof onHandleUpdateProfileData;
  };
  profileData: OnerepProfileRow;
}) {
  const l10n = useL10n();
  const [profileFormData, setProfileFormData] = useState(props.profileData);
  const [updatingForm, setUpdatingForm] = useState(false);
  const formRef = useRef<HTMLFormElement>(null);
  const hasProfileDataChanged = !isEqual(props.profileData, profileFormData);
  const profileFormDataValidated = validateProfileFormData(profileFormData);

  const handleOnInputChange = ({
    key,
    value,
    index,
  }: EditProfileInputOnChangeReturnValue) => {
    if (typeof index === "undefined") {
      setProfileFormData({
        ...profileFormData,
        [key]: value,
      });
    } else {
      const formDataUpdated = {
        ...profileFormData,
        [key]: [...profileFormData[key as ProfileDataListKey]],
      };
      const [city, state, _countryCode] = value.split(", ");
      formDataUpdated[key as ProfileDataListKey][index] =
        // This line show as not covered even though there are unit tests for updating
        // the LocationAutocompleteInput in the test file `SettingsPageRedesign.test.tsx`.
        /* c8 ignore next */
        key === "addresses" ? { city, state } : value;

      setProfileFormData(formDataUpdated);
    }
  };

  const handleOnAdd = (profileDataKey: ProfileDataListKey) => {
    const formDataUpdated = {
      ...profileFormData,
      [profileDataKey]: [...profileFormData[profileDataKey], ""],
    };
    setProfileFormData(formDataUpdated);
  };

  const handleOnRemove = (
    profileDataKey: ProfileDataListKey,
    itemIndex: number,
  ) => {
    const formDataUpdated = {
      ...profileFormData,
      [profileDataKey]: profileFormData[profileDataKey].filter(
        (_, filteIndex) => itemIndex !== filteIndex,
      ),
    };
    setProfileFormData(formDataUpdated);
  };

  const handleSubmitForm = async (event: FormEvent) => {
    event.preventDefault();
    setUpdatingForm(true);
    const result =
      await props.actions.onHandleUpdateProfileData(profileFormData);
    if (!result.success) {
      toast.error(
        l10n.getString(
          "settings-edit-profile-info-form-error-submission-failed",
        ),
        { autoClose: 15000 },
      );
      captureException(result.error);
    }
    setUpdatingForm(false);
  };

  return (
    <form
      ref={formRef}
      className={styles.profileForm}
      onSubmit={handleSubmitForm}
    >
      {profileFields.map((profileDataKey, detailIndex) => {
        const label = l10n.getString(
          `settings-edit-profile-info-form-fieldset-label-${profileDataKey.replaceAll("_", "-")}`,
        );
        return (
          <Fragment key={profileDataKey}>
            <fieldset className="noList" disabled={updatingForm}>
              <legend>
                <span>{label}</span>
              </legend>
              <div className={styles.formInputs}>
                <EditProfileFormInputs
                  profileData={profileFormDataValidated.data}
                  profileDataKey={profileDataKey}
                  handleOnInputChange={handleOnInputChange}
                  onAdd={handleOnAdd}
                  onRemove={handleOnRemove}
                />
              </div>
            </fieldset>
            {detailIndex < Object.keys(profileFormData).length - 1 && <hr />}
          </Fragment>
        );
      })}
      <div className={styles.profileFormButtons}>
        {hasProfileDataChanged ? (
          <EditProfileCancelDialog
            isSaving={updatingForm}
            onSave={() => {
              formRef.current?.requestSubmit();
            }}
          />
        ) : (
          <TelemetryButton
            variant="secondary"
            href="/user/settings/edit-info"
            event={{
              module: "button",
              name: "click",
              data: {
                button_id: "settings_edit_profile_form_cancel",
              },
            }}
          >
            {l10n.getString(
              "settings-edit-profile-info-form-cancel-button-label",
            )}
          </TelemetryButton>
        )}
        <TelemetryButton
          type="submit"
          variant="primary"
          isLoading={updatingForm}
          disabled={!profileFormDataValidated.isValid || !hasProfileDataChanged}
          event={{
            module: "ctaButton",
            name: "click",
            data: {
              button_id: "settings_edit_profile_form_submitted",
            },
          }}
        >
          {l10n.getString("settings-edit-profile-info-form-save-button-label")}
        </TelemetryButton>
      </div>
    </form>
  );
}