dev #3
@ -10,8 +10,10 @@ export const metadata = {
|
|||||||
description: "Blog - Cochise Oncology",
|
description: "Blog - Cochise Oncology",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default async function BlogPage({ searchParams }: { searchParams?: Promise<{ page?: string }> }) {
|
export default async function BlogPage({ searchParams }: { searchParams?: Promise<{ page?: string; s?: string }> }) {
|
||||||
const paramsPage = (await searchParams)?.page;
|
const params = await searchParams;
|
||||||
|
const paramsPage = params?.page;
|
||||||
|
const paramsSearch = params?.s;
|
||||||
const page = sanitizePageNumber(paramsPage);
|
const page = sanitizePageNumber(paramsPage);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -32,9 +34,28 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<div className="px-3 md:px-4 mt-4 lg:w-2/3 lg:mx-auto">
|
||||||
|
<form action="/blog" method="GET">
|
||||||
|
<div className="input-group">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="s"
|
||||||
|
defaultValue={paramsSearch ?? ""}
|
||||||
|
placeholder="Search blog..."
|
||||||
|
className="input-lg input-circle form-control"
|
||||||
|
/>
|
||||||
|
<div className="input-group-append">
|
||||||
|
<button className="btn btn-info text-white" type="submit">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section className="page-section" id="blog">
|
<section className="page-section" id="blog">
|
||||||
<Suspense fallback={<Loading />}>
|
<Suspense fallback={<Loading />}>
|
||||||
<Blogs page={page} />
|
<Blogs page={page} search={paramsSearch} />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
@ -1,69 +0,0 @@
|
|||||||
@use "../css/queries.scss" as *;
|
|
||||||
|
|
||||||
.form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hasSubmitted {
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 80vh;
|
|
||||||
|
|
||||||
@include small-break {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro {
|
|
||||||
margin-bottom: var(--base);
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
margin-bottom: var(--base);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.confirmationMessage {
|
|
||||||
max-width: 800px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fieldWrap {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-left: calc(var(--base) * -0.5);
|
|
||||||
margin-right: calc(var(--base) * -0.5);
|
|
||||||
width: calc(100% + #{var(--base)});
|
|
||||||
|
|
||||||
> * {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Select {
|
|
||||||
& label {
|
|
||||||
position: absolute;
|
|
||||||
top: calc(var(--base) * -0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebarContent {
|
|
||||||
@include mid-break {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobileSidebar {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@include mid-break {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: calc(var(--base) * 2);
|
|
||||||
}
|
|
||||||
}
|
|
@ -5,10 +5,11 @@ import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
|
|||||||
|
|
||||||
export interface BlogsProps {
|
export interface BlogsProps {
|
||||||
page: number;
|
page: number;
|
||||||
|
search?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function Blogs({ page }: BlogsProps) {
|
export default async function Blogs({ page, search }: BlogsProps) {
|
||||||
const data = await fetchBlog(page);
|
const data = await fetchBlog(page, search);
|
||||||
|
|
||||||
if (!data?.totalDocs) return <></>;
|
if (!data?.totalDocs) return <></>;
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useRouter } from "next/navigation";
|
import { usePathname, useRouter } from "next/navigation";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
interface PaginationProps {
|
interface PaginationProps {
|
||||||
@ -13,13 +13,18 @@ interface PaginationProps {
|
|||||||
export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
|
export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
|
||||||
const activePage = page;
|
const activePage = page;
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const pathName = usePathname();
|
||||||
|
|
||||||
// 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;
|
||||||
if (typeof window === "undefined") return;
|
if (typeof window === "undefined") return;
|
||||||
|
|
||||||
router.push(`/blog/?page=${page}`);
|
const url = new URL(window.location.href);
|
||||||
|
const searchParams = new URLSearchParams(url.search);
|
||||||
|
searchParams.set("page", `${page}`);
|
||||||
|
|
||||||
|
router.push(`${pathName}/?${searchParams}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getPageNumbers = () => {
|
const getPageNumbers = () => {
|
||||||
|
@ -2,18 +2,33 @@ import payloadConfig from "@/payload.config";
|
|||||||
import { formatDate } from "@/utils/datetime";
|
import { formatDate } from "@/utils/datetime";
|
||||||
import { getPayload } from "payload";
|
import { getPayload } from "payload";
|
||||||
|
|
||||||
export async function fetchBlog(page: number | undefined) {
|
export async function fetchBlog(page: number | undefined, search: string = "") {
|
||||||
const payload = await getPayload({ config: payloadConfig });
|
const payload = await getPayload({ config: payloadConfig });
|
||||||
const blogDataQuery = await payload.find({
|
const blogDataQuery = await payload.find({
|
||||||
collection: "blogs",
|
collection: "blogs",
|
||||||
page,
|
page,
|
||||||
pagination: true,
|
pagination: true,
|
||||||
limit: 6,
|
limit: 6,
|
||||||
where: {
|
where: !search
|
||||||
is_published: {
|
? {
|
||||||
equals: true,
|
is_published: {
|
||||||
},
|
equals: true,
|
||||||
},
|
},
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
and: [
|
||||||
|
{
|
||||||
|
is_published: {
|
||||||
|
equals: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: {
|
||||||
|
contains: search,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const formattedData = blogDataQuery.docs.map((item) => {
|
const formattedData = blogDataQuery.docs.map((item) => {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user