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

2025-11-19 11:32:09 +03:30
parent 235a64c378
commit e26d342c90
10 changed files with 251 additions and 130 deletions
@@ -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}