Files
tm_panel/src/components/Tables/inquiries/useInquiriesListPresenter.ts
T
AmirReza Jamali f4a425a6e5 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.
2026-05-17 17:01:28 +03:30

139 lines
3.8 KiB
TypeScript

"use client";
import {
useChangeInquiryStatus,
useDeleteInquiry,
useGetInquiries,
} from "@/hooks/queries/useInquiryQueries";
import { useHybridPagination } from "@/hooks/useHybridPagination";
import { useTableSectionRowAnimations } from "@/hooks/useTableSectionRowAnimations";
import { TInquiries } from "@/lib/api";
import { deleteEmptyKeys } from "@/utils/shared";
import { useIsMutating } from "@tanstack/react-query";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useForm } from "react-hook-form";
const useInquiriesListPresenter = () => {
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [isChangeStatusModalOpen, setIsChangeStatusModalOpen] = useState(false);
const [currentInquiry, setCurrentInquiry] = useState<TInquiries | null>(null);
const [params, setParams] = useState<Record<string, any>>({});
const columns = [
"row",
"company name",
"full name",
"phone number",
"status",
"created at",
"actions",
];
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const isMutating = useIsMutating();
const {
register: filterRegister,
handleSubmit: handleFilterSubmit,
reset: filterFormReset,
watch,
setValue: setFilterValue,
} = useForm();
const tableSectionRef = useRef<HTMLDivElement>(null);
const skeletonTbodyRef = useRef<HTMLTableSectionElement>(null);
const dataTbodyRef = useRef<HTMLTableSectionElement>(null);
useEffect(() => {
const newParams: Record<string, any> = {
offset: 0,
limit: 10,
};
for (const [key, value] of searchParams.entries()) {
newParams[key] = value;
}
setParams(newParams);
filterFormReset(newParams);
}, [searchParams, filterFormReset]);
const { data, isPending, isError, error } = useGetInquiries(params);
const { pagination, handlePaginationChange, buildFirstPageParams } =
useHybridPagination({
meta: data?.meta,
params,
setParams,
isError,
error,
});
useTableSectionRowAnimations(isPending, data, {
tableSectionRef,
skeletonTbodyRef,
dataTbodyRef,
});
const shouldShowPagination =
!isPending && (data?.meta?.pages ?? 1) * (data?.meta?.limit ?? 10) > 10;
const { mutate } = useDeleteInquiry(() => setIsDeleteModalOpen(false));
const { mutate: changeStatus } =
useChangeInquiryStatus(() => setIsChangeStatusModalOpen(false));
const search = (formData: any) => {
const newParams = buildFirstPageParams({ ...params, ...formData });
const cleanedParams = deleteEmptyKeys(newParams);
const queryString = new URLSearchParams(cleanedParams).toString();
router.push(`${pathname}?${queryString}`);
};
const clearAllFilters = useCallback(() => {
router.push(pathname);
}, [pathname, router]);
const deleteInquiry = () => {
if (!currentInquiry?.id) return;
mutate(currentInquiry.id);
};
const handleChangeStatus = (payload: any) => {
if (!currentInquiry?.id) return;
changeStatus({
id: currentInquiry.id,
credentials: payload,
});
};
return {
columns,
inquiries: data?.data.inquiries,
allInquiries: data,
isPending,
isDeleteModalOpen,
setIsDeleteModalOpen,
isChangeStatusModalOpen,
setIsChangeStatusModalOpen,
currentInquiry,
setCurrentInquiry,
deleteInquiry,
handleChangeStatus,
filterRegister,
handleFilterSubmit,
search,
watch,
setFilterValue,
isMutating,
setParams,
shouldShowPagination,
clearAllFilters,
tableSectionRef,
skeletonTbodyRef,
dataTbodyRef,
pagination,
handlePaginationChange,
};
};
export default useInquiriesListPresenter;