pagination + ...

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<number>(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) => (
                         <BigBlogItem key={item.id} item={item} />
                     ))}
+
+                    {
+                        data?.data.pager &&
+                        <div>
+                            <Pagination
+                                currentPage={data?.data?.pager.page}
+                                totalPages={data?.data?.pager.totalPages}
+                                onPageChange={(page) => {
+                                    setPage(page)
+                                }}
+                            />
+                        </div>
+                    }
                 </div>
 
                 <div className='block xl:hidden'>

src/app/blogs/components/MostVisited.tsx

@@ -7,7 +7,7 @@ const MostVisited: FC = () => {
     return (
         <div className='w-full rounded-4xl bg-white p-4'>
             <h4>
-                پر بازدیدترین ها
+                انتخاب سردبیر
             </h4>
 
             <div className='flex flex-col gap-6 mt-7 text-sm'>

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) => ({

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<BlogResponse>(`/blogs${query}`);
+  const { data } = await axios.get<BlogResponse>(`/blogs?page=${page}${query}`);
   return data;
 };
 

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<ServiceResponse>(
     `/danak-services/public${query}`