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>
     </>
   );

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() {
+export default async function BlogsSuggestion() {
-  const data = await fetchBlog();
+  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">

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 = {
@@ -12,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,
@@ -51,11 +55,48 @@ 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",
+    where: { _status: { equals: "published" } },
+  });
+
+  // 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({
     collection: "blogs",
     where: {
+      _status: { equals: "published" },
       slug: { equals: slug },
     },
     limit: 1,
@@ -82,6 +123,7 @@ export async function fetchBlogCategoryBySlug(slug: string) {
   const category = await payload.find({
     collection: "blogCategories",
     where: {
+      _status: { equals: "published" },
       slug: { equals: slug },
     },
   });
@@ -98,6 +140,7 @@ export async function fetchBlogTagBySlug(slug: string) {
   const tag = await payload.find({
     collection: "blogTags",
     where: {
+      _status: { equals: "published" },
       slug: { equals: slug },
     },
   });

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,
       },

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;
+}