Compare commits

..

No commits in common. "0e2f7da4c017375cebbd50128204db7fc27dca10" and "8ed94a3a4d34f3bd3dabdcace68c587a897e55f7" have entirely different histories.

5 changed files with 10 additions and 59 deletions

View File

@ -1,14 +1,13 @@
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { fetchBlogSuggestion } from "@/services/payload/blog"; import { fetchBlog } from "@/services/payload/blog";
import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize"; 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 <></>; if (!data?.totalDocs) return <></>;
return ( return (
<> <>
{/* End Background Shape */} {/* End Background Shape */}
@ -26,13 +25,13 @@ export default async function BlogsSuggestion() {
{/* Blog Posts Grid */} {/* Blog Posts Grid */}
<div className="row mt-n30"> <div className="row mt-n30">
{/* Post Item */} {/* 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 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-container d-block d-sm-flex">
<div className="post-prev-3-img"> <div className="post-prev-3-img">
<Link href={`/${elm.slug ?? ""}`}> <Link href={elm.slug}>
<Image <Image
src={elm?.imgFormatted?.url ?? ""} src={elm.imgFormatted.url}
width={400} width={400}
height={200} height={200}
alt="Add Image Description" alt="Add Image Description"
@ -42,7 +41,7 @@ export default async function BlogsSuggestion() {
</div> </div>
<div className="post-prev-3-intro"> <div className="post-prev-3-intro">
<h4 className="post-prev-3-title"> <h4 className="post-prev-3-title">
<Link href={`/${elm.slug ?? ""}`}>{elm.title}</Link> <Link href={elm.slug}>{elm.title}</Link>
</h4> </h4>
<div className="post-prev-3-text">{sanitizeBlogContentIntoStringPreview(elm.content)}</div> <div className="post-prev-3-text">{sanitizeBlogContentIntoStringPreview(elm.content)}</div>
<div className="post-prev-3-info clearfix"> <div className="post-prev-3-info clearfix">

View File

@ -4,7 +4,7 @@ import { RichText } from "@payloadcms/richtext-lexical/react";
import { headers } from "next/headers"; import { headers } from "next/headers";
import Image from "next/image"; import Image from "next/image";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import BlogsSuggestion from "./BlogsSuggestion"; import Blog from "./Blog";
export interface BlogDetailProps { export interface BlogDetailProps {
slug: string | undefined; slug: string | undefined;
@ -121,7 +121,7 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
</section> </section>
{/* End Section */} {/* End Section */}
<div className="mb-5"> <div className="mb-5">
<BlogsSuggestion /> <Blog />
</div> </div>
</> </>
); );

View File

@ -1,6 +1,5 @@
import payloadConfig from "@/payload.config"; import payloadConfig from "@/payload.config";
import { formatDate } from "@/utils/datetime"; import { formatDate } from "@/utils/datetime";
import { getRandomNumber } from "@/utils/general";
import { getPayload, Where } from "payload"; import { getPayload, Where } from "payload";
type FetchBlogParams = { type FetchBlogParams = {
@ -13,10 +12,7 @@ type FetchBlogParams = {
export async function fetchBlog({ page, search = "", categoryId, tagId }: FetchBlogParams = {}) { export async function fetchBlog({ page, search = "", categoryId, tagId }: FetchBlogParams = {}) {
const payload = await getPayload({ config: payloadConfig }); const payload = await getPayload({ config: payloadConfig });
const queryCondition: Where = { const queryCondition: Where = {};
_status: { equals: "published" },
};
if (!!search) { if (!!search) {
queryCondition["title"] = { queryCondition["title"] = {
contains: search, 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) { export async function fetchBlogDetail(slug: string | undefined) {
const payload = await getPayload({ config: payloadConfig }); const payload = await getPayload({ config: payloadConfig });
const blogDataQuery = await payload.find({ const blogDataQuery = await payload.find({
collection: "blogs", collection: "blogs",
where: { where: {
_status: { equals: "published" },
slug: { equals: slug }, slug: { equals: slug },
}, },
limit: 1, limit: 1,
@ -123,7 +82,6 @@ export async function fetchBlogCategoryBySlug(slug: string) {
const category = await payload.find({ const category = await payload.find({
collection: "blogCategories", collection: "blogCategories",
where: { where: {
_status: { equals: "published" },
slug: { equals: slug }, slug: { equals: slug },
}, },
}); });
@ -140,7 +98,6 @@ export async function fetchBlogTagBySlug(slug: string) {
const tag = await payload.find({ const tag = await payload.find({
collection: "blogTags", collection: "blogTags",
where: { where: {
_status: { equals: "published" },
slug: { equals: slug }, slug: { equals: slug },
}, },
}); });

View File

@ -11,7 +11,6 @@ export const fetchPageBySlug = async ({ slug }: { slug: string | undefined }) =>
pagination: false, pagination: false,
// overrideAccess: draft, // overrideAccess: draft,
where: { where: {
_status: { equals: "published" },
slug: { slug: {
equals: slug, equals: slug,
}, },

View File

@ -1,7 +1,3 @@
export function limitString(text: string) { export function limitString(text: string) {
return `${text.length > 100 ? `${text.slice(0, 100)}...` : text}`; return `${text.length > 100 ? `${text.slice(0, 100)}...` : text}`;
} }
export function getRandomNumber(range: number): number {
return Math.floor(Math.random() * range) + 1;
}