refactor(FE): Refactor Formik field updates to use setFieldValue

This commit is contained in:
rstubryan
2026-03-05 15:00:20 +07:00
parent a5ebc6d1ae
commit 77eae32a3d
2 changed files with 18 additions and 19 deletions
@@ -23,7 +23,6 @@ import RequirePermission from '@/components/helper/RequirePermission';
import PopoverButton from '@/components/popover/PopoverButton'; import PopoverButton from '@/components/popover/PopoverButton';
import PopoverContent from '@/components/popover/PopoverContent'; import PopoverContent from '@/components/popover/PopoverContent';
import SupplierTableSkeleton from '@/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton'; import SupplierTableSkeleton from '@/components/pages/master-data/supplier/skeleton/SupplierTableSkeleton';
import SelectInput from '@/components/input/SelectInput';
import { OptionType } from '@/components/input/SelectInput'; import { OptionType } from '@/components/input/SelectInput';
import ButtonFilter from '@/components/helper/ButtonFilter'; import ButtonFilter from '@/components/helper/ButtonFilter';
@@ -167,6 +166,8 @@ const SuppliersTable = () => {
}, },
}); });
const { setFieldValue } = formik;
// ===== CATEGORY OPTIONS (SAPRONAK or BOP) ===== // ===== CATEGORY OPTIONS (SAPRONAK or BOP) =====
const categoryOptions = useMemo( const categoryOptions = useMemo(
() => [ () => [
@@ -191,9 +192,9 @@ const SuppliersTable = () => {
const option = val as OptionType | null; const option = val as OptionType | null;
const categoryId = option?.value ? String(option.value) : null; const categoryId = option?.value ? String(option.value) : null;
formik.setFieldValue('category_id', categoryId); setFieldValue('category_id', categoryId);
}, },
[formik] [setFieldValue]
); );
const handleFilterFlagChange = useCallback( const handleFilterFlagChange = useCallback(
@@ -206,9 +207,9 @@ const SuppliersTable = () => {
? false ? false
: null; : null;
formik.setFieldValue('flag', boolValue); setFieldValue('flag', boolValue);
}, },
[formik] [setFieldValue]
); );
// ===== FILTER HELPERS ===== // ===== FILTER HELPERS =====
@@ -238,9 +239,9 @@ const SuppliersTable = () => {
if (filterModal.open) { if (filterModal.open) {
const flagBoolValue = const flagBoolValue =
tableFilterState.flagFilter === 'EKSPEDISI' ? true : false; tableFilterState.flagFilter === 'EKSPEDISI' ? true : false;
formik.setFieldValue('flag', flagBoolValue); setFieldValue('flag', flagBoolValue);
} }
}, [filterModal.open, tableFilterState.flagFilter]); }, [filterModal.open, tableFilterState.flagFilter, setFieldValue]);
useEffect(() => { useEffect(() => {
updateFilter('search', searchValue); updateFilter('search', searchValue);
@@ -508,6 +509,7 @@ const SuppliersTable = () => {
options={flagOptions} options={flagOptions}
value={flagValue} value={flagValue}
onChange={handleFilterFlagChange} onChange={handleFilterFlagChange}
isClearable
className={{ wrapper: 'w-full' }} className={{ wrapper: 'w-full' }}
/> />
</div> </div>
@@ -167,29 +167,26 @@ const SupplierForm = ({
}, },
}); });
const { setValues: formikSetValues } = formik; const { setFieldValue } = formik;
// Initialize Formik // Initialize Formik
useEffect(() => { useEffect(() => {
formikSetValues(formikInitialValues); if (formType !== 'add' && initialValues?.hatchery) {
if (formType != 'add') { const hatcheryArrays = initialValues.hatchery.split(',');
const hatcheryArrays = formikInitialValues.hatchery?.split(','); const hatcheryCreatedOptions = hatcheryArrays.map((item) => ({
const hatcheryCreatedOptions = hatcheryArrays?.map((item) => ({
value: item, value: item,
label: item, label: item,
})); }));
setHatcheryOptionValues(hatcheryCreatedOptions ?? []); setHatcheryOptionValues(hatcheryCreatedOptions);
} }
}, [formikSetValues, formikInitialValues, setHatcheryOptionValues]); }, [formType, initialValues?.hatchery]);
useEffect(() => { useEffect(() => {
const commaSeparatedValues = hatcheryOptionsValues const commaSeparatedValues = hatcheryOptionsValues
.map((item) => item.value) .map((item) => item.value)
.join(','); .join(',');
formikSetValues({ setFieldValue('hatchery', commaSeparatedValues);
...formik.values, }, [hatcheryOptionsValues, setFieldValue]);
hatchery: commaSeparatedValues,
});
}, [hatcheryOptionsValues, formikSetValues]);
// Option Handler // Option Handler
const typeChangeHandler = (val: OptionType | OptionType[] | null) => { const typeChangeHandler = (val: OptionType | OptionType[] | null) => {