From 8ae3e377bf625d92cd5796aeea7d5794f30e2cc7 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra Date: Fri, 7 Feb 2025 22:29:57 +0700 Subject: [PATCH] fix: Blog pagination and styling --- src/collections/Blogs.ts | 8 +++++++- src/components/Blogs/BlogCardItem.tsx | 3 +-- src/components/Blogs/Blogs.tsx | 7 ------- src/components/Pagination.tsx | 29 +++++++++------------------ src/data/menu.ts | 2 +- src/payload-types.ts | 2 +- src/services/payload/blog.ts | 6 ++---- 7 files changed, 21 insertions(+), 36 deletions(-) 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), }; });