Refactor blog components for improved tag filtering and related content display
- Added `getBlogTagFacets` API call to fetch blog tags based on city scope. - Updated `BlogsPage` to read selected tag from URL and handle tag changes with URL updates. - Modified `Title` component to display tags from the new API and reflect active tag state. - Enhanced breadcrumb navigation to link categories to their respective pages. - Adjusted related content section to display articles from the same category and fixed layout issues. - Corrected heading hierarchy across various components for better SEO compliance. - Ensured consistent styling and spacing in related content items.
This commit is contained in:
hamed
@@ -6,7 +6,7 @@ import CommentUser from "./commentUser";
|
||||
|
||||
function Detail({ data }) {
|
||||
return (
|
||||
<div className="w-full lg:w-[68%]">
|
||||
<div className="w-full lg:flex-1 lg:min-w-0">
|
||||
<Caption data={data} />
|
||||
<Faq data={data} />
|
||||
<Sources data={data} />
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import Link from "next/link";
|
||||
import { convertTimestampToJalali } from "@/helper";
|
||||
|
||||
const crumbClass =
|
||||
"text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal";
|
||||
|
||||
function Head({ data, cityName }) {
|
||||
const firstTag = data?.tag?.[0];
|
||||
const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
|
||||
@@ -11,29 +14,32 @@ function Head({ data, cityName }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-start gap-1">
|
||||
<Link
|
||||
href="/blogs"
|
||||
className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal hover:text-[#525252]"
|
||||
>
|
||||
<nav
|
||||
aria-label="مسیر"
|
||||
className="flex flex-wrap items-center justify-start gap-1"
|
||||
>
|
||||
<Link href="/blogs" className={`${crumbClass} hover:text-[#525252]`}>
|
||||
بلاگ
|
||||
</Link>
|
||||
<span className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
||||
{">"}
|
||||
</span>
|
||||
{firstTag && (
|
||||
<span className={crumbClass}>{">"}</span>
|
||||
{firstTag?.name && (
|
||||
<>
|
||||
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
||||
{firstTag.name} {">"}
|
||||
</p>
|
||||
{/* دستهبندی خودش یک صفحهٔ مقصد دارد: همان لیست مقالهها فیلترشده. */}
|
||||
<Link
|
||||
href={`/blogs?tag=${encodeURIComponent(firstTag.name)}`}
|
||||
className={`${crumbClass} hover:text-[#525252]`}
|
||||
>
|
||||
{firstTag.name}
|
||||
</Link>
|
||||
<span className={crumbClass}>{">"}</span>
|
||||
</>
|
||||
)}
|
||||
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
||||
<span className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
|
||||
{data?.title}
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
</nav>
|
||||
<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">
|
||||
<h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[30px] font-bold leading-[1.6]">
|
||||
{data?.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ function Item({ data, idx, loading }) {
|
||||
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]">
|
||||
<li className="flex w-full relative items-start justify-start gap-[8px] py-[12px]">
|
||||
<CustomLoading width={80} height={72} loading={loading}>
|
||||
<Link href={`/blog/${data.uuid}`}>
|
||||
<img
|
||||
@@ -19,12 +19,13 @@ function Item({ data, idx, loading }) {
|
||||
/>
|
||||
</Link>
|
||||
</CustomLoading>
|
||||
<div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
|
||||
<div className="flex min-w-0 flex-col gap-[6px] items-start justify-start">
|
||||
<TextLoading width={150} height={18} loading={loading}>
|
||||
<Link href={`/blog/${data.uuid}`}>
|
||||
<h2 className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
|
||||
{/* h3 چون h2 با تیترهای خودِ متن مقاله (.blog-content h2) همرده میشد. */}
|
||||
<h3 className="text-[#3B3B3B] text-[14px] md:text-[15px] font-bold leading-[1.8] line-clamp-2">
|
||||
{data.title}
|
||||
</h2>
|
||||
</h3>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
<TextLoading width={110} height={18} loading={loading}>
|
||||
|
||||
@@ -3,13 +3,15 @@ import UnderlineLG from "@/components/icons/UnderlineLG";
|
||||
import React from "react";
|
||||
import Item from "./Item";
|
||||
|
||||
// عرض ستون ثابت است: با lg:w-fit عرض را بلندترین عنوان تعیین میکرد و با هر
|
||||
// مقاله جابهجا میشد.
|
||||
function RelatedContent({ data, loading }) {
|
||||
return (
|
||||
<div className="p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
|
||||
<div className="p-[12px] w-full lg:w-[320px] lg:shrink-0 md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
|
||||
<AnimationTextHead text="مطالب مرتبط">
|
||||
<UnderlineLG />
|
||||
</AnimationTextHead>
|
||||
<ul className="flex w-full lg:w-fit flex-col justify-start items-start">
|
||||
<ul className="flex w-full flex-col justify-start items-start">
|
||||
{data &&
|
||||
data.length > 0 &&
|
||||
data?.map((item, idx) => (
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Head from "./Head";
|
||||
import Title from "./title";
|
||||
import LatestArticles from "./latestArticles";
|
||||
@@ -8,11 +9,16 @@ import { request } from "@/services/response";
|
||||
import { normalizeBlog } from "@/helper";
|
||||
|
||||
function BlogsPage({ cityId = null }) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
// تگ انتخابی از URL خوانده میشود تا لینک بردکرامب صفحهٔ مقاله، refresh و
|
||||
// اشتراکگذاری همگی یک حالت را بازتولید کنند؛ state داخلی منبع دومِ حقیقت میشد.
|
||||
const selectedTag = searchParams.get("tag") || null;
|
||||
|
||||
const [blogs, setBlogs] = useState([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selectedTag, setSelectedTag] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchBlogs = async () => {
|
||||
@@ -48,14 +54,26 @@ function BlogsPage({ cityId = null }) {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
const handleTagChange = (tagUuid) => {
|
||||
setSelectedTag(tagUuid);
|
||||
const handleTagChange = (tagName) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (tagName) {
|
||||
params.set("tag", tagName);
|
||||
} else {
|
||||
params.delete("tag");
|
||||
}
|
||||
setPage(1);
|
||||
router.replace(params.toString() ? `/blogs?${params}` : "/blogs", {
|
||||
scroll: false,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Title onTagChange={handleTagChange} />
|
||||
<Title
|
||||
selectedTag={selectedTag}
|
||||
onTagChange={handleTagChange}
|
||||
cityId={cityId}
|
||||
/>
|
||||
<Head />
|
||||
<LatestArticles
|
||||
blogs={blogs}
|
||||
|
||||
@@ -24,9 +24,9 @@ function Article({ data }) {
|
||||
<div className="p-[12px] md:p-[14px] lg:p-[16px]">
|
||||
<TextLoading width={150} height={18}>
|
||||
<Link href={`/blog/${data.uuid}`}>
|
||||
<h1 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold line-clamp-2">
|
||||
<h2 className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold line-clamp-2">
|
||||
{data.title}
|
||||
</h1>
|
||||
</h2>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
<div className="flex items-center justify-start gap-[16px]">
|
||||
|
||||
@@ -4,9 +4,9 @@ import Pagination from "@/app/component/Pagination";
|
||||
function LatestArticles({ blogs, page, totalPages, onPageChange, isLoading }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
|
||||
<h1 className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
|
||||
جدیدترین مقاله ها
|
||||
</p>
|
||||
</h1>
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center items-center min-h-[400px]">
|
||||
<p className="text-[#9B9B9B] text-[16px]">در حال بارگذاری...</p>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
|
||||
function ItemTitle({ name, isActive, onSelect }) {
|
||||
return (
|
||||
<li>
|
||||
<Button
|
||||
className={` !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px ${ activeBtn === idx ? "!bg-[#F17732] !text-[#FAFAFA]" : "!bg-[#F5F5F5] !text-[#3B3B3B]" } `}
|
||||
onClick={() => setActiveBtn(idx)}
|
||||
className={` !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px] !whitespace-nowrap ${ isActive ? "!bg-[#F17732] !text-[#FAFAFA]" : "!bg-[#F5F5F5] !text-[#3B3B3B]" } `}
|
||||
onClick={onSelect}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
|
||||
@@ -3,52 +3,42 @@ import { useState, useEffect } from "react";
|
||||
import ItemTitle from "./ItemTitle";
|
||||
import { request } from "@/services/response";
|
||||
|
||||
function Title({ onTagChange }) {
|
||||
const [activeBtn, setActiveBtn] = useState(0);
|
||||
function Title({ selectedTag, onTagChange, cityId }) {
|
||||
const [tags, setTags] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
// Blog tags are stored as names on each blog; build the chip list from
|
||||
// the tag names actually present in published blogs.
|
||||
const response = await request.getBlogs({ page: 1, limit: 50 });
|
||||
const names = (response?.data || []).flatMap((b) =>
|
||||
Array.isArray(b.tags) ? b.tags : []
|
||||
// واژگان کامل تگهای مقالات منتشرشده در scope همین دامنه. استخراج از خودِ
|
||||
// لیست مقالهها ممکن نیست: سقف limit برابر ۵۰ است و مقالهها بیشترند.
|
||||
const response = await request.getBlogTagFacets(
|
||||
cityId ? { city_id: cityId } : {}
|
||||
);
|
||||
const uniqueNames = [...new Set(names)];
|
||||
setTags(uniqueNames.map((name) => ({ name })));
|
||||
setTags(response?.data || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tags:", error);
|
||||
console.error("Error fetching blog tags:", error);
|
||||
setTags([]);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTags();
|
||||
}, []);
|
||||
}, [cityId]);
|
||||
|
||||
const handleTagClick = (idx, tagName) => {
|
||||
setActiveBtn(idx);
|
||||
if (onTagChange) {
|
||||
onTagChange(tagName);
|
||||
}
|
||||
};
|
||||
if (tags.length === 0) return null;
|
||||
|
||||
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]">
|
||||
<ItemTitle
|
||||
setActiveBtn={() => handleTagClick(0, null)}
|
||||
activeBtn={activeBtn}
|
||||
name="همه"
|
||||
idx={0}
|
||||
isActive={!selectedTag}
|
||||
onSelect={() => onTagChange(null)}
|
||||
key="all"
|
||||
/>
|
||||
{tags.map((tag, idx) => (
|
||||
{tags.map((tag) => (
|
||||
<ItemTitle
|
||||
setActiveBtn={() => handleTagClick(idx + 1, tag.name)}
|
||||
activeBtn={activeBtn}
|
||||
name={tag.name}
|
||||
idx={idx + 1}
|
||||
isActive={selectedTag === tag.name}
|
||||
onSelect={() => onTagChange(tag.name)}
|
||||
key={tag.name}
|
||||
/>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user