refactor(FE): Fix dependency arrays and refactor setFieldValue usage

This commit is contained in:
rstubryan
2026-03-05 13:36:43 +07:00
parent 4a69eef294
commit a4cb4e202b
2 changed files with 16 additions and 18 deletions
@@ -531,7 +531,7 @@ const RecordingTable = () => {
useEffect(() => {
setTableState('recording-table', pathname);
}, [pathname]);
}, [pathname, setTableState]);
const searchChangeHandler = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -1118,14 +1118,11 @@ const RecordingTable = () => {
},
],
[
isRecordingApproved,
tableFilterState.pageSize,
tableFilterState.page,
selectedRecording,
singleDeleteModal,
approveModal,
rejectModal,
rowSelection,
setRowSelection,
setApprovalNotes,
setSelectedRecording,
@@ -1007,6 +1007,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
});
// ===== HELPER FUNCTIONS =====
const { setFieldValue } = formik;
const getAvailableStock = useCallback(
(productWarehouseId: number) => {
if ((type as 'add' | 'edit' | 'detail') === 'detail') return 0;
@@ -1098,16 +1100,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
const isAlreadyRecorded = recordedProjectFlockKandangIds.has(
projectFlockKandangLookup.project_flock_kandang_id
);
let color: 'neutral' | 'success' | 'warning' | 'error';
if (isAlreadyRecorded) {
color = 'warning';
} else {
color = 'success';
}
const color = isAlreadyRecorded ? 'warning' : 'success';
return (
<span className={'whitespace-nowrap text-xs'}>
<span className={`whitespace-nowrap text-xs text-${color}`}>
Periode {projectFlockKandangLookup.project_flock?.period}
</span>
);
@@ -1411,9 +1407,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
}
if (formik.values.project_flock_kandang_id !== projectFlockKandangId) {
formik.setFieldValue('project_flock_kandang_id', projectFlockKandangId);
setFieldValue('project_flock_kandang_id', projectFlockKandangId);
formik.setFieldValue('project_flock_kandang', {
setFieldValue('project_flock_kandang', {
value: projectFlockKandangId,
label: projectFlockKandangLookup
? `${projectFlockKandangLookup.project_flock.flock_name} - ${projectFlockKandangLookup.kandang.name}`
@@ -1431,6 +1427,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
nextDayRecording,
existingRecordings,
today,
currentRecordDate,
duplicateErrorShown,
setFieldValue,
]);
useEffect(() => {
@@ -1472,11 +1471,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
formik.values.project_flock_kandang_id !==
projectFlockKandangDetail.id
) {
formik.setFieldValue(
setFieldValue(
'project_flock_kandang_id',
projectFlockKandangDetail.id
);
formik.setFieldValue('project_flock_kandang', {
setFieldValue('project_flock_kandang', {
value: projectFlockKandangDetail.id,
label: `${projectFlock.flock_name} - ${kandang.name}`,
});
@@ -1490,6 +1489,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
type,
enhancedProjectFlockOptions,
formik.values.project_flock_kandang_id,
setFieldValue,
]);
const approveHandler = async (notes: string) => {
@@ -1653,10 +1653,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
if (isLayingCategory && (type as 'add' | 'edit' | 'detail') !== 'detail') {
const layingValues = formik.values as RecordingLayingFormValues;
if (!layingValues.eggs || layingValues.eggs.length === 0) {
formik.setFieldValue('eggs', [{ product_warehouse_id: 0, qty: '' }]);
setFieldValue('eggs', [{ product_warehouse_id: 0, qty: '' }]);
}
}
}, [isLayingCategory, type]);
}, [isLayingCategory, type, formik.values, setFieldValue]);
useEffect(() => {
if (type !== 'add') {
@@ -3199,6 +3199,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
pageSize={100}
className={{
tableWrapperClassName: 'overflow-x-auto',
containerClassName: 'mb-6!',
tableClassName: 'w-full table-auto text-sm',
headerRowClassName: 'border-b border-b-gray-200',
headerColumnClassName: