diff --git a/src/collections/Blogs.ts b/src/collections/Blogs.ts
index efbb886..ab10ab6 100644
--- a/src/collections/Blogs.ts
+++ b/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",
diff --git a/src/components/Blogs/BlogCardItem.tsx b/src/components/Blogs/BlogCardItem.tsx
index 80478cf..46d8a13 100644
--- a/src/components/Blogs/BlogCardItem.tsx
+++ b/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;
diff --git a/src/components/Blogs/Blogs.tsx b/src/components/Blogs/Blogs.tsx
index 5ed3b2b..9088e3c 100644
--- a/src/components/Blogs/Blogs.tsx
+++ b/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 (
{/* 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 */}
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index ff07298..3aa5fef 100644
--- a/src/components/Pagination.tsx
+++ b/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) => (
-
handlePageChange(page)}
- className={activePage === page ? "active" : ""}
- >
+ handlePageChange(page)} className={activePage === page ? "active" : ""}>
{page}
))}
@@ -90,9 +81,7 @@ export default function Pagination({
{/* Next Page Button */}
{hasNextPage && (
- activePage < totalPages && handlePageChange(activePage + 1)
- }
+ onClick={() => activePage < totalPages && handlePageChange(activePage + 1)}
className={activePage === totalPages ? "disabled" : ""}
>
diff --git a/src/data/menu.ts b/src/data/menu.ts
index 4bde8e4..404d43b 100644
--- a/src/data/menu.ts
+++ b/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" },
],
diff --git a/src/payload-types.ts b/src/payload-types.ts
index 4a53263..80374ba 100644
--- a/src/payload-types.ts
+++ b/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: {
diff --git a/src/services/payload/blog.ts b/src/services/payload/blog.ts
index 77fae5c..6297355 100644
--- a/src/services/payload/blog.ts
+++ b/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),
};
});