refactor(FE): Refactor DashboardProduction callbacks for memoization

This commit is contained in:
rstubryan
2026-03-04 14:12:45 +07:00
parent b786acf71a
commit 7ae04b3f3e
@@ -150,33 +150,39 @@ const DashboardProduction = () => {
}, },
}); });
const { resetForm } = formik;
const handleResetFilter = useCallback(() => { const handleResetFilter = useCallback(() => {
formik.resetForm(); resetForm();
resetFilterValues(); // Clear stored filter values resetFilterValues(); // Clear stored filter values
setAnalysisMode('OVERVIEW'); setAnalysisMode('OVERVIEW');
setEndpointUrl('/dashboards'); setEndpointUrl('/dashboards');
setSelectedLocationIds([]); setSelectedLocationIds([]);
}, [resetFilterValues, filterValues, selectedLocationIds]); }, [resetForm, resetFilterValues]);
const handleApplyFilter = (values: DashboardFilter) => { const handleApplyFilter = useCallback(
// Build query params object, only include non-empty values (values: DashboardFilter) => {
const params: Record<string, string> = {}; // Build query params object, only include non-empty values
const params: Record<string, string> = {};
if (values.start_date) params.start_date = values.start_date; if (values.start_date) params.start_date = values.start_date;
if (values.end_date) params.end_date = values.end_date; if (values.end_date) params.end_date = values.end_date;
if (values.analysis_mode) params.analysis_mode = values.analysis_mode; if (values.analysis_mode) params.analysis_mode = values.analysis_mode;
if (values.location_ids.length > 0) if (values.location_ids.length > 0)
params.location_ids = values.location_ids.toString(); params.location_ids = values.location_ids.toString();
if (values.flock_ids.length > 0) if (values.flock_ids.length > 0)
params.flock_ids = values.flock_ids.toString(); params.flock_ids = values.flock_ids.toString();
if (values.kandang_ids.length > 0) if (values.kandang_ids.length > 0)
params.kandang_ids = values.kandang_ids.toString(); params.kandang_ids = values.kandang_ids.toString();
if (values.comparison_type) params.comparison_type = values.comparison_type; if (values.comparison_type)
params.comparison_type = values.comparison_type;
setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`); setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`);
filterModal.closeModal(); filterModal.closeModal();
refreshDashboardProductionData(); refreshDashboardProductionData();
}; },
[filterModal, refreshDashboardProductionData]
);
// ===== Load filter from store on mount ===== // ===== Load filter from store on mount =====
useEffect(() => { useEffect(() => {
@@ -190,20 +196,20 @@ const DashboardProduction = () => {
kandang_ids: normalizeToArray(filterValues.kandang), kandang_ids: normalizeToArray(filterValues.kandang),
comparison_type: filterValues.comparisonType, comparison_type: filterValues.comparisonType,
}); });
}, [filterValues]); }, [filterValues, handleApplyFilter]);
// ===== Formik Error List ===== // ===== Formik Error List =====
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik); const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
// ===== Export PDF ===== // ===== Export PDF =====
const handleExportPDF = async () => { const handleExportPDF = useCallback(async () => {
await generateDashboardPDF({ await generateDashboardPDF({
filterValues: formik.values, filterValues: formik.values,
allStatsRef, allStatsRef,
allChartsRef, allChartsRef,
setExporting, setExporting,
}); });
}; }, [formik.values]);
// ===== Register Navbar Actions ===== // ===== Register Navbar Actions =====
const openFilterModalRef = useRef(filterModal.openModal); const openFilterModalRef = useRef(filterModal.openModal);
@@ -253,7 +259,7 @@ const DashboardProduction = () => {
</Dropdown> </Dropdown>
</div> </div>
); );
}, [formik.values, exporting, setNavbarActions]); }, [formik.values, exporting, setNavbarActions, handleExportPDF]);
// Cleanup only on unmount // Cleanup only on unmount
useEffect(() => { useEffect(() => {