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
@@ -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