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 { 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",

View File

@ -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;

View File

@ -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 */}

View File

@ -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" />

View File

@ -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" },
],

View File

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

View File

@ -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),
};
});