md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored CabinetCreation.jsx to use FormInput and FromField

Browse Source
This commit is contained in:
Md Asif 2024-12-26 16:29:12 +05:30
parent bd32eb02d6
commit d4fd7601f1
1 changed files with 86 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/pages/CabinetCreation.jsx
View File

@ -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 clsx from "clsx";
import FieldsWrapper from "../components/FieldsWrapper";
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 [cabinetKeyId, setCabinetKeyId] = useState({ id: "", valid: true });
const [noOfLockers, setNoOfLockers] = useState({ number: 0, valid: true });
const [cabinetDetails, setCabinetDetails] = useState({
cabinetId: "",
cabinetIdValid: true,
cabinetKeyId: "",
cabinetKeyIdValid: true,
noOfLockers: 0,
noOfLockersValid: true,
});
const handleNext = (e) => {
e.preventDefault();
const idRegex = /^[A-Z]{2}[0-9]{4}$/;
if (!idRegex.test(cabinetId.id)) {
setCabinetId({ id: cabinetId.id, valid: false });
return;
} else if (!idRegex.test(cabinetKeyId.id)) {
setCabinetKeyId({ id: cabinetKeyId.id, valid: false });
return;
} else if (noOfLockers.number === 0) {
setNoOfLockers({ number: noOfLockers.number, valid: false });
let isFormValid = true;
const newValues = {...cabinetDetails};
formFields.forEach(field => {
if(field.validate) {
const isFieldValid = field.validate(cabinetDetails[field.name])
newValues[`${field.name}Valid`] = isFieldValid;
if(!isFieldValid) isFormValid = false;
}
});
if(!isFormValid) {
setCabinetDetails(newValues);
return;
}
navigate("register-lockers", {
state: {
cabinetId: cabinetId.id,
cabinetKeyId: cabinetKeyId.id,
noOfLockers: noOfLockers.number,
cabinetId: cabinetDetails.cabinetId,
cabinetKeyId: cabinetDetails.cabinetKeyId,
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">
<div className="flex">
<label className="mr-4 text-lg text-black dark:text-primary-dark w-[15%]">
{t("cabinetId")}
</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);
}}
/>
<FieldsWrapper>
{formFields.map(renderField)}
</FieldsWrapper>
<Button text={t('next')} onClick={handleNext} />
</FormBox>
);
}