hamed
eb83762016
- 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.
90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
"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";
|
|
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);
|
|
|
|
useEffect(() => {
|
|
const fetchBlogs = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const params = {
|
|
page: page,
|
|
limit: 12,
|
|
};
|
|
if (selectedTag) {
|
|
params.tag = selectedTag;
|
|
}
|
|
// backend با city_id پستهای آن شهر «و» پستهای سراسری را برمیگرداند
|
|
if (cityId) {
|
|
params.city_id = cityId;
|
|
}
|
|
const response = await request.getBlogs(params);
|
|
setBlogs((response?.data || []).map(normalizeBlog));
|
|
setTotalPages(response?.meta?.totalPages || 1);
|
|
} catch (error) {
|
|
console.error("Error fetching blogs:", error);
|
|
setBlogs([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchBlogs();
|
|
}, [page, selectedTag, cityId]);
|
|
|
|
const handlePageChange = (event, value) => {
|
|
setPage(value);
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
};
|
|
|
|
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
|
|
selectedTag={selectedTag}
|
|
onTagChange={handleTagChange}
|
|
cityId={cityId}
|
|
/>
|
|
<Head />
|
|
<LatestArticles
|
|
blogs={blogs}
|
|
page={page}
|
|
totalPages={totalPages}
|
|
onPageChange={handlePageChange}
|
|
isLoading={isLoading}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BlogsPage;
|