refactor(FE): Refactor date filter state management in UniformityTable

This commit is contained in:
rstubryan
2026-03-05 14:11:58 +07:00
parent 4b49cd18f5
commit 5dac900a1a
2 changed files with 34 additions and 6 deletions
@@ -249,6 +249,10 @@ const UniformityTable = () => {
const [isSubmitted, setIsSubmitted] = useState(false);
// ===== FILTER STATE =====
const [filterDateValues, setFilterDateValues] = useState({
start_date: tableFilterState.start_date,
end_date: tableFilterState.end_date,
});
const [filterLocation, setFilterLocation] = useState<OptionType | null>(null);
const [filterProjectFlock, setFilterProjectFlock] =
useState<OptionType | null>(null);
@@ -343,8 +347,8 @@ const UniformityTable = () => {
// ===== FORMIK FILTER =====
const filterFormik = useFormik<UniformityTableFilterValues>({
initialValues: {
start_date: tableFilterState.start_date,
end_date: tableFilterState.end_date,
start_date: filterDateValues.start_date,
end_date: filterDateValues.end_date,
location: filterLocation,
project_flock: filterProjectFlock,
project_flock_kandang_id: filterProjectFlockKandangId,
@@ -381,6 +385,13 @@ const UniformityTable = () => {
const { formErrorList, close, handleFormSubmit } =
useFormikErrorList(filterFormik);
useEffect(() => {
setFilterDateValues({
start_date: tableFilterState.start_date,
end_date: tableFilterState.end_date,
});
}, [tableFilterState.start_date, tableFilterState.end_date]);
// ===== BUILD SWR KEY WITH FILTERS =====
const uniformitySwrKey = useMemo(() => {
const basePath = UniformityApi.basePath;
@@ -494,6 +505,7 @@ const UniformityTable = () => {
setFilterKandang(null);
setFilterProjectFlockKandangId(undefined);
setFilterErrors({});
setFilterDateValues({ start_date: '', end_date: '' });
updateFilter('start_date', '');
updateFilter('end_date', '');
@@ -1293,7 +1305,7 @@ const UniformityTable = () => {
<div className='flex flex-col p-4 gap-1.5'>
{/* Rentang Waktu */}
<div>
<label className='flex text-xs items-center gap-2 py-2 font-semibold'>
<label className='flex text-xs items-center gap-1 py-2 font-semibold after:content-["*"] after:text-red-500'>
Tanggal
</label>
<div className='flex items-center gap-2'>
@@ -1305,6 +1317,10 @@ const UniformityTable = () => {
onChange={(e) => {
const value = e.target.value;
filterFormik.setFieldValue('start_date', value);
setFilterDateValues((prev) => ({
...prev,
start_date: value,
}));
if (value && filterFormik.values.end_date) {
const startDate = new Date(value);
@@ -1348,6 +1364,10 @@ const UniformityTable = () => {
onChange={(e) => {
const value = e.target.value;
filterFormik.setFieldValue('end_date', value);
setFilterDateValues((prev) => ({
...prev,
end_date: value,
}));
if (value && filterFormik.values.start_date) {
const startDateObj = new Date(
@@ -99,14 +99,22 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
setExpandedDrawerOpen(true);
}, 0);
}
}, [shouldFetchDetails, uniformity_details, hasFetchedDetails]);
}, [
shouldFetchDetails,
uniformity_details,
hasFetchedDetails,
setExpandedDrawerContent,
setExpandedDrawerOpen,
initialValues.info_umum,
initialValues.id,
]);
useEffect(() => {
return () => {
setExpandedDrawerOpen(false);
setExpandedDrawerContent(null);
};
}, []);
}, [setExpandedDrawerOpen, setExpandedDrawerContent]);
const infoUmumTableData: DetailOptionType[] = useMemo(() => {
if (!initialValues) return [];
@@ -223,7 +231,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
},
},
],
[initialValues]
[initialValues, handleViewUniformityDetails, isLoading]
);
const samplingTableData: DetailOptionType[] = useMemo(() => {