From 36868e4af0ca62d95512cad71acf4a7ed43b5b26 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
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) {
</section>
{/* End Section */}
<div className="mb-5">
- <Blog />
+ <BlogsSuggestion />
</div>
</>
);
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 */}
<div className="row mt-n30">
{/* Post Item */}
- {data?.formattedData?.slice(0, 2).map((elm: any, i: number) => (
+ {data?.formattedData?.map((elm, i) => (
<div key={i} className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-30">
<div className="post-prev-3-container d-block d-sm-flex">
<div className="post-prev-3-img">
- <Link href={elm.slug}>
+ <Link href={`/${elm.slug ?? ""}`}>
<Image
- src={elm.imgFormatted.url}
+ src={elm?.imgFormatted?.url ?? ""}
width={400}
height={200}
alt="Add Image Description"
@@ -41,7 +42,7 @@ export default async function Blog() {
</div>
<div className="post-prev-3-intro">
<h4 className="post-prev-3-title">
- <Link href={elm.slug}>{elm.title}</Link>
+ <Link href={`/${elm.slug ?? ""}`}>{elm.title}</Link>
</h4>
<div className="post-prev-3-text">{sanitizeBlogContentIntoStringPreview(elm.content)}</div>
<div className="post-prev-3-info clearfix">
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 <rizqialaudinsyahrendra@gmail.com>
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,
},