customer-dashboard/src/Components/MyFormInputs/index.js

import { Form, Input, InputNumber } from "antd";
import { Constants, myFetch } from "../../utils";
import { useRef } from "react";
import { useTranslation } from "react-i18next";

export function MyUsernameFormInput({ propsFormItem, propsInput }) {
  const { t } = useTranslation();

  return (
    <MyFormInput
      propsFormItem={propsFormItem}
      propsInput={propsInput}
      formItemName="username"
      minLength={Constants.GLOBALS.MIN_USERNAME_LENGTH}
      maxLength={Constants.GLOBALS.MAX_USERNAME_LENGTH}
      label={t("common.username")}
      ruleMessageValueRequired={t("common.inputRules.usernameRequired")}
      ruleMessageValueMinLengthRequired={t(
        "common.inputRules.usernameMinLength",
        {
          minLength: Constants.GLOBALS.MIN_USERNAME_LENGTH,
        }
      )}
      inputPlaceholder={t("common.usernamePlaceholder")}
    />
  );
}

export function MyAccountNameFormInput({
  propsFormItem,
  propsInput,
  disableAccountNameCheck,
  hasFeedback,
}) {
  const { t } = useTranslation();

  return (
    <MyAvailableCheckFormInput
      propsFormItem={propsFormItem}
      propsInput={propsInput}
      hasFeedback={hasFeedback}
      formItemName="accountName"
      minLength={Constants.GLOBALS.MIN_ACCOUNT_NAME_LENGTH}
      maxLength={Constants.GLOBALS.MAX_ACCOUNT_NAME_LENGTH}
      label={t("common.accountName")}
      ruleMessageValueRequired={t("common.inputRules.accountNameRequired")}
      ruleMessageValueMinLengthRequired={t(
        "common.inputRules.accountNameMinLength",
        {
          minLength: Constants.GLOBALS.MIN_ACCOUNT_NAME_LENGTH,
        }
      )}
      ruleMessageValueNotAvailable={t("common.inputRules.accountNameTaken")}
      inputPlaceholder={t("common.accountNamePlaceholder")}
      inputType="text"
      disableAvailableCheck={disableAccountNameCheck}
      fetchUrl="/user/auth/check/accountname"
      fetchParameter="accountName"
      fetchDelay={Constants.DELAY_ACCOUNT_NAME_CHECK}
    />
  );
}

export function MyPasswordFormInput({ propsFormItem, propsInput }) {
  const { t } = useTranslation();

  return (
    <MyFormInput
      propsFormItem={propsFormItem}
      propsInput={propsInput}
      formItemName="password"
      minLength={Constants.GLOBALS.MIN_PASSWORD_LENGTH}
      maxLength={Constants.GLOBALS.MAX_PASSWORD_LENGTH}
      label={t("common.password")}
      ruleMessageValueRequired={t("common.inputRules.passwordRequired")}
      ruleMessageValueMinLengthRequired={t(
        "common.inputRules.passwordMinLength",
        {
          minLength: Constants.GLOBALS.MIN_PASSWORD_LENGTH,
        }
      )}
      inputPlaceholder={t("common.passwordPlaceholder")}
      inputType="password"
    />
  );
}

export function MyCalendarMaxFutureBookingDaysFormInput() {
  const { t } = useTranslation();

  return (
    <MyFormInput
      formItemName="calendarMaxFutureBookingDays"
      minLength={Constants.GLOBALS.MIN_CALENDAR_FUTURE_BOOKING_DAYS}
      maxLength={Constants.GLOBALS.MAX_CALENDAR_FUTURE_BOOKING_DAYS}
      label={t("common.calendarMaxFutureBookingDays")}
      ruleMessageValueRequired={t(
        "common.inputRules.calendarMaxFutureBookingDaysRequired"
      )}
      inputPlaceholder={14}
      inputType="number"
      propsInput={{
        addonAfter: t("common.unit.days"),
      }}
    />
  );
}

export function MyCalendarMinEarliestBookingTimeFormInput() {
  const { t } = useTranslation();

  return (
    <MyFormInput
      formItemName="calendarMinEarliestBookingTime"
      minLength={Constants.GLOBALS.MIN_CALENDAR_EARLIEST_BOOKING_TIME}
      maxLength={Constants.GLOBALS.MAX_CALENDAR_EARLIEST_BOOKING_TIME}
      label={t("common.calendarMinEarliestBookingTime")}
      ruleMessageValueRequired={t(
        "common.inputRules.calendarMinEarliestBookingTimeRequired"
      )}
      inputPlaceholder={15}
      inputType="number"
      propsInput={{
        addonAfter: t("common.unit.minutes"),
      }}
    />
  );
}

export function MyAvailableCheckFormInput({
  propsFormItem,
  propsInput,
  formItemName,
  minLength,
  maxLength,
  label,
  ruleMessageValueRequired,
  ruleMessageValueMinLengthRequired,
  ruleMessageValueNotAvailable,
  inputPlaceholder,
  inputType,
  disableAvailableCheck = false,
  fetchUrl,
  fetchParameter,
  fetchDelay,
  hasFeedback,
}) {
  const delayTimeout = useRef();

  const isValid = (value) => {
    return value.length >= minLength && value.length <= maxLength;
  };

  return (
    <MyFormInput
      propsFormItem={{
        ...propsFormItem,
        hasFeedback: hasFeedback,
      }}
      propsInput={propsInput}
      formItemName={formItemName}
      minLength={minLength}
      maxLength={maxLength}
      label={label}
      ruleMessageValueRequired={ruleMessageValueRequired}
      ruleMessageValueMinLengthRequired={ruleMessageValueMinLengthRequired}
      inputPlaceholder={inputPlaceholder}
      inputType={inputType}
      formItemRules={[
        () => ({
          validator(_, value) {
            if (!value || !isValid(value)) {
              return Promise.reject("");
            }

            if (disableAvailableCheck) {
              return Promise.resolve();
            }

            if (delayTimeout.current) {
              clearTimeout(delayTimeout.current);
            }

            return new Promise((resolve, reject) => {
              delayTimeout.current = setTimeout(() => {
                let body = {};

                body[fetchParameter] = value; // like accountName: value

                myFetch({
                  url: fetchUrl,
                  method: "POST",
                  body: body,
                })
                  .then(() => {
                    resolve();
                  })
                  .catch((errStatus) => {
                    console.log(errStatus);
                    reject(ruleMessageValueNotAvailable);
                  });
              }, fetchDelay);
            });
          },
        }),
      ]}
    />
  );
}

export function MyFormInput({
  propsFormItem,
  propsInput,
  formItemName,
  formItemRules,
  minLength,
  maxLength,
  label,
  ruleMessageValueRequired,
  ruleMessageValueMinLengthRequired,
  inputPlaceholder,
  inputType,
}) {
  const commonProps = {
    ...propsInput,
    placeholder: inputPlaceholder,
  };

  const myFormItemRules = [
    {
      required: true,
      message: ruleMessageValueRequired,
    },
  ];

  if (formItemRules) {
    myFormItemRules.push(...formItemRules);
  }

  if (inputType === "number") {
    commonProps.min = minLength;
    commonProps.max = maxLength;
  } else {
    commonProps.minLength = minLength;
    commonProps.maxLength = maxLength;

    myFormItemRules.push({
      min: minLength,
      message: ruleMessageValueMinLengthRequired,
    });
  }

  const inputComponents = {
    textarea: (
      <Input.TextArea {...commonProps} autoSize={{ minRows: 2, maxRows: 6 }} />
    ),
    number: <InputNumber {...commonProps} />,
    password: <Input.Password {...commonProps} />,
    default: <Input {...commonProps} />,
  };

  return (
    <Form.Item
      {...propsFormItem}
      label={label}
      name={formItemName}
      required
      rules={myFormItemRules}
    >
      {inputComponents[inputType] || inputComponents.default}
    </Form.Item>
  );
}