From e9c800ab95165084e9cd1da84ea3c8060b147b52 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Tue, 11 Mar 2025 16:48:30 +0700
Subject: [PATCH] fix: category pages integration

---
 src/app/(main)/category/[...path]/page.tsx | 97 ++++++++++++++++++++--
 src/components/Blogs/Blogs.tsx             | 28 +++++--
 src/components/Pagination.tsx              |  9 +-
 src/services/payload/blog.ts               | 24 +++++-
 src/utils/metadata.ts                      |  1 -
 5 files changed, 139 insertions(+), 20 deletions(-)

diff --git a/src/app/(main)/category/[...path]/page.tsx b/src/app/(main)/category/[...path]/page.tsx
index 5a6b0c5..c1dd242 100644
--- a/src/app/(main)/category/[...path]/page.tsx
+++ b/src/app/(main)/category/[...path]/page.tsx
@@ -2,14 +2,24 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
 import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
 import Blogs from "@/components/Blogs/Blogs";
 import HeroOther from "@/components/HeroOther";
+import { fetchBlogCategoryBySlug } from "@/services/payload/blog";
 import { getDefaultMetadata } from "@/utils/metadata";
 import { sanitizePageNumber } from "@/utils/sanitize";
 import { Metadata } from "next";
-// import { headers } from "next/headers";
+import { headers } from "next/headers";
+import { notFound } from "next/navigation";
 import { Suspense } from "react";
 
-export async function generateMetadata(): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: Promise<{ path: string[0] }> }): Promise<Metadata> {
+  const path = (await params)?.path;
+  const paramsCategory = path?.[0] ?? "";
   const metadata = await getDefaultMetadata();
+
+  const category = await fetchBlogCategoryBySlug(paramsCategory);
+  if (!!category?.data) {
+    metadata.title = `${category.data.name} Archives - ${metadata.openGraph?.siteName}`;
+  }
+
   return metadata;
 }
 
@@ -21,19 +31,92 @@ export default async function CategoryPage({
   searchParams?: Promise<{ page?: string; s?: string }>;
 }) {
   const path = (await params)?.path;
-  // const headersList = await headers();
-  // const paramsCategory = path?.[0] ?? "";
+  const paramsCategory = path?.[0] ?? "";
   const paramsPage = path?.[2] ?? "";
   const paramsSearch = (await searchParams)?.s;
   const page = sanitizePageNumber(paramsPage);
+  const headersList = await headers();
+  const mainUrl = headersList.get("x-main-url");
+  const fullUrl = headersList.get("x-full-url");
+  const siteName = headersList.get("x-site-name");
+
+  const category = await fetchBlogCategoryBySlug(paramsCategory);
+  if (!category) {
+    notFound();
+  }
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "CollectionPage",
+        "@id": fullUrl,
+        url: fullUrl,
+        name: `${category.data.name} - ${siteName}`,
+        isPartOf: {
+          "@id": `${mainUrl}/#website`,
+        },
+        primaryImageOfPage: {
+          "@id": `${fullUrl}#primaryimage`,
+        },
+        image: {
+          "@id": `${fullUrl}#primaryimage`,
+        },
+        inLanguage: "en-US",
+      },
+      {
+        "@type": "WebSite",
+        "@id": `${mainUrl}/#website`,
+        url: `${mainUrl}/`,
+        name: siteName,
+        description: "",
+        publisher: {
+          "@id": `${mainUrl}/#organization`,
+        },
+        potentialAction: [
+          {
+            "@type": "SearchAction",
+            target: {
+              "@type": "EntryPoint",
+              urlTemplate: `${mainUrl}/?s={search_term_string}`,
+            },
+            "query-input": {
+              "@type": "PropertyValueSpecification",
+              valueRequired: true,
+              valueName: "search_term_string",
+            },
+          },
+        ],
+        inLanguage: "en-US",
+      },
+      {
+        "@type": "Organization",
+        "@id": `${mainUrl}/#organization`,
+        name: siteName,
+        url: `${mainUrl}/`,
+        logo: {
+          "@type": "ImageObject",
+          inLanguage: "en-US",
+          "@id": `${mainUrl}/#/schema/logo/image/`,
+          url: `${mainUrl}/assets/images/logo-dark.webp`,
+          contentUrl: `${mainUrl}/assets/images/logo-dark.webp`,
+          caption: siteName,
+        },
+        image: {
+          "@id": `${mainUrl}/#/schema/logo/image/`,
+        },
+      },
+    ],
+  };
 
   return (
     <>
-      <HeroOther title="Blog" />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+      <HeroOther title={`Category: ${category.data.name}`} />
 
       <section className="page-section" id="blog">
         <div className="w-full max-w-7xl mx-auto px-4 md:px-8">
-          <form action={`category/chemotherapy/page/1`} method="GET">
+          <form action={`/category/${paramsCategory}`} method="GET">
             <div className="input-group">
               <input
                 type="text"
@@ -52,7 +135,7 @@ export default async function CategoryPage({
         </div>
 
         <Suspense fallback={<Loading />}>
-          <Blogs preset="categories" page={page} search={paramsSearch} />
+          <Blogs preset="categories" categoryId={category.data.id} page={page} search={paramsSearch} />
         </Suspense>
       </section>
 
diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx
index e92fdb9..aef71ef 100644
--- a/src/components/Blogs/Blogs.tsx
+++ b/src/components/Blogs/Blogs.tsx
@@ -3,14 +3,30 @@ import { fetchBlog } from "@/services/payload/blog";
 import { BlogCardItem } from "./BlogCardItem";
 import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
-export interface BlogsProps {
-  preset?: "blogs" | "categories";
+export type BlogsProps = {
   page: number;
   search?: string;
-}
+} & (
+  | {
+      preset?: "blogs";
+    }
+  | {
+      preset?: "categories";
+      categoryId: number;
+    }
+);
 
-export default async function Blogs({ page, search, preset = "blogs" }: BlogsProps) {
-  const data = await fetchBlog({ page, search });
+export default async function Blogs({ page, search, ...params }: BlogsProps) {
+  const fetchBlogParams: Parameters<typeof fetchBlog>[0] = {
+    page,
+    search,
+  };
+
+  if (params.preset === "categories") {
+    fetchBlogParams.categoryId = params.categoryId;
+  }
+
+  const data = await fetchBlog(fetchBlogParams);
 
   if (!data?.totalDocs) return <></>;
 
@@ -42,7 +58,7 @@ export default async function Blogs({ page, search, preset = "blogs" }: BlogsPro
             hasNextPage={data.hasNextPage}
             hasPreviousPage={data.hasPrevPage}
             totalPages={data.totalPages}
-            usePathParams={preset === "blogs" ? false : true}
+            usePathParams={params.preset === "blogs" ? false : true}
           />
         </div>
       )}
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 08f23b4..a4256d4 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -28,8 +28,13 @@ export default function Pagination({
     const searchParams = new URLSearchParams(url.search);
 
     if (usePathParams) {
-      searchParams.set("page", `${page}`);
-      window.location.href = `${pathName}/page/${page}/?${searchParams}`;
+      let updatedPath = "";
+      if (pathName.includes("/page")) {
+        updatedPath = pathName.replace(/\/page\/\d+/, `/page/${page}`);
+      } else {
+        updatedPath = `${pathName}/page/${page}`;
+      }
+      window.location.href = `${updatedPath}?${searchParams}`;
     } else {
       searchParams.set("page", `${page}`);
       window.location.href = `${pathName}/?${searchParams}`;
diff --git a/src/services/payload/blog.ts b/src/services/payload/blog.ts
index efce41e..3cf1ddb 100644
--- a/src/services/payload/blog.ts
+++ b/src/services/payload/blog.ts
@@ -5,10 +5,10 @@ import { getPayload, Where } from "payload";
 type FetchBlogParams = {
   page?: number;
   search?: string;
-  categorySlug?: string;
+  categoryId?: number;
 };
 
-export async function fetchBlog({ page, search = "", categorySlug = "" }: FetchBlogParams = {}) {
+export async function fetchBlog({ page, search = "", categoryId }: FetchBlogParams = {}) {
   const payload = await getPayload({ config: payloadConfig });
 
   const queryCondition: Where = {};
@@ -17,9 +17,9 @@ export async function fetchBlog({ page, search = "", categorySlug = "" }: FetchB
       contains: search,
     };
   }
-  if (!!categorySlug) {
+  if (!!categoryId) {
     queryCondition["categories"] = {
-      equals: 9,
+      equals: categoryId,
     };
   }
 
@@ -70,3 +70,19 @@ export async function fetchBlogDetail(slug: string | undefined) {
     imgUrl,
   };
 }
+
+export async function fetchBlogCategoryBySlug(slug: string) {
+  const payload = await getPayload({ config: payloadConfig });
+  const category = await payload.find({
+    collection: "blogCategories",
+    where: {
+      slug: { equals: slug },
+    },
+  });
+
+  if (!category?.docs?.[0]) return null;
+
+  return {
+    data: category.docs[0],
+  };
+}
diff --git a/src/utils/metadata.ts b/src/utils/metadata.ts
index 2160b71..6e8ae70 100644
--- a/src/utils/metadata.ts
+++ b/src/utils/metadata.ts
@@ -21,7 +21,6 @@ export async function getDefaultMetadata(): Promise<Metadata> {
     },
     openGraph: {
       siteName,
-      title: siteName,
       description: metaDesc,
       type: "website",
       locale: "en_US",