hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement blog fetching and pagination in BlogsPage component

Browse Source
This commit is contained in:
hamed
2025-11-19 10:55:26 +03:30
parent 4651ae534d
commit 235a64c378
6 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blogs/page.js
+2 -8
View File
@@ -1,16 +1,10 @@
import BlogsPage from "@/components/blogs"; import BlogsPage from "@/components/blogs";
import Layout from "@/components/layout/StLayout"; import Layout from "@/components/layout/StLayout";
import { fetchReq } from "@/lib/req";
export default async function Blogs() {
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const response = await fetchReq(`${API_URL}/api/v1/blogs`);
const blogs = response.blogs;
export default function Blogs() {
return ( return (
<Layout name="/blogs"> <Layout name="/blogs">
<BlogsPage blogs={blogs} /> <BlogsPage />
</Layout> </Layout>
); );
} }
components/blogs/index.js
+42 -2
View File
@@ -1,15 +1,55 @@
"use client"; "use client";
import { useState, useEffect } from "react";
import Head from "./Head"; import Head from "./Head";
import Title from "./title"; import Title from "./title";
import LatestArticles from "./latestArticles"; import LatestArticles from "./latestArticles";
import { request } from "@/services/response";
function BlogsPage() {
const [blogs, setBlogs] = useState([]);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchBlogs = async () => {
try {
setIsLoading(true);
const params = {
page: page,
limit: 10,
};
const response = await request.getBlogs(params);
setBlogs(response.blogs || []);
setTotalPages(response.page?.totalPages || 1);
} catch (error) {
console.error("Error fetching blogs:", error);
setBlogs([]);
} finally {
setIsLoading(false);
}
};
fetchBlogs();
}, [page]);
const handlePageChange = (event, value) => {
setPage(value);
window.scrollTo({ top: 0, behavior: "smooth" });
};
function BlogsPage({ blogs }) {
return ( return (
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]"> <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
<Title /> <Title />
<Head /> <Head />
<LatestArticles blogs={blogs} /> <LatestArticles
blogs={blogs}
page={page}
totalPages={totalPages}
onPageChange={handlePageChange}
isLoading={isLoading}
/>
</div> </div>
); );
} }
components/blogs/latestArticles/Article.js
+17 -11
View File
@@ -2,16 +2,20 @@ import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text"; import TextLoading from "@/app/component/loading/Text";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { convertTimestampToJalali } from "@/helper";
function Article({ data }) { function Article({ data }) {
const imageSrc = data.images?.[0]?.url || "/assets/images/default-blog.jpg";
const createdDate = data.created ? convertTimestampToJalali(data.created) : "";
return ( return (
<li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]"> <li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
<CustomLoading width="full" height={200}> <CustomLoading width="full" height={200}>
<Link href={`/blog/${data.uuid}`}> <Link href={`/blog/${data.uuid}`}>
<Image <Image
className="w-full" className="w-full h-[217px] object-cover"
alt="article-img" alt={data.title || "article-img"}
src={data.src} src={imageSrc}
height={217} height={217}
width={392} width={392}
/> />
@@ -20,22 +24,24 @@ function Article({ data }) {
<div className="p-[12px] md:p-[14px] lg:p-[16px]"> <div className="p-[12px] md:p-[14px] lg:p-[16px]">
<TextLoading width={150} height={18}> <TextLoading width={150} height={18}>
<Link href={`/blog/${data.uuid}`}> <Link href={`/blog/${data.uuid}`}>
<h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold"> <h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold line-clamp-2">
{data.title} {data.title}
</h1> </h1>
</Link> </Link>
</TextLoading> </TextLoading>
<div className="flex items-center justify-start gap-[35px]"> <div className="flex items-center justify-start gap-[16px]">
<TextLoading width={100} height={18}> <TextLoading width={100} height={18}>
<p className="text-[#9B9B9B] text-[14px] font-medium"> <p className="text-[#9B9B9B] text-[14px] font-medium">
تاریخ انتشار: {data.date_of_release} {data.author && `نویسنده: ${data.author}`}
</p>
</TextLoading>
<TextLoading width={110} height={18}>
<p className="text-[#9B9B9B] text-[14px] font-medium">
زمان مطالعه: {data.time}
</p> </p>
</TextLoading> </TextLoading>
{createdDate && (
<TextLoading width={110} height={18}>
<p className="text-[#9B9B9B] text-[14px] font-medium">
{createdDate}
</p>
</TextLoading>
)}
</div> </div>
</div> </div>
</li> </li>
components/blogs/latestArticles/index.js
+27 -9
View File
@@ -1,20 +1,38 @@
import Article from "./Article"; import Article from "./Article";
import Pagination from "@/app/component/Pagination"; import Pagination from "@/app/component/Pagination";
function LatestArticles({ blogs }) { function LatestArticles({ blogs, page, totalPages, onPageChange, isLoading }) {
return ( return (
<div> <div>
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]"> <p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
جدیدترین مقاله ها جدیدترین مقاله ها
</p> </p>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]"> {isLoading ? (
{blogs.map((item) => ( <div className="flex justify-center items-center min-h-[400px]">
<Article data={item} key={item.uuid} /> <p className="text-[#9B9B9B] text-[16px]">در حال بارگذاری...</p>
))} </div>
</ul> ) : blogs && blogs.length > 0 ? (
<div className="mt-[56px] flex justify-center"> <>
<Pagination list={blogs} itemsPerPage={12} /> <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
</div> {blogs.map((item) => (
<Article data={item} key={item.uuid} />
))}
</ul>
{totalPages > 1 && (
<div className="mt-[56px] flex justify-center">
<Pagination
page={page}
totalPages={totalPages}
onPageChange={onPageChange}
/>
</div>
)}
</>
) : (
<div className="flex justify-center items-center min-h-[400px]">
<p className="text-[#9B9B9B] text-[16px]">مقاله‌ای یافت نشد</p>
</div>
)}
</div> </div>
); );
} }
next.config.js
+11 -1
View File
@@ -8,7 +8,17 @@ const nextConfig = {
missingSuspenseWithCSRBailout: false, missingSuspenseWithCSRBailout: false,
}, },
images: { images: {
domains: ["back-dev.clinic-pro.ir"], unoptimized: true,
remotePatterns: [
{
protocol: 'https',
hostname: 'back-dev.clinic-pro.ir',
},
{
protocol: 'https',
hostname: 'clinic-pro-back.ddev.site',
},
],
}, },
env: { env: {
// Make DEV_MODE available to the application // Make DEV_MODE available to the application
services/response.js
+7
View File
@@ -97,4 +97,11 @@ export const request = {
}), }),
getDoctorAddress: (location_id) => getDoctorAddress: (location_id) =>
api.get(`api/v1/clinic-pro/doctor-address/${location_id}`, removeTokenHead), api.get(`api/v1/clinic-pro/doctor-address/${location_id}`, removeTokenHead),
getBlogs: (params) =>
api.get("api/v1/blogs", {
params,
headers: {
Authorization: "",
},
}),
}; };