From 36868e4af0ca62d95512cad71acf4a7ed43b5b26 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra Date: Fri, 14 Mar 2025 15:26:38 +0700 Subject: [PATCH 1/2] fix: blogs suggestion query --- src/components/Blogs/BlogDetail.tsx | 4 +-- .../Blogs/{Blog.tsx => BlogsSuggestion.tsx} | 15 ++++---- src/services/payload/blog.ts | 36 +++++++++++++++++++ src/utils/general.ts | 4 +++ 4 files changed, 50 insertions(+), 9 deletions(-) rename src/components/Blogs/{Blog.tsx => BlogsSuggestion.tsx} (84%) diff --git a/src/components/Blogs/BlogDetail.tsx b/src/components/Blogs/BlogDetail.tsx index 55f4445..727f6db 100644 --- a/src/components/Blogs/BlogDetail.tsx +++ b/src/components/Blogs/BlogDetail.tsx @@ -4,7 +4,7 @@ import { RichText } from "@payloadcms/richtext-lexical/react"; import { headers } from "next/headers"; import Image from "next/image"; import { notFound } from "next/navigation"; -import Blog from "./Blog"; +import BlogsSuggestion from "./BlogsSuggestion"; export interface BlogDetailProps { slug: string | undefined; @@ -121,7 +121,7 @@ export default async function BlogDetail({ slug }: BlogDetailProps) { {/* End Section */}
- +
); diff --git a/src/components/Blogs/Blog.tsx b/src/components/Blogs/BlogsSuggestion.tsx similarity index 84% rename from src/components/Blogs/Blog.tsx rename to src/components/Blogs/BlogsSuggestion.tsx index e7f36cb..d1ba119 100644 --- a/src/components/Blogs/Blog.tsx +++ b/src/components/Blogs/BlogsSuggestion.tsx @@ -1,13 +1,14 @@ import React from "react"; import Image from "next/image"; import Link from "next/link"; -import { fetchBlog } from "@/services/payload/blog"; +import { fetchBlogSuggestion } from "@/services/payload/blog"; import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize"; -export default async function Blog() { - const data = await fetchBlog(); +export default async function BlogsSuggestion() { + const data = await fetchBlogSuggestion(); if (!data?.totalDocs) return <>; + return ( <> {/* End Background Shape */} @@ -25,13 +26,13 @@ export default async function Blog() { {/* Blog Posts Grid */}
{/* Post Item */} - {data?.formattedData?.slice(0, 2).map((elm: any, i: number) => ( + {data?.formattedData?.map((elm, i) => (
- + Add Image Description

- {elm.title} + {elm.title}

{sanitizeBlogContentIntoStringPreview(elm.content)}
diff --git a/src/services/payload/blog.ts b/src/services/payload/blog.ts index c4dd027..a4102a4 100644 --- a/src/services/payload/blog.ts +++ b/src/services/payload/blog.ts @@ -1,5 +1,6 @@ import payloadConfig from "@/payload.config"; import { formatDate } from "@/utils/datetime"; +import { getRandomNumber } from "@/utils/general"; import { getPayload, Where } from "payload"; type FetchBlogParams = { @@ -51,6 +52,41 @@ export async function fetchBlog({ page, search = "", categoryId, tagId }: FetchB }; } +export async function fetchBlogSuggestion() { + const payload = await getPayload({ config: payloadConfig }); + const limitPerPage = 2; + const blogCountQuery = await payload.count({ + collection: "blogs", + }); + + // randomize page + let page = 1; + const totalDocs = blogCountQuery.totalDocs; + if (totalDocs > limitPerPage) { + const totalPage = Math.ceil(totalDocs / limitPerPage); + page = getRandomNumber(totalPage); + } + + const blogDataQuery = await payload.find({ + collection: "blogs", + page, + limit: limitPerPage, + }); + + const formattedData = blogDataQuery.docs.map((item) => { + return { + ...item, + imgFormatted: typeof item.img !== "number" ? { url: item?.img?.url ?? "", alt: item.img.alt } : undefined, + createdAtFormatted: formatDate(item.createdAt), + }; + }); + + return { + ...blogDataQuery, + formattedData, + }; +} + export async function fetchBlogDetail(slug: string | undefined) { const payload = await getPayload({ config: payloadConfig }); const blogDataQuery = await payload.find({ diff --git a/src/utils/general.ts b/src/utils/general.ts index 8623424..294ef90 100644 --- a/src/utils/general.ts +++ b/src/utils/general.ts @@ -1,3 +1,7 @@ export function limitString(text: string) { return `${text.length > 100 ? `${text.slice(0, 100)}...` : text}`; } + +export function getRandomNumber(range: number): number { + return Math.floor(Math.random() * range) + 1; +} From 0e2f7da4c017375cebbd50128204db7fc27dca10 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra Date: Fri, 14 Mar 2025 15:41:14 +0700 Subject: [PATCH 2/2] fix: pages and blogs query only fetch published --- src/services/payload/blog.ts | 9 ++++++++- src/services/payload/page.ts | 1 + 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/services/payload/blog.ts b/src/services/payload/blog.ts index a4102a4..9fa5a01 100644 --- a/src/services/payload/blog.ts +++ b/src/services/payload/blog.ts @@ -13,7 +13,10 @@ type FetchBlogParams = { export async function fetchBlog({ page, search = "", categoryId, tagId }: FetchBlogParams = {}) { const payload = await getPayload({ config: payloadConfig }); - const queryCondition: Where = {}; + const queryCondition: Where = { + _status: { equals: "published" }, + }; + if (!!search) { queryCondition["title"] = { contains: search, @@ -57,6 +60,7 @@ export async function fetchBlogSuggestion() { const limitPerPage = 2; const blogCountQuery = await payload.count({ collection: "blogs", + where: { _status: { equals: "published" } }, }); // randomize page @@ -92,6 +96,7 @@ export async function fetchBlogDetail(slug: string | undefined) { const blogDataQuery = await payload.find({ collection: "blogs", where: { + _status: { equals: "published" }, slug: { equals: slug }, }, limit: 1, @@ -118,6 +123,7 @@ export async function fetchBlogCategoryBySlug(slug: string) { const category = await payload.find({ collection: "blogCategories", where: { + _status: { equals: "published" }, slug: { equals: slug }, }, }); @@ -134,6 +140,7 @@ export async function fetchBlogTagBySlug(slug: string) { const tag = await payload.find({ collection: "blogTags", where: { + _status: { equals: "published" }, slug: { equals: slug }, }, }); diff --git a/src/services/payload/page.ts b/src/services/payload/page.ts index 583221d..80bc2e0 100644 --- a/src/services/payload/page.ts +++ b/src/services/payload/page.ts @@ -11,6 +11,7 @@ export const fetchPageBySlug = async ({ slug }: { slug: string | undefined }) => pagination: false, // overrideAccess: draft, where: { + _status: { equals: "published" }, slug: { equals: slug, },