fix: Blog pagination and styling

This commit is contained in:
RizqiSyahrendra 2025-02-07 22:29:57 +07:00
parent 8bdc3416f9
commit 8ae3e377bf
7 changed files with 21 additions and 36 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -74,7 +74,7 @@ export const navMenuData = [
{ href: "/support", text: "Support Groups" }, { href: "/support", text: "Support Groups" },
{ href: "/hospitality-house", text: "Hospitality House" }, { href: "/hospitality-house", text: "Hospitality House" },
{ href: "/in-house-lab", text: "In-House Lab" }, { 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: "/#", text: "Patient Portal" },
{ href: "/blog", text: "Blog" }, { href: "/blog", text: "Blog" },
], ],

View File

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

View File

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