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.
2026-07-29 14:23:37 +03:30
parent 533449c504
commit eb83762016
13 changed files with 714 additions and 65 deletions
@@ -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}