From 931b72bceb316f3bde39e6e1c5c0f5bfaab10710 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 14 Oct 2024 16:01:15 +0330
Subject: [PATCH] pagination added to filterd-posts

---
 .../blog/categories/[categorySlug]/page.tsx   |  2 +-
 src/app/(routes)/blog/categories/page.tsx     |  4 +--
 .../blog/filtered-posts/[filter]/page.tsx     | 31 ++++++++++++++-----
 src/app/types/types.ts                        |  1 +
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/app/(routes)/blog/categories/[categorySlug]/page.tsx b/src/app/(routes)/blog/categories/[categorySlug]/page.tsx
index d6ef392..daf0449 100644
--- a/src/app/(routes)/blog/categories/[categorySlug]/page.tsx
+++ b/src/app/(routes)/blog/categories/[categorySlug]/page.tsx
@@ -65,7 +65,7 @@ export default async function SingleCategory({
           </li>
         </ul>
 
-        <div className="flex w-full flex-wrap justify-center gap-10">
+        <div className="flex w-full flex-wrap justify-center gap-10 mb-10">
           {categoryData.posts.length > 0 ? (
             categoryData.posts.map((post) => (
               <div
diff --git a/src/app/(routes)/blog/categories/page.tsx b/src/app/(routes)/blog/categories/page.tsx
index 1693e74..319dafc 100644
--- a/src/app/(routes)/blog/categories/page.tsx
+++ b/src/app/(routes)/blog/categories/page.tsx
@@ -48,14 +48,14 @@ export default async function Categories({
           <li className="flex items-center gap-2">
             <p className="relative text-[12px] font-[600] capitalize text-blog-text-default">
               categories
-              <span className="absolute -end-5 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-blog-red">
+              <span className="absolute -end-6 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-blog-red">
                 {CategoriesData.meta.total}
               </span>
             </p>
           </li>
         </ul>
 
-        <div className="mb-10 flex w-full flex-wrap justify-center gap-10">
+        <div className="mb-10 flex w-full flex-wrap justify-center gap-10 mb-10">
           {CategoriesData.data.length > 0 ? (
             CategoriesData.data.map((category: CategoryType) => (
               <div
diff --git a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
index 2a374ac..88c325d 100644
--- a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
+++ b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
@@ -1,9 +1,12 @@
 import { FilteredPostsPagepropsType, PostType } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
+import NoDataFounded from "../../components/no-data-founded/noDataFounded";
+import Pagination from "../../components/pagination/pagination";
 
 export default async function FilteredPosts({
   params,
+  searchParams,
 }: FilteredPostsPagepropsType) {
   let filteredPostApiUrl: string;
 
@@ -20,17 +23,17 @@ export default async function FilteredPosts({
       filteredPostApiUrl = "";
   }
 
-  let FilteredPostsData: { data: PostType[] };
+  let FilteredPostsData: { data: PostType[]; link: any; meta: any };
 
   if (filteredPostApiUrl !== "") {
     FilteredPostsData = await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}${filteredPostApiUrl}`,
+      `${process.env.NEXT_PUBLIC_API_URL}${filteredPostApiUrl}&per_page=${searchParams.per_page ? searchParams.per_page : process.env.NEXT_PUBLIC_POSTS_PER_FILTERED_POSTS_PAGE}${searchParams.page ? `&page=${searchParams.page}` : ""}`,
       {
         cache: "no-store",
       },
     ).then((res) => res.json());
   } else {
-    FilteredPostsData = { data: [] };
+    FilteredPostsData = { data: [], meta: null, link: null };
   }
 
   return (
@@ -62,14 +65,18 @@ export default async function FilteredPosts({
             </span>
           </li>
           <li className="flex items-center gap-2">
-            <p className="text-[12px] font-[600] capitalize text-blog-text-default">
+            <p className="relative text-[12px] font-[600] capitalize text-blog-text-default">
               {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()}
+
+              <span className="absolute -end-6 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-blog-red">
+                {FilteredPostsData.meta.total}
+              </span>
             </p>
           </li>
         </ul>
 
-        <div className="flex w-full max-w-[90%] flex-wrap justify-center gap-10">
-          {FilteredPostsData.data.length > 0 &&
+        <div className="mb-10 flex w-full max-w-[90%] flex-wrap justify-center gap-10">
+          {FilteredPostsData.data.length > 0 ? (
             FilteredPostsData.data.map((post: PostType) => (
               <div
                 key={post.id}
@@ -117,8 +124,18 @@ export default async function FilteredPosts({
                   {post.excerpt}
                 </p>
               </div>
-            ))}
+            ))
+          ) : (
+            <NoDataFounded />
+          )}
         </div>
+        {FilteredPostsData.data.length > 0 &&
+          FilteredPostsData.meta.last_page > 1 && (
+            <Pagination
+              meta={FilteredPostsData.meta}
+              baseUrl={`/blog/filtered-posts/${params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()}`}
+            />
+          )}
       </div>
     </div>
   );
diff --git a/src/app/types/types.ts b/src/app/types/types.ts
index a1d18a3..b66933e 100644
--- a/src/app/types/types.ts
+++ b/src/app/types/types.ts
@@ -80,6 +80,7 @@ export type CategoryDataType = {
 
 export type FilteredPostsPagepropsType = {
   params: { filter: string };
+  searchParams: any;
 };
 
 export type PostSlugPagepropsType = {