feat(pagination): implement hybrid pagination across multiple components
- Introduced a new `useHybridPagination` hook to manage pagination logic, enhancing data fetching and navigation. - Updated various components including `useAdminsPresenter`, `useCompanyListPresenter`, `useCustomerListPresenter`, and others to utilize the new pagination hook, improving code consistency and reducing duplication. - Refactored pagination handling in each component to streamline state management and improve user experience during data navigation. - Enhanced search functionality to reset pagination state when new search parameters are applied, ensuring accurate data display.
This commit is contained in:
+13
-22
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
import { apiDefaultParams } from "@/constants/Api_Params";
|
||||
import { useGetNotificationHistoryQuery } from "@/hooks/queries/useNotificationQueries";
|
||||
import { useHybridPagination } from "@/hooks/useHybridPagination";
|
||||
import { useTableSectionRowAnimations } from "@/hooks/useTableSectionRowAnimations";
|
||||
import { deleteEmptyKeys } from "@/utils/shared";
|
||||
import { useIsMutating } from "@tanstack/react-query";
|
||||
@@ -24,7 +25,17 @@ const useNotificationHistoryTablePresenter = () => {
|
||||
const skeletonTbodyRef = useRef<HTMLTableSectionElement>(null);
|
||||
const dataTbodyRef = useRef<HTMLTableSectionElement>(null);
|
||||
|
||||
const { data, isLoading } = useGetNotificationHistoryQuery(params);
|
||||
const { data, isLoading, isError, error } =
|
||||
useGetNotificationHistoryQuery(params);
|
||||
|
||||
const { pagination, handlePaginationChange, buildFirstPageParams } =
|
||||
useHybridPagination({
|
||||
meta: data?.meta,
|
||||
params,
|
||||
setParams,
|
||||
isError,
|
||||
error,
|
||||
});
|
||||
|
||||
useTableSectionRowAnimations(isLoading, data, {
|
||||
tableSectionRef,
|
||||
@@ -64,28 +75,8 @@ const useNotificationHistoryTablePresenter = () => {
|
||||
filterFormReset(newParams);
|
||||
}, [searchParams, filterFormReset]);
|
||||
|
||||
const pagination = useMemo(
|
||||
() => ({
|
||||
currentPage: data?.meta?.page ? data.meta.page - 1 : 0,
|
||||
totalPages: data?.meta?.pages ?? 1,
|
||||
}),
|
||||
[data?.meta?.page, data?.meta?.pages],
|
||||
);
|
||||
|
||||
const handlePaginationChange = useCallback(
|
||||
(e: { selected: number }) => {
|
||||
const limit = data?.meta?.limit ?? 10;
|
||||
setParams((currentParams: Record<string, any>) => ({
|
||||
...currentParams,
|
||||
offset: e.selected * limit,
|
||||
limit,
|
||||
}));
|
||||
},
|
||||
[data?.meta?.limit],
|
||||
);
|
||||
|
||||
const search = (formData: any) => {
|
||||
const newParams = { ...params, ...formData, offset: 0 };
|
||||
const newParams = buildFirstPageParams({ ...params, ...formData });
|
||||
const cleanedParams = deleteEmptyKeys(newParams);
|
||||
const queryString = new URLSearchParams(cleanedParams).toString();
|
||||
router.push(`${pathName}?${queryString}`);
|
||||
|
||||
Reference in New Issue
Block a user