fix: Blog pagination and styling

src/collections/Blogs.ts

@@ -1,5 +1,6 @@
 import type { CollectionConfig } from "payload";
 import { lexicalEditor } from "@payloadcms/richtext-lexical";
+import formatSlug from "@/utils/formatSlug";
 
 export const Blogs: CollectionConfig = {
   slug: "blogs",
@@ -12,7 +13,12 @@ export const Blogs: CollectionConfig = {
     {
       name: "slug",
       type: "text",
-      required: true,
+      admin: {
+        position: "sidebar",
+      },
+      hooks: {
+        beforeValidate: [formatSlug("title")],
+      },
     },
     {
       name: "img",

src/components/Blogs/BlogCardItem.tsx

@@ -1,9 +1,8 @@
 import Image from "next/image";
-import Link from "next/link";
 
 export interface BlogCardItemProps {
   data: {
-    slug: string;
+    slug: string | null | undefined;
     title: string;
     img?: {
       url: string;

src/components/Blogs/Blogs.tsx

@@ -12,12 +12,6 @@ export default async function Blogs({ page }: BlogsProps) {
 
   if (!data?.totalDocs) return <></>;
 
-  const handleClickPage = (clickedPage: number) => {
-    if (typeof window === "undefined") return;
-
-    window.location.href = `/blog/?page=${clickedPage}`;
-  };
-
   return (
     <div className="container position-relative">
       {/* Blog Posts Grid */}
@@ -45,7 +39,6 @@ export default async function Blogs({ page }: BlogsProps) {
           hasNextPage={data.hasNextPage}
           hasPreviousPage={data.hasPrevPage}
           totalPages={data.totalPages}
-          onClickPage={handleClickPage}
         />
       )}
       {/* End Pagination */}

src/components/Pagination.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import React from "react";
 
 interface PaginationProps {
@@ -7,22 +8,18 @@ interface PaginationProps {
   hasPreviousPage: boolean;
   hasNextPage: boolean;
   totalPages: number;
-  onClickPage?: (page: number) => void;
 }
 
-export default function Pagination({
-  page,
-  hasPreviousPage,
-  hasNextPage,
-  totalPages,
-  onClickPage,
-}: PaginationProps) {
+export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
   const activePage = page;
+  const router = useRouter();
 
   // Function to handle page change
   const handlePageChange = (page: string | number) => {
     if (typeof page === "string") return;
-    onClickPage?.(page);
+    if (typeof window === "undefined") return;
+
+    router.push(`/blog/?page=${page}`);
   };
 
   const getPageNumbers = () => {
@@ -45,9 +42,7 @@ export default function Pagination({
 
       // Show pages around current page
       const start = showEllipsisStart ? Math.max(2, activePage - 1) : 2;
-      const end = showEllipsisEnd
-        ? Math.min(totalPages - 1, activePage + 1)
-        : totalPages - 1;
+      const end = showEllipsisEnd ? Math.min(totalPages - 1, activePage + 1) : totalPages - 1;
 
       for (let i = start; i <= end; i++) {
         pages.push(i);
@@ -78,11 +73,7 @@ export default function Pagination({
       )}
 
       {getPageNumbers().map((page, key) => (
-        <a
-          key={key}
-          onClick={() => handlePageChange(page)}
-          className={activePage === page ? "active" : ""}
-        >
+        <a key={key} onClick={() => handlePageChange(page)} className={activePage === page ? "active" : ""}>
           {page}
         </a>
       ))}
@@ -90,9 +81,7 @@ export default function Pagination({
       {/* Next Page Button */}
       {hasNextPage && (
         <a
-          onClick={() =>
-            activePage < totalPages && handlePageChange(activePage + 1)
-          }
+          onClick={() => activePage < totalPages && handlePageChange(activePage + 1)}
           className={activePage === totalPages ? "disabled" : ""}
         >
           <i className="mi-chevron-right" />

src/data/menu.ts

@@ -74,7 +74,7 @@ export const navMenuData = [
       { href: "/support", text: "Support Groups" },
       { href: "/hospitality-house", text: "Hospitality House" },
       { href: "/in-house-lab", text: "In-House Lab" },
-      { href: "/in-house-lab", text: "American Cancer Society" },
+      { href: "/american-cancer-society", text: "American Cancer Society" },
       { href: "/#", text: "Patient Portal" },
       { href: "/blog", text: "Blog" },
     ],

src/payload-types.ts

@@ -111,7 +111,7 @@ export interface Media {
 export interface Blog {
   id: number;
   title: string;
-  slug: string;
+  slug?: string | null;
   img: number | Media;
   content: {
     root: {

src/services/payload/blog.ts

@@ -8,15 +8,13 @@ export async function fetchBlog(page: number = 1) {
     collection: "blogs",
     page,
     pagination: true,
+    limit: 6,
   });
 
   const formattedData = blogDataQuery.docs.map((item) => {
     return {
       ...item,
-      imgFormatted:
-        typeof item.img !== "number"
-          ? { url: item?.img?.url ?? "", alt: item.img.alt }
-          : undefined,
+      imgFormatted: typeof item.img !== "number" ? { url: item?.img?.url ?? "", alt: item.img.alt } : undefined,
       createdAtFormatted: formatDate(item.createdAt),
     };
   });