refactor(FE): Refactor formik field updates to use destructured methods

This commit is contained in:
rstubryan
2026-03-05 09:54:50 +07:00
parent 4de21561b3
commit 807041834b
@@ -279,6 +279,8 @@ const UniformityForm = ({
}, },
}); });
const { setFieldValue, setFieldTouched } = formik;
const handleValidateForm = async () => { const handleValidateForm = async () => {
const errors = await formik.validateForm(); const errors = await formik.validateForm();
@@ -301,10 +303,10 @@ const UniformityForm = ({
const location = val as OptionType | null; const location = val as OptionType | null;
const locationId = Number(location?.value); const locationId = Number(location?.value);
formik.setFieldTouched('location', true); setFieldTouched('location', true);
formik.setFieldValue('location', location); setFieldValue('location', location);
formik.setFieldTouched('location_id', true); setFieldTouched('location_id', true);
formik.setFieldValue('location_id', locationId); setFieldValue('location_id', locationId);
setSelectedLocation(location); setSelectedLocation(location);
setSelectedProjectFlock(null); setSelectedProjectFlock(null);
@@ -312,7 +314,7 @@ const UniformityForm = ({
location ? location.value.toString() : '' location ? location.value.toString() : ''
); );
}, },
[] [setFieldTouched, setFieldValue]
); );
const handleProjectFlockChange = useCallback( const handleProjectFlockChange = useCallback(
@@ -320,14 +322,14 @@ const UniformityForm = ({
const projectFlock = val as OptionType | null; const projectFlock = val as OptionType | null;
const projectFlockId = Number(projectFlock?.value); const projectFlockId = Number(projectFlock?.value);
formik.setFieldTouched('project_flock', true); setFieldTouched('project_flock', true);
formik.setFieldValue('project_flock', projectFlock); setFieldValue('project_flock', projectFlock);
formik.setFieldTouched('project_flock_id', true); setFieldTouched('project_flock_id', true);
formik.setFieldValue('project_flock_id', projectFlockId); setFieldValue('project_flock_id', projectFlockId);
setSelectedProjectFlock(projectFlock); setSelectedProjectFlock(projectFlock);
}, },
[] [setFieldTouched, setFieldValue]
); );
const handleKandangChange = useCallback( const handleKandangChange = useCallback(
@@ -335,24 +337,24 @@ const UniformityForm = ({
const kandang = val as OptionType | null; const kandang = val as OptionType | null;
const kandangId = Number(kandang?.value); const kandangId = Number(kandang?.value);
formik.setFieldTouched('kandang', true); setFieldTouched('kandang', true);
formik.setFieldValue('kandang', kandang); setFieldValue('kandang', kandang);
formik.setFieldTouched('kandang_id', true); setFieldTouched('kandang_id', true);
formik.setFieldValue('kandang_id', kandangId); setFieldValue('kandang_id', kandangId);
setSelectedKandang(kandang); setSelectedKandang(kandang);
}, },
[] [setFieldTouched, setFieldValue]
); );
const handleFileChange = useCallback( const handleFileChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => { (e: React.ChangeEvent<HTMLInputElement>) => {
const document = e.target.files?.[0]; const document = e.target.files?.[0];
formik.setFieldTouched('document', true); setFieldTouched('document', true);
if (!document) { if (!document) {
formik.setFieldValue('document', undefined); setFieldValue('document', undefined);
return; return;
} }
@@ -372,24 +374,24 @@ const UniformityForm = ({
return; return;
} }
formik.setFieldValue('document', document); setFieldValue('document', document);
}, },
[] [setFieldTouched, setFieldValue]
); );
const handleDateChange = useCallback( const handleDateChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => { (e: React.ChangeEvent<HTMLInputElement>) => {
formik.setFieldValue('date', e.target.value); setFieldValue('date', e.target.value);
}, },
[] [setFieldValue]
); );
const handleRemoveFile = useCallback(() => { const handleRemoveFile = useCallback(() => {
formik.setFieldValue('document', undefined); setFieldValue('document', undefined);
if (fileInputRef.current) { if (fileInputRef.current) {
fileInputRef.current.value = ''; fileInputRef.current.value = '';
} }
}, [formik]); }, [setFieldValue]);
const handleDownloadTemplate = useCallback(() => { const handleDownloadTemplate = useCallback(() => {
const population = projectFlockKandangLookup?.population; const population = projectFlockKandangLookup?.population;
@@ -442,9 +444,9 @@ const UniformityForm = ({
const weeksDiff = Math.floor(daysDiff / 7); const weeksDiff = Math.floor(daysDiff / 7);
formik.setFieldValue('week', initialWeek + weeksDiff); setFieldValue('week', initialWeek + weeksDiff);
} else { } else {
formik.setFieldValue('week', initialWeek); setFieldValue('week', initialWeek);
} }
} }
}, [ }, [
@@ -452,6 +454,7 @@ const UniformityForm = ({
projectFlockKandangLookup?.project_flock_kandang_id, projectFlockKandangLookup?.project_flock_kandang_id,
recordingsData, recordingsData,
formik.values.date, formik.values.date,
setFieldValue,
]); ]);
useEffect(() => { useEffect(() => {