diff --git a/src/app/blogs/components/BlogList.tsx b/src/app/blogs/components/BlogList.tsx index c825db0..d999484 100644 --- a/src/app/blogs/components/BlogList.tsx +++ b/src/app/blogs/components/BlogList.tsx @@ -1,5 +1,5 @@ 'use client' -import { FC } from 'react' +import { FC, useState } from 'react' import HeroSection from './HeroSection' import Category from './Category' import BigBlogItem from './BigBlogItem' @@ -10,10 +10,12 @@ import { useBlogStore } from '../store/BlogStore' import { useGetAds } from '@/app/ads/hooks/useAdsData' import { AdsDisplayLocation } from '@/app/ads/types/AdsTypes' import Image from 'next/image' +import Pagination from '@/components/Pagination' const BlogList: FC = () => { const { selectedCategory } = useBlogStore() - const { data } = useGetBlogs(selectedCategory) + const [page, setPage] = useState(1) + const { data } = useGetBlogs(selectedCategory, page) const getAds = useGetAds(AdsDisplayLocation.BLOG_PAGE_TOP_RIGHT) const getAdsBottom = useGetAds(AdsDisplayLocation.BLOG_PAGE_BOTTOM_RIGHT) @@ -78,6 +80,19 @@ const BlogList: FC = () => { {data?.data.blogs.map((item) => ( ))} + + { + data?.data.pager && +
+ { + setPage(page) + }} + /> +
+ }
diff --git a/src/app/blogs/components/MostVisited.tsx b/src/app/blogs/components/MostVisited.tsx index 7dbc8f2..03c5442 100644 --- a/src/app/blogs/components/MostVisited.tsx +++ b/src/app/blogs/components/MostVisited.tsx @@ -7,7 +7,7 @@ const MostVisited: FC = () => { return (

- پر بازدیدترین ها + انتخاب سردبیر

diff --git a/src/app/blogs/hooks/useBlogsData.ts b/src/app/blogs/hooks/useBlogsData.ts index d2d9d85..a6ef84c 100644 --- a/src/app/blogs/hooks/useBlogsData.ts +++ b/src/app/blogs/hooks/useBlogsData.ts @@ -3,10 +3,10 @@ import * as api from "../service/BlogService"; import { CreateBlogCommentType } from "../types/BlogTypes"; // برای client -export const useGetBlogs = (categoryId: string) => +export const useGetBlogs = (categoryId: string, page: number) => useQuery({ - queryKey: ["blogs", categoryId], - queryFn: () => api.getBlogs(categoryId), + queryKey: ["blogs", categoryId, page], + queryFn: () => api.getBlogs(categoryId, page), }); export const useGetMostVisitedBlogs = () => @@ -47,8 +47,8 @@ export const useCreateBlogComment = () => // برای server prefetch export const blogsQueryOptions = { - queryKey: ["blogs", ""], - queryFn: () => api.getBlogs(""), + queryKey: ["blogs", "", 1], + queryFn: () => api.getBlogs("", 1), }; export const blogSingleQueryOptions = (id: string) => ({ diff --git a/src/app/blogs/service/BlogService.ts b/src/app/blogs/service/BlogService.ts index 0bda7ec..bb9f6f5 100644 --- a/src/app/blogs/service/BlogService.ts +++ b/src/app/blogs/service/BlogService.ts @@ -7,12 +7,12 @@ import { CreateBlogCommentType, } from "../types/BlogTypes"; -export const getBlogs = async (categoryId: string) => { +export const getBlogs = async (categoryId: string, page: number) => { let query = ""; if (categoryId) { - query = `?categoryId=${categoryId}`; + query = `&categoryId=${categoryId}`; } - const { data } = await axios.get(`/blogs${query}`); + const { data } = await axios.get(`/blogs?page=${page}${query}`); return data; }; diff --git a/src/app/products/service/ProductService.ts b/src/app/products/service/ProductService.ts index 4ceebb4..6d38b4c 100644 --- a/src/app/products/service/ProductService.ts +++ b/src/app/products/service/ProductService.ts @@ -8,9 +8,9 @@ import { } from "../types/ProductTypes"; export const getServicesByCategory = async (categoryId?: string) => { - let query = ``; + let query = `?limit=50`; if (categoryId) { - query = `?categoryId=${categoryId}`; + query = `&categoryId=${categoryId}`; } const { data } = await axios.get( `/danak-services/public${query}` diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx new file mode 100644 index 0000000..e06782c --- /dev/null +++ b/src/components/Pagination.tsx @@ -0,0 +1,100 @@ +'use client' +import React from "react"; + +interface PaginationProps { + currentPage: number; + totalPages: number; + onPageChange: (page: number) => void; +} + +const Pagination: React.FC = ({ + currentPage, + totalPages, + onPageChange, +}) => { + const getPageNumbers = () => { + const pageNumbers: (number | string)[] = []; + const maxVisiblePages = 5; // تعداد حداکثری صفحات قابل مشاهده + + if (totalPages <= maxVisiblePages) { + for (let i = 1; i <= totalPages; i++) { + pageNumbers.push(i); + } + } else { + if (currentPage > 3) { + pageNumbers.push(1); + if (currentPage > 4) { + pageNumbers.push("..."); + } + } + + const start = Math.max(2, currentPage - 1); + const end = Math.min(totalPages - 1, currentPage + 1); + + for (let i = start; i <= end; i++) { + pageNumbers.push(i); + } + + if (currentPage < totalPages - 2) { + if (currentPage < totalPages - 3) { + pageNumbers.push("..."); + } + pageNumbers.push(totalPages); + } + } + + return pageNumbers; + }; + + const pageNumbers = getPageNumbers(); + + return ( +
+ {/* دکمه قبلی */} + {/* */} + + {/* شماره صفحات */} + {pageNumbers.map((page, index) => + typeof page === "number" ? ( + + ) : ( + + {page} + + ) + )} + + {/* دکمه بعدی */} + {/* */} +
+ ); +}; + +export default Pagination; \ No newline at end of file diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx index c24b81e..dae97b9 100644 --- a/src/shared/Header.tsx +++ b/src/shared/Header.tsx @@ -117,7 +117,9 @@ const Header: FC = () => { />
- logo + + logo +