src/components/Blogs/Blog.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { fetchBlogSuggestion } from "@/services/payload/blog";
+import { fetchBlog } from "@/services/payload/blog";
 import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
 
-export default async function BlogsSuggestion() {
+export default async function Blog() {
-  const data = await fetchBlogSuggestion();
+  const data = await fetchBlog();
 
   if (!data?.totalDocs) return <></>;
-
   return (
     <>
       {/* End Background Shape */}
@@ -26,13 +25,13 @@ export default async function BlogsSuggestion() {
         {/* Blog Posts Grid */}
         <div className="row mt-n30">
           {/* Post Item */}
-          {data?.formattedData?.map((elm, i) => (
+          {data?.formattedData?.slice(0, 2).map((elm: any, i: number) => (
             <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"
@@ -42,7 +41,7 @@ export default async function BlogsSuggestion() {
                 </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/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 BlogsSuggestion from "./BlogsSuggestion";
+import Blog from "./Blog";
 
 export interface BlogDetailProps {
   slug: string | undefined;
@@ -121,7 +121,7 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
       </section>
       {/* End Section */}
       <div className="mb-5">
-        <BlogsSuggestion />
+        <Blog />
       </div>
     </>
   );

src/services/payload/blog.ts

@@ -1,6 +1,5 @@
 import payloadConfig from "@/payload.config";
 import { formatDate } from "@/utils/datetime";
-import { getRandomNumber } from "@/utils/general";
 import { getPayload, Where } from "payload";
 
 type FetchBlogParams = {
@@ -13,10 +12,7 @@ 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,
@@ -55,48 +51,11 @@ 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,
@@ -123,7 +82,6 @@ export async function fetchBlogCategoryBySlug(slug: string) {
   const category = await payload.find({
     collection: "blogCategories",
     where: {
-      _status: { equals: "published" },
       slug: { equals: slug },
     },
   });
@@ -140,7 +98,6 @@ 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,7 +11,6 @@ export const fetchPageBySlug = async ({ slug }: { slug: string | undefined }) =>
     pagination: false,
     // overrideAccess: draft,
     where: {
-      _status: { equals: "published" },
       slug: {
         equals: slug,
       },

src/utils/general.ts

@@ -1,7 +1,3 @@
 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;
-}