export default function TransferSpeedUp()

in s3-artifact-storage-ui/src/App/S3/TransferSpeedUp/TransferSpeedUp.tsx [45:135]
83 lines of code
10 McCabe index (conditional complexity)

export default function TransferSpeedUp() {
  const { watch, setValue } = useFormContext<IFormInput>();
  const config = useAppContext();

  const currentBucket = watch(FormFields.S3_BUCKET_NAME);
  const isBucketSelected = !!currentBucket;

  const speedUpOptions: SwitcherOption[] = [
    { key: 0, label: 'None' },
    { key: 1, label: 'AWS CloudFront', disabled: !isBucketSelected },
  ];

  const s3TransferAccelerationAvailable =
    watch(FormFields.S3_TRANSFER_ACCELERATION_AVAILABLE) ?? false;

  if (config.transferAccelerationOn) {
    speedUpOptions.push({
      key: 2,
      label: 'S3 Transfer Acceleration',
      disabled: !s3TransferAccelerationAvailable || !isBucketSelected,
      title: s3TransferAccelerationAvailable
        ? undefined
        : 'S3 Transfer Acceleration is not available on selected bucket.',
    });
  }

  const cloudFrontAcceleration = watch(FormFields.CLOUD_FRONT_TOGGLE);
  const s3TransferAcceleration = watch(
    FormFields.CONNECTION_TRANSFER_ACCELERATION_TOGGLE
  );
  const currentActive = useMemo(() => {
    if (cloudFrontAcceleration) return 1;
    else if (s3TransferAcceleration) return 2;
    else return 0;
  }, [cloudFrontAcceleration, s3TransferAcceleration]);

  const handleTypeChange = useCallback(
    (option: Option<number>) => {
      if (option.key === 0) {
        setValue(FormFields.CLOUD_FRONT_TOGGLE, false, {
          shouldDirty: true,
          shouldTouch: true,
        });
        setValue(FormFields.CONNECTION_TRANSFER_ACCELERATION_TOGGLE, false, {
          shouldDirty: true,
          shouldTouch: true,
        });
      } else if (option.key === 1) {
        setValue(FormFields.CLOUD_FRONT_TOGGLE, true, {
          shouldDirty: true,
          shouldTouch: true,
        });
        setValue(FormFields.CONNECTION_TRANSFER_ACCELERATION_TOGGLE, false, {
          shouldDirty: true,
          shouldTouch: true,
        });
      } else if (option.key === 2) {
        setValue(FormFields.CLOUD_FRONT_TOGGLE, false, {
          shouldDirty: true,
          shouldTouch: true,
        });
        setValue(FormFields.CONNECTION_TRANSFER_ACCELERATION_TOGGLE, true, {
          shouldDirty: true,
          shouldTouch: true,
        });
      }
    },
    [setValue]
  );

  const style = [labelStyles.secondaryLabel, labelStyles.label].join(' ');

  return (
    <section>
      <SectionHeader>{'Transfer speed-up'}</SectionHeader>
      <div>
        <span className={style}>{'Type'}</span>
        <Switcher
          options={speedUpOptions}
          active={currentActive}
          onClick={handleTypeChange}
        />
      </div>
      {currentActive === 1 && (
        <CloudFrontDistributionsContextProvider>
          <CloudFrontLoaderWrapper />
        </CloudFrontDistributionsContextProvider>
      )}
    </section>
  );
}