dev #3

Merged
RizqiSyahrendra merged 2 commits from dev into main 2025-02-26 15:55:11 +00:00
5 changed files with 55 additions and 82 deletions
Showing only changes of commit 9cd95a72f4 - Show all commits

View File

@ -10,8 +10,10 @@ export const metadata = {
description: "Blog - Cochise Oncology",
};
export default async function BlogPage({ searchParams }: { searchParams?: Promise<{ page?: string }> }) {
const paramsPage = (await searchParams)?.page;
export default async function BlogPage({ searchParams }: { searchParams?: Promise<{ page?: string; s?: string }> }) {
const params = await searchParams;
const paramsPage = params?.page;
const paramsSearch = params?.s;
const page = sanitizePageNumber(paramsPage);
return (
@ -32,9 +34,28 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
</div>
</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">
<Suspense fallback={<Loading />}>
<Blogs page={page} />
<Blogs page={page} search={paramsSearch} />
</Suspense>
</section>

View File

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

View File

@ -5,10 +5,11 @@ import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
export interface BlogsProps {
page: number;
search?: string;
}
export default async function Blogs({ page }: BlogsProps) {
const data = await fetchBlog(page);
export default async function Blogs({ page, search }: BlogsProps) {
const data = await fetchBlog(page, search);
if (!data?.totalDocs) return <></>;

View File

@ -1,6 +1,6 @@
"use client";
import { useRouter } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
import React from "react";
interface PaginationProps {
@ -13,13 +13,18 @@ interface PaginationProps {
export default function Pagination({ page, hasPreviousPage, hasNextPage, totalPages }: PaginationProps) {
const activePage = page;
const router = useRouter();
const pathName = usePathname();
// Function to handle page change
const handlePageChange = (page: string | number) => {
if (typeof page === "string") 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 = () => {

View File

@ -2,17 +2,32 @@ import payloadConfig from "@/payload.config";
import { formatDate } from "@/utils/datetime";
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 blogDataQuery = await payload.find({
collection: "blogs",
page,
pagination: true,
limit: 6,
where: {
where: !search
? {
is_published: {
equals: true,
},
}
: {
and: [
{
is_published: {
equals: true,
},
},
{
title: {
contains: search,
},
},
],
},
});