dynamic-realty/dynamic-realty-next
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: blog detail fetching and new fixed loader

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-04-21 11:06:04 +07:00
parent 9a80da754d
commit 9dfa9d2dd8
10 changed files with 47 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/(main)/blog/[slug]/loading.tsx Normal file
View File

@ -0,0 +1,5 @@
import LoaderFixed from "@/components/loaders/LoaderFixed";
export default function Loading() {
return <LoaderFixed />;
}

27
src/app/(main)/blog/[slug]/page.tsx
View File

@ -1,7 +1,10 @@
import HeroImage from "@/components/HeroImage";
import { fetchBlogDetail } from "@/services/payload/blog";
import { getDefaultMetadata } from "@/utils/metadata";
import { RichText } from "@payloadcms/richtext-lexical/react";
import { Metadata } from "next";
import Image from "next/image";
import { notFound } from "next/navigation";
const metaDesc =
"Explore the latest insights, news, and resources on the Dynamic Realty blog. Read our articles today.";
@ -14,7 +17,12 @@ export async function generateMetadata(): Promise<Metadata> {
return metadata;
}
export default function BlogDetail() {
export default async function BlogDetail(props: { params: Promise<{ slug: string }> }) {
const params = await props.params;
const blog = await fetchBlogDetail(params.slug);
if (!blog) return notFound();
return (
<>
<HeroImage />
@ -25,10 +33,7 @@ export default function BlogDetail() {
<div className="col-lg-8">
<article className="blog-post-solo">
<div className="blog-post-solo-part">
<p>
Showcasing a warm, traditional-style exterior and the highest caliber of contemporary European
finishes throughout, towering glass doors open to grand-scale living spaces.
</p>
<RichText data={blog.data.content} />
</div>
<div className="blog-post-solo-footer">
@ -36,7 +41,7 @@ export default function BlogDetail() {
<ul className="blog-post-solo-footer-list">
<li>
<span className="icon mdi mdi-clock"></span>
<a href="#">February 10, 2021</a>
<a href="#">{blog.createdAt}</a>
</li>
</ul>
</div>
@ -116,22 +121,18 @@ export default function BlogDetail() {
<div className="pdl-xl-40">
<div className="row row-60">
<div className="col-md-6 col-lg-12">
<form className="form-lg rd-search rd-search-classic">
<form action="/blog" className="form-lg rd-search rd-search-classic">
<div className="form-wrap">
<label className="form-label" htmlFor="rd-search-form-input">
Search the blog...
</label>
<input
className="form-input"
id="rd-search-form-input"
type="text"
name="s"
autoComplete="off"
placeholder="Search blog..."
/>
</div>
<button className="rd-search-submit" type="submit">
{" "}
</button>
<button className="rd-search-submit" type="submit"></button>
</form>
</div>
<div className="col-md-6 col-lg-12">

8
src/app/(main)/blog/page.tsx
View File

@ -14,8 +14,8 @@ export async function generateMetadata(): Promise<Metadata> {
return metadata;
}
export default async function Blog({ searchParams }: { searchParams?: Promise<{ s?: string }> }) {
const params = await searchParams;
export default async function Blog(props: { searchParams?: Promise<{ s?: string }> }) {
const searchParams = await props?.searchParams;
return (
<>
@ -32,14 +32,14 @@ export default async function Blog({ searchParams }: { searchParams?: Promise<{
type="text"
name="s"
autoComplete="off"
defaultValue={params?.s}
defaultValue={searchParams?.s}
/>
</div>
<button className="rd-search-submit" type="submit"></button>
</form>
</div>
<ListOfBlog searchKeyword={params?.s} />
<ListOfBlog searchKeyword={searchParams?.s} />
</div>
</section>
</>

1
src/app/(main)/globals.css
View File

@ -32,6 +32,7 @@
--color-colorContactForm: var(--color-colorExt50);
--color-colorText1: var(--color-colorExt10);
--color-colorText2: var(--color-colorExt20);
--color-colorLoaderBackground: var(--color-colorExt20);
}
@layer components {

6
src/components/blogs/CardBlog.tsx
View File

@ -7,11 +7,13 @@ type CardBlogProps = {
};
export default function CardBlog({ data }: CardBlogProps) {
const linkDetail = `/blog/${data.slug}`;
return (
<div>
<article className="post-default">
<div className="h-64 relative">
<Link href="#">
<Link href={linkDetail}>
<Image src={data.img?.url ?? ""} alt={data.img?.alt ?? ""} fill />
</Link>
</div>
@ -27,7 +29,7 @@ export default function CardBlog({ data }: CardBlogProps) {
</div>
<div className="post-default-time">
<span className="icon mdi mdi-clock"></span>
<a href="#">{data.posted_at}</a>
<Link href={linkDetail}>{data.posted_at}</Link>
</div>
</div>
</article>

2
src/components/blogs/ListOfBlog.tsx
View File

@ -1,6 +1,6 @@
"use client";
import Loader from "@/components/Loader";
import Loader from "@/components/loaders/Loader";
import { useBlogQuery } from "@/services/hooks/blog";
import { useEffect, useRef } from "react";
import CardBlog from "./CardBlog";

0
src/components/Loader.tsx → src/components/loaders/Loader.tsx
View File

9
src/components/loaders/LoaderFixed.tsx Normal file
View File

@ -0,0 +1,9 @@
import Loader from "./Loader";
export default function LoaderFixed() {
return (
<div className="fixed top-0 left-0 flex justify-center items-center w-screen h-screen bg-colorLoaderBackground z-50">
<Loader />
</div>
);
}

12
src/services/payload/blog.ts
View File

@ -1,7 +1,9 @@
import payloadConfig from "@/payload.config";
import { BlogData } from "@/schema/blog";
import { FetchBlogParams } from "@/schema/services/blog";
import { formatDate } from "@/utils/datetime";
import { getRandomNumber } from "@/utils/general";
import { sanitizeBlogContentIntoStringPreview } from "@/utils/sanitize";
import { getPayload, Where } from "payload";
export async function fetchBlog({ page, search = "", categoryId, tagId }: FetchBlogParams = {}) {
@ -71,11 +73,13 @@ export async function fetchBlogSuggestion() {
limit: limitPerPage,
});
const formattedData = blogDataQuery.docs.map((item) => {
const formattedData: BlogData[] = blogDataQuery.docs.map((item) => {
return {
...item,
imgFormatted: typeof item.img !== "number" ? { url: item?.img?.url ?? "", alt: item.img.alt } : undefined,
createdAtFormatted: formatDate(item.createdAt),
slug: item.slug,
title: item.title,
description: sanitizeBlogContentIntoStringPreview(item.content),
img: typeof item.img !== "number" ? { url: item?.img?.url ?? "", alt: item.img.alt } : undefined,
posted_at: formatDate(item.createdAt),
};
});

2
src/utils/datetime.ts
View File

@ -1,5 +1,5 @@
import dayjs from "dayjs";
export function formatDate(iso: string, format: string = "MMM, D YYYY") {
export function formatDate(iso: string, format: string = "MMMM DD, YYYY") {
return dayjs(iso).format(format);
}