pagination

src/pages/blog/BlogList.tsx

@@ -10,11 +10,13 @@ import { useGetBlogs, useDeleteBlog } from './hooks/useBlogData'
 import { BlogItemType } from './types/BlogTypes'
 import moment from 'moment-jalaali'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
+import Pagination from '../../components/Pagination'
 const BlogList: FC = () => {
 
     const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
     const [search, setSearch] = useState<string>('')
-    const getBlogs = useGetBlogs(search);
+    const getBlogs = useGetBlogs(search, page);
     const deleteBlog = useDeleteBlog()
 
     return (
@@ -154,6 +156,12 @@ const BlogList: FC = () => {
                         }
                     </tbody>
                 </table>
+
+                <Pagination
+                    currentPage={page}
+                    onPageChange={setPage}
+                    totalPages={getBlogs.data?.data?.pager?.totalPages}
+                />
             </div>
         </div>
     )

src/pages/blog/hooks/useBlogData.ts

@@ -39,10 +39,10 @@ export const useGetBlogCategoryDetail = (
   });
 };
 
-export const useGetBlogs = (search: string) => {
+export const useGetBlogs = (search: string, page: number) => {
   return useQuery({
-    queryKey: ["blogs", search],
+    queryKey: ["blogs", search, page],
-    queryFn: () => api.getBlogs(search),
+    queryFn: () => api.getBlogs(search, page),
   });
 };
 

src/pages/blog/service/BlogService.ts

@@ -29,8 +29,8 @@ export const getBlogCategoryDetail = async (id: string) => {
   return data;
 };
 
-export const getBlogs = async (search: string) => {
+export const getBlogs = async (search: string, page: number) => {
-  const { data } = await axios.get(`/blogs/list?q=${search}`);
+  const { data } = await axios.get(`/blogs/list?q=${search}&page=${page}`);
   return data;
 };
 

src/pages/customer/List.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { Add, Eye } from 'iconsax-react'
@@ -10,11 +10,13 @@ import { Pages } from '../../config/Pages'
 import { useGetCustomers } from './hooks/useCustomerData'
 import PageLoading from '../../components/PageLoading'
 import { CustomerItemType } from './types/CustomerTypes'
+import Pagination from '../../components/Pagination'
 
 const CustomerList: FC = () => {
 
     const { t } = useTranslation('global')
-    const getCustomers = useGetCustomers()
+    const [page, setPage] = useState(1)
+    const getCustomers = useGetCustomers(page)
 
     return (
         <div className='mt-4'>
@@ -117,6 +119,12 @@ const CustomerList: FC = () => {
 
                             </tbody>
                         </table>
+
+                        <Pagination
+                            totalPages={getCustomers.data?.data?.pager?.totalPages}
+                            currentPage={page}
+                            onPageChange={setPage}
+                        />
                     </div>
             }
         </div>

src/pages/customer/hooks/useCustomerData.ts

@@ -2,10 +2,10 @@ import * as api from "../service/CustomerService";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const useGetCustomers = () => {
+export const useGetCustomers = (page: number) => {
   return useQuery({
-    queryKey: ["customers"],
+    queryKey: ["customers", page],
-    queryFn: () => api.getCustomers(),
+    queryFn: () => api.getCustomers(page),
   });
 };
 

src/pages/customer/service/CustomerService.ts

@@ -1,8 +1,8 @@
 import axios from "../../../config/axios";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const getCustomers = async () => {
+export const getCustomers = async (page: number) => {
-  const { data } = await axios.get(`/users/customers`);
+  const { data } = await axios.get(`/users/customers?page=${page}`);
   return data;
 };
 

src/pages/learning/List.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
@@ -8,11 +8,12 @@ import { useGetLearning } from './hooks/useLearningData'
 import PageLoading from '../../components/PageLoading'
 import Td from '../../components/Td'
 import { LearningItemType } from './types/LearningTypes'
-
+import Pagination from '../../components/Pagination'
 const LearningList: FC = () => {
 
     const { t } = useTranslation('global')
-    const getLearning = useGetLearning()
+    const [page, setPage] = useState<number>(1)
+    const getLearning = useGetLearning(page)
 
     return (
         <div className='mt-4'>
@@ -72,6 +73,11 @@ const LearningList: FC = () => {
                     </div>
             }
 
+            <Pagination
+                currentPage={page}
+                onPageChange={setPage}
+                totalPages={getLearning.data?.data?.pager?.totalPages}
+            />
         </div>
     )
 }

src/pages/learning/hooks/useLearningData.ts

@@ -26,9 +26,9 @@ export const useCreateLearning = () => {
   });
 };
 
-export const useGetLearning = () => {
+export const useGetLearning = (page: number) => {
   return useQuery({
-    queryKey: ["learnings"],
+    queryKey: ["learnings", page],
-    queryFn: api.getLearnings,
+    queryFn: () => api.getLearnings(page),
   });
 };

src/pages/learning/service/LearningService.ts

@@ -19,7 +19,7 @@ export const CreateLearning = async (params: CreateLearningType) => {
   return data;
 };
 
-export const getLearnings = async () => {
+export const getLearnings = async (page: number) => {
-  const { data } = await axios.get(`/learnings`);
+  const { data } = await axios.get(`/learnings?page=${page}`);
   return data;
 };

src/pages/receipts/List.tsx

@@ -12,19 +12,20 @@ import Input from '../../components/Input'
 import DatePickerComponent from '../../components/DatePicker'
 import { useSearchParams } from 'react-router-dom'
 import moment from 'moment-jalaali'
-
+import Pagination from '../../components/Pagination'
 type ActiveTabType = "PENDING" | "WAIT_PAYMENT" | "PAID" | "CANCELLED" | "EXPIRED" | ""
 
 const ReceiptsList: FC = () => {
 
     const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
     const [searchParams] = useSearchParams()
     const [activeTab, setActiveTab] = useState<ActiveTabType>('PENDING')
     const [customerId, setCustomerId] = useState<string>('')
     const [search, setSearch] = useState<string>('')
     const [date, setDate] = useState<string>('')
     const [endDate, setEndDate] = useState<string>('')
-    const getInvoices = useGetInvoices(activeTab, customerId, search, date, endDate)
+    const getInvoices = useGetInvoices(activeTab, customerId, search, date, endDate, page)
 
     useEffect(() => {
         const urlCustomerId = searchParams.get('user')
@@ -165,6 +166,12 @@ const ReceiptsList: FC = () => {
 
                             </tbody>
                         </table>
+
+                        <Pagination
+                            totalPages={getInvoices.data?.data?.pager?.totalPages}
+                            currentPage={page}
+                            onPageChange={setPage}
+                        />
                     </div>
             }
         </div>

src/pages/receipts/hooks/useReceiptData.ts

@@ -7,11 +7,13 @@ export const useGetInvoices = (
   customerId: string,
   search: string,
   date: string,
-  endDate: string
+  endDate: string,
+  page: number
 ) => {
   return useQuery({
-    queryKey: ["invoices", status, customerId, search, date, endDate],
+    queryKey: ["invoices", status, customerId, search, date, endDate, page],
-    queryFn: () => api.getInvoces(status, customerId, search, date, endDate),
+    queryFn: () =>
+      api.getInvoces(status, customerId, search, date, endDate, page),
   });
 };
 

src/pages/receipts/service/ReceiptService.ts

@@ -6,7 +6,8 @@ export const getInvoces = async (
   customerId: string,
   search: string,
   date: string,
-  endDate: string
+  endDate: string,
+  page: number
 ) => {
   const params = new URLSearchParams();
   if (status) params.append("status", status);
@@ -14,6 +15,7 @@ export const getInvoces = async (
   if (search) params.append("q", search);
   if (date) params.append("since", date);
   if (endDate) params.append("to", endDate);
+  if (page) params.append("page", page.toString());
   const query = params.toString();
   const { data } = await axios.get(`/invoices?${query}`);
   return data;

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],
+    queryKey: ["tickets", status, customerId, page],
-    queryFn: () => api.getTickets(status, customerId),
+    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;

src/pages/users/List.tsx

@@ -11,11 +11,12 @@ import { UserItemType } from './types/UserTypes'
 import PageLoading from '../../components/PageLoading'
 import { toast } from 'react-toastify'
 import { ErrorType } from '../../helpers/types'
-
+import Pagination from '../../components/Pagination'
 const UsersList: FC = () => {
 
     const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
     const [search, setSearch] = useState<string>('')
     const getUsers = useGetUsers(search)
     const deleteUser = useDeleteUser()
@@ -117,6 +118,12 @@ const UsersList: FC = () => {
                                 }
                             </tbody>
                         </table>
+
+                        <Pagination
+                            totalPages={getUsers.data?.data?.pager?.totalPages}
+                            currentPage={page}
+                            onPageChange={setPage}
+                        />
                     </div>
             }
         </div>