pagination

src/pages/ticket/TicketList.tsx

@@ -9,14 +9,16 @@ import { useGetTickets } from './hooks/useTicketData'
 import moment from 'moment-jalaali'
 import { TicketItemType } from './types/TicketTypes'
 import OpenTicket from './components/OpenTicket'
+import Pagination from '../../components/Pagination'
 
 const TicketList: FC = () => {
 
     const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
     const [searchParams] = useSearchParams()
     const [customerId, setCustomerId] = useState<string>('')
     const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED' | ''>('PENDING')
-    const getTicket = useGetTickets(activeTab, customerId)
+    const getTicket = useGetTickets(activeTab, customerId, page)
 
     useEffect(() => {
         const urlCustomerId = searchParams.get('user')
@@ -130,6 +132,12 @@ const TicketList: FC = () => {
                         }
                     </tbody>
                 </table>
+
+                <Pagination
+                    currentPage={page}
+                    onPageChange={setPage}
+                    totalPages={getTicket.data?.data?.pager?.totalPages}
+                />
             </div>
         </div>
     )

src/pages/ticket/hooks/useTicketData.ts

@@ -2,10 +2,14 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/TicketServiec";
 import { AddMessageTicketType, CreateCategoryType } from "../types/TicketTypes";
 
-export const useGetTickets = (status: string, customerId?: string) => {
+export const useGetTickets = (
+  status: string,
+  customerId?: string,
+  page?: number
+) => {
   return useQuery({
-    queryKey: ["tickets", status, customerId],
-    queryFn: () => api.getTickets(status, customerId),
+    queryKey: ["tickets", status, customerId, page],
+    queryFn: () => api.getTickets(status, customerId, page),
   });
 };
 

src/pages/ticket/service/TicketServiec.ts

@@ -1,10 +1,15 @@
 import axios from "../../../config/axios";
 import { AddMessageTicketType, CreateCategoryType } from "../types/TicketTypes";
 
-export const getTickets = async (status: string, customerId?: string) => {
+export const getTickets = async (
+  status: string,
+  customerId?: string,
+  page?: number
+) => {
   const params = new URLSearchParams();
   if (status) params.append("status", status);
   if (customerId) params.append("userId", customerId);
+  if (page) params.append("page", page.toString());
   const query = params.toString();
   const { data } = await axios.get(`/tickets/admin?${query}`);
   return data;