Compare commits

..

No commits in common. "ba72910f98326a5cb5ace9b75d817efee81992e6" and "d010f6a965df7cfec64efd4b8a52a72f6e93ec20" have entirely different histories.

7 changed files with 18 additions and 123 deletions

View File

@ -1,74 +0,0 @@
import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
import { BlogCardItemSkeleton } from "@/components/Blogs/BlogCardItem";
import Blogs from "@/components/Blogs/Blogs";
import HeroOther from "@/components/HeroOther";
import { getDefaultMetadata } from "@/utils/metadata";
import { sanitizePageNumber } from "@/utils/sanitize";
import { Metadata } from "next";
import { headers } from "next/headers";
import { Suspense } from "react";
export async function generateMetadata(): Promise<Metadata> {
const metadata = await getDefaultMetadata();
return metadata;
}
export default async function CategoryPage({
params,
searchParams,
}: {
params?: Promise<{ path: string[] }>;
searchParams?: Promise<{ page?: string; s?: string }>;
}) {
const path = (await params)?.path;
const headersList = await headers();
const paramsCategory = path?.[0] ?? "";
const paramsPage = path?.[2] ?? "";
const paramsSearch = (await searchParams)?.s;
const page = sanitizePageNumber(paramsPage);
return (
<>
<HeroOther title="Blog" />
<section className="page-section" id="blog">
<div className="w-full max-w-7xl mx-auto px-4 md:px-8">
<form action={`category/chemotherapy/page/1`} method="GET">
<div className="input-group">
<input
type="text"
name="s"
defaultValue={paramsSearch ?? ""}
placeholder="Search blog..."
className="input-lg input-circle form-control h-12"
/>
<div className="input-group-append px-2">
<button className="btn btn-info text-white h-12 px-5" type="submit">
Search
</button>
</div>
</div>
</form>
</div>
<Suspense fallback={<Loading />}>
<Blogs preset="categories" page={page} search={paramsSearch} />
</Suspense>
</section>
<BeforeFooterBlock />
</>
);
}
function Loading() {
return (
<div className="container position-relative">
<div className="row">
<BlogCardItemSkeleton />
<BlogCardItemSkeleton />
<BlogCardItemSkeleton />
</div>
</div>
);
}

View File

@ -59,10 +59,6 @@ body {
.ext-btn-shadow-sm-primary4 { .ext-btn-shadow-sm-primary4 {
@apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors; @apply bg-extColorPrimary4 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
} }
.ext-btn-shadow-sm-primary8 {
@apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
}
} }
.bg-gradient { .bg-gradient {

View File

@ -5,7 +5,7 @@ import { fetchBlog } from "@/services/payload/blog";
import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize"; import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
export default async function Blog() { export default async function Blog() {
const data = await fetchBlog(); const data = await fetchBlog(undefined);
if (!data?.totalDocs) return <></>; if (!data?.totalDocs) return <></>;
return ( return (

View File

@ -31,7 +31,7 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
<a href={`/${data.slug}/`}>{data.title}</a> <a href={`/${data.slug}/`}>{data.title}</a>
</h2> </h2>
<div className="flex justify-center mt-2"> <div className="flex justify-center mt-2">
<a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary8"> <a href={`/${data.slug}/`} className="ext-btn-shadow-sm ext-btn-shadow-sm-primary4">
Continue Reading Continue Reading
</a> </a>
</div> </div>

View File

@ -4,13 +4,12 @@ import { BlogCardItem } from "./BlogCardItem";
import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize"; import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
export interface BlogsProps { export interface BlogsProps {
preset?: "blogs" | "categories";
page: number; page: number;
search?: string; search?: string;
} }
export default async function Blogs({ page, search, preset = "blogs" }: BlogsProps) { export default async function Blogs({ page, search }: BlogsProps) {
const data = await fetchBlog({ page, search }); const data = await fetchBlog(page, search);
if (!data?.totalDocs) return <></>; if (!data?.totalDocs) return <></>;
@ -42,7 +41,6 @@ export default async function Blogs({ page, search, preset = "blogs" }: BlogsPro
hasNextPage={data.hasNextPage} hasNextPage={data.hasNextPage}
hasPreviousPage={data.hasPrevPage} hasPreviousPage={data.hasPrevPage}
totalPages={data.totalPages} totalPages={data.totalPages}
usePathParams={preset === "blogs" ? false : true}
/> />
</div> </div>
)} )}

View File

@ -7,16 +7,9 @@ interface PaginationProps {
hasPreviousPage: boolean; hasPreviousPage: boolean;
hasNextPage: boolean; hasNextPage: boolean;
totalPages: number; totalPages: number;
usePathParams?: boolean;
} }
export default function Pagination({ export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
page,
hasPreviousPage,
hasNextPage,
totalPages,
usePathParams = false,
}: PaginationProps) {
const activePage = page; const activePage = page;
const pathName = usePathname(); const pathName = usePathname();
@ -24,16 +17,11 @@ export default function Pagination({
const handlePageChange = (page: string | number) => { const handlePageChange = (page: string | number) => {
if (typeof page === "string") return; if (typeof page === "string") return;
if (typeof window === "undefined") return; if (typeof window === "undefined") return;
const url = new URL(window.location.href); const url = new URL(window.location.href);
const searchParams = new URLSearchParams(url.search); const searchParams = new URLSearchParams(url.search);
searchParams.set("page", `${page}`);
if (usePathParams) { window.location.href = `${pathName}/?${searchParams}`;
searchParams.set("page", `${page}`);
window.location.href = `${pathName}/page/${page}/?${searchParams}`;
} else {
searchParams.set("page", `${page}`);
window.location.href = `${pathName}/?${searchParams}`;
}
}; };
const getPageNumbers = () => { const getPageNumbers = () => {

View File

@ -1,34 +1,21 @@
import payloadConfig from "@/payload.config"; import payloadConfig from "@/payload.config";
import { formatDate } from "@/utils/datetime"; import { formatDate } from "@/utils/datetime";
import { getPayload, Where } from "payload"; import { getPayload } from "payload";
type FetchBlogParams = { export async function fetchBlog(page: number | undefined, search: string = "") {
page?: number;
search?: string;
categorySlug?: string;
};
export async function fetchBlog({ page, search = "", categorySlug = "" }: FetchBlogParams = {}) {
const payload = await getPayload({ config: payloadConfig }); const payload = await getPayload({ config: payloadConfig });
const queryCondition: Where = {};
if (!!search) {
queryCondition["title"] = {
contains: search,
};
}
if (!!categorySlug) {
queryCondition["categories"] = {
equals: 9,
};
}
const blogDataQuery = await payload.find({ const blogDataQuery = await payload.find({
collection: "blogs", collection: "blogs",
page, page,
pagination: true, pagination: true,
limit: 9, limit: 6,
where: queryCondition, where: !search
? undefined
: {
title: {
contains: search,
},
},
}); });
const formattedData = blogDataQuery.docs.map((item) => { const formattedData = blogDataQuery.docs.map((item) => {