function MainFormComponent()

in s3-artifact-storage-ui/src/App/App.tsx [44:163]
112 lines of code
8 McCabe index (conditional complexity)

function MainFormComponent(props: {
  onReset: (option: Option | null) => void;
  onClose: () => void;
}) {
  const config = useAppContext();
  const { handleSubmit, watch, setError, clearErrors } =
    useFormContext<IFormInput>();
  const { showErrorsOnForm, showErrorAlert } = useErrorService({
    setError,
    errorKeyToFieldNameConvertor: errorIdToFieldName,
  });
  const { reload } = useBucketOptions();
  const [isSaving, setIsSaving] = React.useState(false);

  const onSubmit = useCallback(
    async (data: IFormInput, event?: BaseSyntheticEvent) => {
      if (event?.target.id !== formId) {
        return;
      }

      setIsSaving(true);
      clearErrors();
      try {
        // validate bucket
        try {
          const bucketsFromCredentials = await reload();
          const currentlySelectedBucket = data[FormFields.S3_BUCKET_NAME];
          const bucketFound = bucketsFromCredentials.some((bucket) => {
            if (typeof currentlySelectedBucket === 'string') {
              return bucket.key === currentlySelectedBucket;
            } else {
              return bucket.key === currentlySelectedBucket?.key;
            }
          });
          if (!bucketFound) {
            setError(FormFields.S3_BUCKET_NAME, {
              type: 'custom',
              message: 'Bucket not found. Check your S3 credentials.',
            });
            return;
          }
        } catch (e) {
          showErrorAlert(errorMessage(e));
          return;
        }

        const payload = serializeParameters(data, config);
        const parameters = {
          projectId: config.projectId,
          newStorage: config.isNewStorage.toString(),
          [FormFields.STORAGE_TYPE]: data[FormFields.STORAGE_TYPE]!.key,
          [FormFields.STORAGE_ID]: data[FormFields.STORAGE_ID]!,
        };
        const queryComponents = new URLSearchParams(parameters).toString();
        const resp = await post(
          `/admin/storageParams.html?${queryComponents}`,
          payload
        );
        const response = window.$j(resp);
        const errors: ResponseErrors | null =
          displayErrorsFromResponseIfAny(response);
        if (errors) {
          showErrorsOnForm(errors);
        } else {
          props.onClose();
        }
      } finally {
        setIsSaving(false);
      }
    },
    [
      clearErrors,
      config,
      props,
      reload,
      setError,
      showErrorAlert,
      showErrorsOnForm,
    ]
  );

  const currentType = watch(FormFields.STORAGE_TYPE);
  const isS3Compatible = currentType?.key === S3_COMPATIBLE;
  const isAwsS3 = currentType?.key === AWS_S3;
  const isReadOnly = useReadOnlyContext();

  return (
    <form
      className="ring-form"
      onSubmit={handleSubmit(onSubmit)}
      autoComplete="off"
      id={formId}
    >
      <StorageSection onReset={props.onReset} />

      {isS3Compatible && <S3Section />}
      {isAwsS3 && <AwsS3 />}

      <MultipartUploadSection />
      <ProtocolSettings />
      <div className={styles.formControlButtons}>
        <FieldRow>
          <FieldColumn>
            <Button
              disabled={isReadOnly}
              loader={isSaving}
              type="submit"
              primary
            >
              {'Save'}
            </Button>
          </FieldColumn>
          <FieldColumn>
            <Button onClick={props.onClose}>{'Cancel'}</Button>
          </FieldColumn>
        </FieldRow>
      </div>
    </form>
  );
}