fix: Blog pagination and styling
This commit is contained in:
parent
8bdc3416f9
commit
8ae3e377bf
@ -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",
|
||||||
|
@ -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;
|
||||||
|
@ -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 */}
|
||||||
|
@ -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" />
|
||||||
|
@ -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" },
|
||||||
],
|
],
|
||||||
|
@ -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: {
|
||||||
|
@ -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),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user