From cad29d587c3fd0a1995a2a5cc490d2df552f9f23 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Mon, 12 May 2025 11:43:48 +0330 Subject: [PATCH] pagination --- src/pages/blog/BlogList.tsx | 10 +++++++++- src/pages/blog/hooks/useBlogData.ts | 6 +++--- src/pages/blog/service/BlogService.ts | 4 ++-- src/pages/customer/List.tsx | 12 ++++++++++-- src/pages/customer/hooks/useCustomerData.ts | 6 +++--- src/pages/customer/service/CustomerService.ts | 4 ++-- src/pages/learning/List.tsx | 12 +++++++++--- src/pages/learning/hooks/useLearningData.ts | 6 +++--- src/pages/learning/service/LearningService.ts | 4 ++-- src/pages/receipts/List.tsx | 11 +++++++++-- src/pages/receipts/hooks/useReceiptData.ts | 8 +++++--- src/pages/receipts/service/ReceiptService.ts | 4 +++- src/pages/ticket/TicketList.tsx | 10 +++++++++- src/pages/ticket/hooks/useTicketData.ts | 10 +++++++--- src/pages/ticket/service/TicketServiec.ts | 7 ++++++- src/pages/users/List.tsx | 9 ++++++++- 16 files changed, 90 insertions(+), 33 deletions(-) diff --git a/src/pages/blog/BlogList.tsx b/src/pages/blog/BlogList.tsx index b4eb33e..cb306a8 100644 --- a/src/pages/blog/BlogList.tsx +++ b/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(1) const [search, setSearch] = useState('') - const getBlogs = useGetBlogs(search); + const getBlogs = useGetBlogs(search, page); const deleteBlog = useDeleteBlog() return ( @@ -154,6 +156,12 @@ const BlogList: FC = () => { } + + ) diff --git a/src/pages/blog/hooks/useBlogData.ts b/src/pages/blog/hooks/useBlogData.ts index 321f8df..e707ce9 100644 --- a/src/pages/blog/hooks/useBlogData.ts +++ b/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], - queryFn: () => api.getBlogs(search), + queryKey: ["blogs", search, page], + queryFn: () => api.getBlogs(search, page), }); }; diff --git a/src/pages/blog/service/BlogService.ts b/src/pages/blog/service/BlogService.ts index f023fca..5ba890e 100644 --- a/src/pages/blog/service/BlogService.ts +++ b/src/pages/blog/service/BlogService.ts @@ -29,8 +29,8 @@ export const getBlogCategoryDetail = async (id: string) => { return data; }; -export const getBlogs = async (search: string) => { - const { data } = await axios.get(`/blogs/list?q=${search}`); +export const getBlogs = async (search: string, page: number) => { + const { data } = await axios.get(`/blogs/list?q=${search}&page=${page}`); return data; }; diff --git a/src/pages/customer/List.tsx b/src/pages/customer/List.tsx index 1149be2..a0a8fc4 100644 --- a/src/pages/customer/List.tsx +++ b/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 (
@@ -117,6 +119,12 @@ const CustomerList: FC = () => { + +
} diff --git a/src/pages/customer/hooks/useCustomerData.ts b/src/pages/customer/hooks/useCustomerData.ts index 2cdec6e..1322d78 100644 --- a/src/pages/customer/hooks/useCustomerData.ts +++ b/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"], - queryFn: () => api.getCustomers(), + queryKey: ["customers", page], + queryFn: () => api.getCustomers(page), }); }; diff --git a/src/pages/customer/service/CustomerService.ts b/src/pages/customer/service/CustomerService.ts index 6b31634..4801ff9 100644 --- a/src/pages/customer/service/CustomerService.ts +++ b/src/pages/customer/service/CustomerService.ts @@ -1,8 +1,8 @@ import axios from "../../../config/axios"; import { CreateCustomerType } from "../types/CustomerTypes"; -export const getCustomers = async () => { - const { data } = await axios.get(`/users/customers`); +export const getCustomers = async (page: number) => { + const { data } = await axios.get(`/users/customers?page=${page}`); return data; }; diff --git a/src/pages/learning/List.tsx b/src/pages/learning/List.tsx index 32ea91b..3048029 100644 --- a/src/pages/learning/List.tsx +++ b/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(1) + const getLearning = useGetLearning(page) return (
@@ -72,6 +73,11 @@ const LearningList: FC = () => {
} + ) } diff --git a/src/pages/learning/hooks/useLearningData.ts b/src/pages/learning/hooks/useLearningData.ts index 334d854..25c8e51 100644 --- a/src/pages/learning/hooks/useLearningData.ts +++ b/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"], - queryFn: api.getLearnings, + queryKey: ["learnings", page], + queryFn: () => api.getLearnings(page), }); }; diff --git a/src/pages/learning/service/LearningService.ts b/src/pages/learning/service/LearningService.ts index 474c5d0..74a7266 100644 --- a/src/pages/learning/service/LearningService.ts +++ b/src/pages/learning/service/LearningService.ts @@ -19,7 +19,7 @@ export const CreateLearning = async (params: CreateLearningType) => { return data; }; -export const getLearnings = async () => { - const { data } = await axios.get(`/learnings`); +export const getLearnings = async (page: number) => { + const { data } = await axios.get(`/learnings?page=${page}`); return data; }; diff --git a/src/pages/receipts/List.tsx b/src/pages/receipts/List.tsx index cea43a0..a3ebe44 100644 --- a/src/pages/receipts/List.tsx +++ b/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(1) const [searchParams] = useSearchParams() const [activeTab, setActiveTab] = useState('PENDING') const [customerId, setCustomerId] = useState('') const [search, setSearch] = useState('') const [date, setDate] = useState('') const [endDate, setEndDate] = useState('') - 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 = () => { + + } diff --git a/src/pages/receipts/hooks/useReceiptData.ts b/src/pages/receipts/hooks/useReceiptData.ts index f146a1d..86bd2fc 100644 --- a/src/pages/receipts/hooks/useReceiptData.ts +++ b/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], - queryFn: () => api.getInvoces(status, customerId, search, date, endDate), + queryKey: ["invoices", status, customerId, search, date, endDate, page], + queryFn: () => + api.getInvoces(status, customerId, search, date, endDate, page), }); }; diff --git a/src/pages/receipts/service/ReceiptService.ts b/src/pages/receipts/service/ReceiptService.ts index 7b53e72..925e7b7 100644 --- a/src/pages/receipts/service/ReceiptService.ts +++ b/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; diff --git a/src/pages/ticket/TicketList.tsx b/src/pages/ticket/TicketList.tsx index 472b771..fcb534d 100644 --- a/src/pages/ticket/TicketList.tsx +++ b/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(1) const [searchParams] = useSearchParams() const [customerId, setCustomerId] = useState('') 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 = () => { } + + ) diff --git a/src/pages/ticket/hooks/useTicketData.ts b/src/pages/ticket/hooks/useTicketData.ts index 39f3d53..3846ec0 100644 --- a/src/pages/ticket/hooks/useTicketData.ts +++ b/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), }); }; diff --git a/src/pages/ticket/service/TicketServiec.ts b/src/pages/ticket/service/TicketServiec.ts index 7bf80cc..88d8213 100644 --- a/src/pages/ticket/service/TicketServiec.ts +++ b/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; diff --git a/src/pages/users/List.tsx b/src/pages/users/List.tsx index 2e71299..4c8ed3a 100644 --- a/src/pages/users/List.tsx +++ b/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(1) const [search, setSearch] = useState('') const getUsers = useGetUsers(search) const deleteUser = useDeleteUser() @@ -117,6 +118,12 @@ const UsersList: FC = () => { } + + }