src/app/(main)/category/[...path]/page.tsx

@@ -1,74 +0,0 @@
-import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
-import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
-import Blogs from "@/components/Blogs/Blogs";
-import HeroOther from "@/components/HeroOther";
-import { getDefaultMetadata } from "@/utils/metadata";
-import { sanitizePageNumber } from "@/utils/sanitize";
-import { Metadata } from "next";
-import { headers } from "next/headers";
-import { Suspense } from "react";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const metadata = await getDefaultMetadata();
-  return metadata;
-}
-
-export default async function CategoryPage({
-  params,
-  searchParams,
-}: {
-  params?: Promise<{ path: string[] }>;
-  searchParams?: Promise<{ page?: string; s?: string }>;
-}) {
-  const path = (await params)?.path;
-  const headersList = await headers();
-  const paramsCategory = path?.[0] ?? "";
-  const paramsPage = path?.[2] ?? "";
-  const paramsSearch = (await searchParams)?.s;
-  const page = sanitizePageNumber(paramsPage);
-
-  return (
-    <>
-      <HeroOther title="Blog" />
-
-      <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">
-            <div className="input-group">
-              <input
-                type="text"
-                name="s"
-                defaultValue={paramsSearch ?? ""}
-                placeholder="Search blog..."
-                className="input-lg input-circle form-control h-12"
-              />
-              <div className="input-group-append px-2">
-                <button className="btn btn-info text-white h-12 px-5" type="submit">
-                  Search
-                </button>
-              </div>
-            </div>
-          </form>
-        </div>
-
-        <Suspense fallback={<Loading />}>
-          <Blogs preset="categories" page={page} search={paramsSearch} />
-        </Suspense>
-      </section>
-
-      <BeforeFooterBlock />
-    </>
-  );
-}
-
-function Loading() {
-  return (
-    <div className="container position-relative">
-      <div className="row">
-        <BlogCardItemSkeleton />
-        <BlogCardItemSkeleton />
-        <BlogCardItemSkeleton />
-      </div>
-    </div>
-  );
-}

src/app/globals.css

@@ -59,10 +59,6 @@ body {
   .ext-btn-shadow-sm-primary4 {
     @apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
   }
-
-  .ext-btn-shadow-sm-primary8 {
-    @apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
-  }
 }
 
 .bg-gradient {

src/components/Blogs/Blog.tsx

@@ -5,7 +5,7 @@ import { fetchBlog } from "@/services/payload/blog";
 import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
 export default async function Blog() {
-  const data = await fetchBlog();
+  const data = await fetchBlog(undefined);
 
   if (!data?.totalDocs) return <></>;
   return (

src/components/Blogs/BlogCardItem.tsx

@@ -31,7 +31,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
             <a href={`/${data.slug}/`}>{data.title}</a>
           </h2>
           <div className="flex justify-center mt-2">
-            <a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary8">
+            <a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary4">
               Continue Reading
             </a>
           </div>

src/components/Blogs/Blogs.tsx

@@ -4,13 +4,12 @@ import { BlogCardItem } from "./BlogCardItem";
 import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
 export interface BlogsProps {
-  preset?: "blogs" | "categories";
   page: number;
   search?: string;
 }
 
-export default async function Blogs({ page, search, preset = "blogs" }: BlogsProps) {
+export default async function Blogs({ page, search }: BlogsProps) {
-  const data = await fetchBlog({ page, search });
+  const data = await fetchBlog(page, search);
 
   if (!data?.totalDocs) return <></>;
 
@@ -42,7 +41,6 @@ export default async function Blogs({ page, search, preset = "blogs" }: BlogsPro
             hasNextPage={data.hasNextPage}
             hasPreviousPage={data.hasPrevPage}
             totalPages={data.totalPages}
-            usePathParams={preset === "blogs" ? false : true}
           />
         </div>
       )}

src/components/Pagination.tsx

@@ -7,16 +7,9 @@ interface PaginationProps {
   hasPreviousPage: boolean;
   hasNextPage: boolean;
   totalPages: number;
-  usePathParams?: boolean;
 }
 
-export default function Pagination({
+export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
-  page,
-  hasPreviousPage,
-  hasNextPage,
-  totalPages,
-  usePathParams = false,
-}: PaginationProps) {
   const activePage = page;
   const pathName = usePathname();
 
@@ -24,16 +17,11 @@ export default function Pagination({
   const handlePageChange = (page: string | number) => {
     if (typeof page === "string") return;
     if (typeof window === "undefined") return;
+
     const url = new URL(window.location.href);
     const searchParams = new URLSearchParams(url.search);
-
+    searchParams.set("page", `${page}`);
-    if (usePathParams) {
+    window.location.href = `${pathName}/?${searchParams}`;
-      searchParams.set("page", `${page}`);
-      window.location.href = `${pathName}/page/${page}/?${searchParams}`;
-    } else {
-      searchParams.set("page", `${page}`);
-      window.location.href = `${pathName}/?${searchParams}`;
-    }
   };
 
   const getPageNumbers = () => {

src/services/payload/blog.ts

@@ -1,34 +1,21 @@
 import payloadConfig from "@/payload.config";
 import { formatDate } from "@/utils/datetime";
-import { getPayload, Where } from "payload";
+import { getPayload } from "payload";
 
-type FetchBlogParams = {
+export async function fetchBlog(page: number | undefined, search: string = "") {
-  page?: number;
-  search?: string;
-  categorySlug?: string;
-};
-
-export async function fetchBlog({ page, search = "", categorySlug = "" }: FetchBlogParams = {}) {
   const payload = await getPayload({ config: payloadConfig });
-
-  const queryCondition: Where = {};
-  if (!!search) {
-    queryCondition["title"] = {
-      contains: search,
-    };
-  }
-  if (!!categorySlug) {
-    queryCondition["categories"] = {
-      equals: 9,
-    };
-  }
-
   const blogDataQuery = await payload.find({
     collection: "blogs",
     page,
     pagination: true,
-    limit: 9,
+    limit: 6,
-    where: queryCondition,
+    where: !search
+      ? undefined
+      : {
+          title: {
+            contains: search,
+          },
+        },
   });
 
   const formattedData = blogDataQuery.docs.map((item) => {