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

refactor: enhance blog functionality with related blogs fetching, improved loading states, and tag filtering

Browse Source
This commit is contained in:
hamed
2025-11-19 11:32:09 +03:30
parent 235a64c378
commit e26d342c90
10 changed files with 251 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/[slug]/page.js
+9 -2
View File
@@ -6,11 +6,18 @@ async function Blog({ params: { slug } }) {
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const blog = await fetchReq(`${API_URL}/api/v1/blog/${slug}`);
const blogs = await fetchReq(`${API_URL}/api/v1/blogs`);
// Get related blogs based on first tag
let relatedBlogs = [];
if (blog?.tag?.[0]?.id) {
const tagId = blog.tag[0].id;
const relatedResponse = await fetchReq(`${API_URL}/api/v1/blogs?page=1&limit=12&tag=${tagId}`);
relatedBlogs = relatedResponse?.blogs || [];
}
return (
<Layout>
<BlogPage blog={blog} blogs={blogs.blogs} />
<BlogPage blog={blog} blogs={relatedBlogs} />
</Layout>
);
}
components/blog/detail/Caption.js
+12 -22
View File
@@ -1,33 +1,23 @@
import Image from "next/image";
import React from "react";
function Caption({ data }) {
const imageUrl = data?.images?.[0]?.url;
return (
<>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data?.cover_first}
alt="cover-blog"
height={570}
width={808}
/>
<div>
{imageUrl && imageUrl.trim() !== "" && (
<img
className="rounded-[8px] overflow-hidden w-full object-cover"
src={imageUrl}
alt={data?.title || "blog cover"}
/>
)}
{data?.body?.value && (
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: "data?.caption" }}
dangerouslySetInnerHTML={{ __html: data.body.value }}
/>
</div>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data?.cover_second}
alt="cover-blog"
height={570}
width={808}
/>
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: "data?.caption" }}
/>
)}
</>
);
}
components/blog/detail/index.js
+1 -1
View File
@@ -7,7 +7,7 @@ function Detail({ data }) {
<div className="w-full lg:w-[68%]">
<Caption data={data} />
<SocialMedia />
<CommentUser data={data} loading={false} />
{/* <CommentUser data={data} loading={false} /> */}
</div>
);
}
components/blog/head/index.js
+34 -21
View File
@@ -1,39 +1,52 @@
import { convertTimestampToJalali } from "@/helper";
function Head({ data }) {
const firstTag = data?.tag?.[0];
const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
return (
<div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
بلاگ {">"}
</p>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
پوست و مو {">"}
</p>
{firstTag && (
<>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
{firstTag.name} {">"}
</p>
</>
)}
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
روش های خانگی محافظت از پوست در تابستان
{data?.title}
</p>
</div>
<div>
<h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
روش های خانگی محافظت از پوست در تابستان
{data?.title}
</h1>
</div>
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
تاریخ انتشار:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.date_of_release}
</p>
</div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
زمان مطالعه:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.time}
</p>
</div>
{data?.author && (
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
نویسنده:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data.author}
</p>
</div>
)}
{createdDate && (
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
تاریخ انتشار:
</p>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{createdDate}
</p>
</div>
)}
</div>
</div>
);
components/blog/relatedContent/Item.js
+23 -14
View File
@@ -1,30 +1,39 @@
import CircularLoading from "@/app/component/loading/Circular";
import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";
import { convertTimestampToJalali } from "@/helper";
function Item({ data, idx, loading }) {
const imageUrl = data?.images?.[0]?.url;
const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
return (
<li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
<CustomLoading width={80} height={72} loading={loading}>
<Link href={`/blog/${data.id}`}>
<Image
className="
min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px]
min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px]
<Link href={`/blog/${data.uuid}`}>
{imageUrl && imageUrl.trim() !== "" ? (
<img
className="
w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px]
h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px]
rounded-[8px] overflow-hidden object-cover
"
src={data.src}
alt="article"
height={88}
width={97}
/>
src={imageUrl}
alt={data.title || "article"}
/>
) : (
<div className="
w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px]
h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px]
rounded-[8px] overflow-hidden bg-gray-200
"></div>
)}
</Link>
</CustomLoading>
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
<TextLoading width={150} height={18} loading={loading}>
<Link href={`/blog/${data.id}`}>
<Link href={`/blog/${data.uuid}`}>
<h2 className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
{data.title}
</h2>
@@ -32,11 +41,11 @@ function Item({ data, idx, loading }) {
</TextLoading>
<TextLoading width={110} height={18} loading={loading}>
<p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
تاریخ انتشار: {data.date_of_release}
{createdDate && `تاریخ انتشار: ${createdDate}`}
</p>
</TextLoading>
</div>
{data.id > idx + 1 && (
{idx > 0 && (
<span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
)}
</li>
components/blogs/Head.js
+91 -57
View File
@@ -1,76 +1,110 @@
"use client";
import { useState, useEffect } from "react";
import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import Image from "next/image";
import Link from "next/link";
import { request } from "@/services/response";
function Head() {
const [topBlogs, setTopBlogs] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchTopBlogs = async () => {
try {
setIsLoading(true);
const response = await request.getTopBlogs();
setTopBlogs(response || []);
} catch (error) {
console.error("Error fetching top blogs:", error);
setTopBlogs([]);
} finally {
setIsLoading(false);
}
};
fetchTopBlogs();
}, []);
if (isLoading || topBlogs.length === 0) {
return null;
}
const [firstBlog, secondBlog, thirdBlog, fourthBlog] = topBlogs;
return (
<>{/*
<div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
<Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
<CustomLoading width="full" height={400}>
<Image
src="/assets/images/head-blogs-1.png"
width={600}
height={424}
alt="head blog"
/>
</CustomLoading>
<TextLoading width={150} height={20}>
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
روش های خانگی محافظت از پوست در تابستان
</p>
</TextLoading>
</Link>
<div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading width="full" height={180}>
<Image
src="/assets/images/head-blogs-2.png"
width={600}
height={424}
alt="head blog"
/>
</CustomLoading>
<TextLoading width={150} height={20}>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
فواید نوشیدن آب برای سلامتی
</p>
</TextLoading>
</Link>
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading width="full" height={180}>
<Image
src="/assets/images/head-blogs-3.png"
width={600}
height={424}
alt="head blog"
/>
</CustomLoading>
<TextLoading width={150} height={20}>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
راهکارهای ساده برای درمان سر درد
</p>
</TextLoading>
</Link>
</div>
<Link href="#" className="w-full cover-head-blogs">
<CustomLoading width="full" height={180}>
<Image
src="/assets/images/head-blogs-4.png"
width={600}
height={424}
alt="head blog"
{firstBlog && (
<Link href={`/blog/${firstBlog.uuid}`} className="w-full lg:w-1/2 cover-head-blogs">
<CustomLoading width="full" height={400}>
<img
src={firstBlog.images?.[0]?.url || "/assets/images/head-blogs-1.png"}
alt={firstBlog.title || "head blog"}
className="w-full h-full object-cover"
/>
</CustomLoading>
<TextLoading width={150} height={20}>
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
تغذیه مناسب برای کاهش فشار خون
{firstBlog.title}
</p>
</TextLoading>
</Link>
)}
<div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
{secondBlog && (
<Link href={`/blog/${secondBlog.uuid}`} className="w-full cover-head-blogs">
<CustomLoading width="full" height={180}>
<img
src={secondBlog.images?.[0]?.url || "/assets/images/head-blogs-2.png"}
alt={secondBlog.title || "head blog"}
className="w-full h-full object-cover"
/>
</CustomLoading>
<TextLoading width={150} height={20}>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
{secondBlog.title}
</p>
</TextLoading>
</Link>
)}
{thirdBlog && (
<Link href={`/blog/${thirdBlog.uuid}`} className="w-full cover-head-blogs">
<CustomLoading width="full" height={180}>
<img
src={thirdBlog.images?.[0]?.url || "/assets/images/head-blogs-3.png"}
alt={thirdBlog.title || "head blog"}
className="w-full h-full object-cover"
/>
</CustomLoading>
<TextLoading width={150} height={20}>
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
{thirdBlog.title}
</p>
</TextLoading>
</Link>
)}
</div>
{fourthBlog && (
<Link href={`/blog/${fourthBlog.uuid}`} className="w-full cover-head-blogs">
<CustomLoading width="full" height={180}>
<img
src={fourthBlog.images?.[0]?.url || "/assets/images/head-blogs-4.png"}
alt={fourthBlog.title || "head blog"}
className="w-full h-full object-cover"
/>
</CustomLoading>
<TextLoading width={150} height={20}>
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
{fourthBlog.title}
</p>
</TextLoading>
</Link>
)}
</div>
</div>
*/}</>
);
}
components/blogs/index.js
+12 -3
View File
@@ -11,6 +11,7 @@ function BlogsPage() {
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
const [isLoading, setIsLoading] = useState(true);
const [selectedTag, setSelectedTag] = useState(null);
useEffect(() => {
const fetchBlogs = async () => {
@@ -18,8 +19,11 @@ function BlogsPage() {
setIsLoading(true);
const params = {
page: page,
limit: 10,
limit: 12,
};
if (selectedTag) {
params.tag = selectedTag;
}
const response = await request.getBlogs(params);
setBlogs(response.blogs || []);
setTotalPages(response.page?.totalPages || 1);
@@ -32,16 +36,21 @@ function BlogsPage() {
};
fetchBlogs();
}, [page]);
}, [page, selectedTag]);
const handlePageChange = (event, value) => {
setPage(value);
window.scrollTo({ top: 0, behavior: "smooth" });
};
const handleTagChange = (tagUuid) => {
setSelectedTag(tagUuid);
setPage(1);
};
return (
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
<Title />
<Title onTagChange={handleTagChange} />
<Head />
<LatestArticles
blogs={blogs}
components/blogs/title/index.js
+41 -9
View File
@@ -1,21 +1,53 @@
"use client";
import { useState } from "react";
import { useState, useEffect } from "react";
import ItemTitle from "./ItemTitle";
import { request } from "@/services/response";
const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
function Title() {
function Title({ onTagChange }) {
const [activeBtn, setActiveBtn] = useState(0);
const [tags, setTags] = useState([]);
useEffect(() => {
const fetchTags = async () => {
try {
const params = {
page: 1,
limit: 100,
};
const response = await request.getBlogTags(params);
setTags(response.data || []);
} catch (error) {
console.error("Error fetching tags:", error);
setTags([]);
}
};
fetchTags();
}, []);
const handleTagClick = (idx, tagId) => {
setActiveBtn(idx);
if (onTagChange) {
onTagChange(tagId);
}
};
return (
<ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
{listTitle.map((name, idx) => (
<ItemTitle
setActiveBtn={() => handleTagClick(0, null)}
activeBtn={activeBtn}
name="همه"
idx={0}
key="all"
/>
{tags.map((tag, idx) => (
<ItemTitle
setActiveBtn={setActiveBtn}
setActiveBtn={() => handleTagClick(idx + 1, tag.id)}
activeBtn={activeBtn}
name={name}
idx={idx}
key={idx}
name={tag.name}
idx={idx + 1}
key={tag.uuid}
/>
))}
</ul>
lib/req.js
+9 -1
View File
@@ -1,8 +1,16 @@
import axios from "axios";
import https from "https";
// Create axios instance with SSL verification disabled for development
const axiosInstance = axios.create({
httpsAgent: new https.Agent({
rejectUnauthorized: false
})
});
export const fetchReq = async (url, headers) => {
try {
const response = await axios.get(url, headers);
const response = await axiosInstance.get(url, headers);
return response.data;
} catch (error) {
console.error("fetchReq error:", error.message);
services/response.js
+19
View File
@@ -104,4 +104,23 @@ export const request = {
Authorization: "",
},
}),
getBlogTags: (params) =>
api.get("api/v1/categorys/tag", {
params,
headers: {
Authorization: "",
},
}),
getTopBlogs: () =>
api.get("api/v1/blogs/top", {
headers: {
Authorization: "",
},
}),
getSingleBlog: (uuid) =>
api.get(`api/v1/blog/${uuid}`, {
headers: {
Authorization: "",
},
}),
};