fix: Blog pagination and styling
This commit is contained in:
parent
8bdc3416f9
commit
8ae3e377bf
@ -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",
|
||||
|
@ -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;
|
||||
|
@ -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 */}
|
||||
|
@ -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" />
|
||||
|
@ -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" },
|
||||
],
|
||||
|
@ -111,7 +111,7 @@ export interface Media {
|
||||
export interface Blog {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
slug?: string | null;
|
||||
img: number | Media;
|
||||
content: {
|
||||
root: {
|
||||
|
@ -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),
|
||||
};
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user