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

components/blogs/Head.js

@@ -1,76 +1,110 @@
+"use client";
+import { useState, useEffect } from "react";
 import CustomLoading from "@/app/component/loading/Custom";
 import TextLoading from "@/app/component/loading/Text";
-import Image from "next/image";
 import Link from "next/link";
+import { request } from "@/services/response";
 
 function Head() {
+  const [topBlogs, setTopBlogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchTopBlogs = async () => {
+      try {
+        setIsLoading(true);
+        const response = await request.getTopBlogs();
+        setTopBlogs(response || []);
+      } catch (error) {
+        console.error("Error fetching top blogs:", error);
+        setTopBlogs([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchTopBlogs();
+  }, []);
+
+  if (isLoading || topBlogs.length === 0) {
+    return null;
+  }
+
+  const [firstBlog, secondBlog, thirdBlog, fourthBlog] = topBlogs;
+
   return (
+    <>{/*
     <div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
-      <Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
-        <CustomLoading width="full" height={400}>
-          <Image
-            src="/assets/images/head-blogs-1.png"
-            width={600}
-            height={424}
-            alt="head blog"
-          />
-        </CustomLoading>
-        <TextLoading width={150} height={20}>
-          <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
-            روش های خانگی محافظت از پوست در تابستان
-          </p>
-        </TextLoading>
-      </Link>
-      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
-        <div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
-          <Link href="#" className="w-full cover-head-blogs">
-            <CustomLoading width="full" height={180}>
-              <Image
-                src="/assets/images/head-blogs-2.png"
-                width={600}
-                height={424}
-                alt="head blog"
-              />
-            </CustomLoading>
-            <TextLoading width={150} height={20}>
-              <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
-                فواید نوشیدن آب برای سلامتی
-              </p>
-            </TextLoading>
-          </Link>
-          <Link href="#" className="w-full cover-head-blogs">
-            <CustomLoading width="full" height={180}>
-              <Image
-                src="/assets/images/head-blogs-3.png"
-                width={600}
-                height={424}
-                alt="head blog"
-              />
-            </CustomLoading>
-            <TextLoading width={150} height={20}>
-              <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
-                راهکارهای ساده برای درمان سر درد
-              </p>
-            </TextLoading>
-          </Link>
-        </div>
-        <Link href="#" className="w-full cover-head-blogs">
-          <CustomLoading width="full" height={180}>
-            <Image
-              src="/assets/images/head-blogs-4.png"
-              width={600}
-              height={424}
-              alt="head blog"
+      {firstBlog && (
+        <Link href={`/blog/${firstBlog.uuid}`} className="w-full lg:w-1/2 cover-head-blogs">
+          <CustomLoading width="full" height={400}>
+            <img
+              src={firstBlog.images?.[0]?.url || "/assets/images/head-blogs-1.png"}
+              alt={firstBlog.title || "head blog"}
+              className="w-full h-full object-cover"
             />
           </CustomLoading>
           <TextLoading width={150} height={20}>
             <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
-              تغذیه مناسب برای کاهش فشار خون
+              {firstBlog.title}
             </p>
           </TextLoading>
         </Link>
+      )}
+      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
+        <div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
+          {secondBlog && (
+            <Link href={`/blog/${secondBlog.uuid}`} className="w-full cover-head-blogs">
+              <CustomLoading width="full" height={180}>
+                <img
+                  src={secondBlog.images?.[0]?.url || "/assets/images/head-blogs-2.png"}
+                  alt={secondBlog.title || "head blog"}
+                  className="w-full h-full object-cover"
+                />
+              </CustomLoading>
+              <TextLoading width={150} height={20}>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  {secondBlog.title}
+                </p>
+              </TextLoading>
+            </Link>
+          )}
+          {thirdBlog && (
+            <Link href={`/blog/${thirdBlog.uuid}`} className="w-full cover-head-blogs">
+              <CustomLoading width="full" height={180}>
+                <img
+                  src={thirdBlog.images?.[0]?.url || "/assets/images/head-blogs-3.png"}
+                  alt={thirdBlog.title || "head blog"}
+                  className="w-full h-full object-cover"
+                />
+              </CustomLoading>
+              <TextLoading width={150} height={20}>
+                <p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
+                  {thirdBlog.title}
+                </p>
+              </TextLoading>
+            </Link>
+          )}
+        </div>
+        {fourthBlog && (
+          <Link href={`/blog/${fourthBlog.uuid}`} className="w-full cover-head-blogs">
+            <CustomLoading width="full" height={180}>
+              <img
+                src={fourthBlog.images?.[0]?.url || "/assets/images/head-blogs-4.png"}
+                alt={fourthBlog.title || "head blog"}
+                className="w-full h-full object-cover"
+              />
+            </CustomLoading>
+            <TextLoading width={150} height={20}>
+              <p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
+                {fourthBlog.title}
+              </p>
+            </TextLoading>
+          </Link>
+        )}
       </div>
     </div>
+    */}</>
   );
 }
 

components/blogs/index.js

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

components/blogs/title/index.js

@@ -1,21 +1,53 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ItemTitle from "./ItemTitle";
+import { request } from "@/services/response";
 
-const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
-
-function Title() {
+function Title({ onTagChange }) {
   const [activeBtn, setActiveBtn] = useState(0);
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const params = {
+          page: 1,
+          limit: 100,
+        };
+        const response = await request.getBlogTags(params);
+        setTags(response.data || []);
+      } catch (error) {
+        console.error("Error fetching tags:", error);
+        setTags([]);
+      }
+    };
+
+    fetchTags();
+  }, []);
+
+  const handleTagClick = (idx, tagId) => {
+    setActiveBtn(idx);
+    if (onTagChange) {
+      onTagChange(tagId);
+    }
+  };
 
   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]">
-      {listTitle.map((name, idx) => (
+      <ItemTitle
+        setActiveBtn={() => handleTagClick(0, null)}
+        activeBtn={activeBtn}
+        name="همه"
+        idx={0}
+        key="all"
+      />
+      {tags.map((tag, idx) => (
         <ItemTitle
-          setActiveBtn={setActiveBtn}
+          setActiveBtn={() => handleTagClick(idx + 1, tag.id)}
           activeBtn={activeBtn}
-          name={name}
-          idx={idx}
-          key={idx}
+          name={tag.name}
+          idx={idx + 1}
+          key={tag.uuid}
         />
       ))}
     </ul>