Refactored CabinetMaintenance.jsx to use FormField and FormInput

src/pages/CabinetCreation.jsx

@@ -3,131 +3,109 @@ import { useTranslation } from "react-i18next";
 import FormBox from "../components/FormBox";
 import Button from "../components/Button";
 import { useNavigate } from "react-router-dom";
-import { AnimatePresence, motion } from "motion/react";
+import FieldsWrapper from "../components/FieldsWrapper";
-import clsx from "clsx";
+import FormField from "../components/FormField";
+import FormInput from "../components/FormInput";
+import FormSelect from "../components/FormSelect";
 
 function CabinetCreation() {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const [cabinetId, setCabinetId] = useState({ id: "", valid: true });
+  const [cabinetDetails, setCabinetDetails] = useState({
-  const [cabinetKeyId, setCabinetKeyId] = useState({ id: "", valid: true });
+    cabinetId: "",
-  const [noOfLockers, setNoOfLockers] = useState({ number: 0, valid: true });
+    cabinetIdValid: true,
+    cabinetKeyId: "",
+    cabinetKeyIdValid: true,
+    noOfLockers: 0,
+    noOfLockersValid: true,
+  });
 
   const handleNext = (e) => {
     e.preventDefault();
-    const idRegex = /^[A-Z]{2}[0-9]{4}$/;
+    let isFormValid = true;
-    if (!idRegex.test(cabinetId.id)) {
+    const newValues = {...cabinetDetails};
-      setCabinetId({ id: cabinetId.id, valid: false });
+    formFields.forEach(field => {
-      return;
+      if(field.validate) {
-    } else if (!idRegex.test(cabinetKeyId.id)) {
+        const isFieldValid = field.validate(cabinetDetails[field.name])
-      setCabinetKeyId({ id: cabinetKeyId.id, valid: false });
+        newValues[`${field.name}Valid`] = isFieldValid;
-      return;
+        if(!isFieldValid) isFormValid = false;
-    } else if (noOfLockers.number === 0) {
+      }
-      setNoOfLockers({ number: noOfLockers.number, valid: false });
+    });
+    
+    if(!isFormValid) {
+      setCabinetDetails(newValues);
       return;
     }
+
     navigate("register-lockers", {
       state: {
-        cabinetId: cabinetId.id,
+        cabinetId: cabinetDetails.cabinetId,
-        cabinetKeyId: cabinetKeyId.id,
+        cabinetKeyId: cabinetDetails.cabinetKeyId,
-        noOfLockers: noOfLockers.number,
+        noOfLockers: parseInt(cabinetDetails.noOfLockers),
       },
     });
   };
+
+  const formFields = [
+    {
+      name: "cabinetId",
+      label: t("cabinetId"),
+      type: "input",
+      maxLength: 6,
+      validate: v => /^\w{2}\d{4}$/.test(v)
+    },
+    {
+      name: "cabinetKeyId",
+      label: t("cabinetKeyId"),
+      type: "input",
+      maxLength: 6,
+      validate: v => /^\w{2}\d{4}$/.test(v)
+    },
+    {
+      name: "noOfLockers",
+      label: t("noOfLockers"),
+      type: "input",
+      subType: "number",
+      validate: v => parseInt(v) > 0
+    },
+  ];
+
+  const renderField = (field) => {
+    const commonProps = {
+      value: cabinetDetails[field.name],
+      onChange: (e) => {
+        const newCabinetDetails = { ...cabinetDetails };
+        newCabinetDetails[field.name] = e.target.value.toUpperCase();
+        newCabinetDetails[`${field.name}Valid`] = true;
+        setCabinetDetails(newCabinetDetails);
+      },
+      maxLength: field.maxLength,
+      type: field.subType,
+    };
+    const valid = cabinetDetails[`${field.name}Valid`];
+
+    return (
+      <FormField key={field.name} label={field.label}>
+        {field.type === "input" ? (
+          <FormInput props={commonProps} valid={valid} />
+        ) : (
+          <FormSelect
+            props={commonProps}
+            valid={valid}
+            options={field.options}
+          />
+        )}
+      </FormField>
+    );
+  };
+
   return (
     <FormBox title={t("cabinetCreation")}>
-      <div className="p-2 pt-7 flex flex-col gap-4">
+      <FieldsWrapper>
-        <div className="flex">
+        {formFields.map(renderField)}
-          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
+      </FieldsWrapper>
-            {t("cabinetId")}
+      <Button text={t('next')} onClick={handleNext} />
-          </label>
-          <div className="w-full">
-            <input
-              value={cabinetId.id}
-              className={clsx(
-                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                !cabinetId.valid && "border-error"
-              )}
-              onChange={(e) =>
-                setCabinetId({
-                  id: e.target.value.toUpperCase(),
-                  valid: true,
-                })
-              }
-              type="text"
-              maxLength={6}
-            />
-            <AnimatePresence initial={false}>
-              {!cabinetId.valid && (
-                <motion.div
-                  className="w-1/5 text-sm text-error ml-3 pt-1"
-                  initial={{ opacity: 0, scale: 0 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0 }}
-                  key="cabinetIdError"
-                >
-                  Invalid Cabinet Id
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-        <div className="flex">
-          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-            {t("cabinetKeyId")}
-          </label>
-          <div className="w-full">
-            <input
-              value={cabinetKeyId.id}
-              className={clsx(
-                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                !cabinetKeyId.valid && "border-error"
-              )}
-              onChange={(e) =>
-                setCabinetKeyId({
-                  id: e.target.value.toUpperCase(),
-                  valid: true,
-                })
-              }
-              type="text"
-              maxLength={6}
-            />
-            {!cabinetKeyId.valid && (
-              <div className="text-sm text-error ml-3 pt-1">Invalid Key Id</div>
-            )}
-          </div>
-        </div>
-        <div className="flex">
-          <label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
-            {t("noOfLockers")}
-          </label>
-          <div className="w-full">
-            <input
-              value={noOfLockers.number}
-              className={clsx(
-                "w-1/5 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 border-grey text-grey focus:outline-grey",
-                !noOfLockers.valid && "border-error"
-              )}
-              onChange={(e) =>
-                setNoOfLockers({ number: e.target.value, valid: true })
-              }
-              type="number"
-            />
-            {!noOfLockers.valid && (
-              <div className="text-sm text-error ml-3 pt-1">
-                Invalid Number of Lockers
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      <Button
-        text={t("next")}
-        onClick={(e) => {
-          handleNext(e);
-        }}
-      />
     </FormBox>
   );
 }

src/pages/CabinetMaintenance.jsx

@@ -3,9 +3,10 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import FormBox from "../components/FormBox";
 import Button from "../components/Button";
-import { motion } from "motion/react";
+import FormInput from "../components/FormInput";
-import clsx from "clsx";
+import FormSelect from "../components/FormSelect";
-import { AnimatePresence } from "motion/react";
+import FieldsWrapper from "../components/FieldsWrapper";
+import FormField from "../components/FormField";
 
 function CabinetMaintenace() {
   const navigate = useNavigate();
@@ -20,47 +21,41 @@ function CabinetMaintenace() {
     navigate(operation.value);
   };
 
+  const formFields = [
+    {
+      name: "value",
+      label: t("operation"),
+      options: [{ label: t("create"), value: "create" }],
+      type: "select",
+    },
+  ];
+
+  const renderField = (field) => {
+    const commonProps = {
+      value: operation[field.name],
+      onChange: (e) => {
+        const newValues = { ...operation };
+        newValues[field.name] = e.target.value;
+        newValues[`${field.name}Valid`] = true;
+        setOperation(newValues);
+      },
+    };
+    const options = field.options;
+    return (
+      <FormField label={field.label}>
+        {field.type === "input" ? (
+          <FormInput props={commonProps} />
+        ) : (
+          <FormSelect props={commonProps} options={options} />
+        )}
+      </FormField>
+    );
+  };
+
   return (
     <div>
       <FormBox title={t("cabinetMaintenance")}>
-        <div className="p-2 pt-7">
+        <FieldsWrapper>{formFields.map(renderField)}</FieldsWrapper>
-          <div className="flex">
-            <label className="mr-4 text-lg text-black dark:text-primary-dark w-[10%]">
-              {t("operation")}
-            </label>
-            <div className="w-full">
-              <select
-                className={clsx(
-                  "w-1/5 h-10 px-2 rounded-full dark:bg-grey dark:text-primary-dark border-2 focus:outline-grey border-grey",
-                  !operation.valid && "border-error"
-                )}
-                onChange={(e) =>
-                  setOperation({ value: e.target.value, valid: true })
-                }
-                defaultValue={operation.value}
-                value={operation.value}
-              >
-                <option value="" disabled>
-                  {t("select")}
-                </option>
-                <option value="create">{t("create")}</option>
-              </select>
-              <AnimatePresence>
-                {!operation.valid && (
-                  <motion.div
-                    className="w-1/5 text-sm text-error ml-3 pt-1"
-                    initial={{ y: 15, opacity: 0 }}
-                    animate={{ y: 0, opacity: 1 }}
-                    exit={{ y: 15, opacity: 0 }}
-                    key="cabinetIdError"
-                  >
-                    Invalid Operation
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          </div>
-        </div>
         <Button text={t("next")} onClick={(e) => handleNext(e)} />
       </FormBox>
     </div>

src/pages/LockersRegistration.jsx

@@ -20,7 +20,7 @@ function LockersRegistration() {
   const noOfLockers = location.state?.noOfLockers;
   const cabinetId = location.state?.cabinetId;
 
-  const initLockers = Array(noOfLockers ? parseInt(noOfLockers) : 0)
+  const initLockers = Array(noOfLockers)
     .fill()
     .map(() => ({
       id: "",
@@ -163,9 +163,9 @@ function LockersRegistration() {
     const valid = lockerValues[`${field.name}Valid`];
 
     return field.type === "input" ? (
-      <FormInput props={commonProps} valid={valid} />
+      <FormInput key={field.name} props={commonProps} valid={valid} />
     ) : (
-      <FormSelect props={commonProps} valid={valid} options={field.options} />
+      <FormSelect key={field.name} props={commonProps} valid={valid} options={field.options} />
     );
   };