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
@@ -1,33 +1,23 @@
-import Image from "next/image";
 import React from "react";

 function Caption({ data }) {
+  const imageUrl = data?.images?.[0]?.url;
+
  return (
    <>
-      <Image
-        className="rounded-[8px] overflow-hidden w-full"
-        src={data?.cover_first}
-        alt="cover-blog"
-        height={570}
-        width={808}
-      />
-      <div>
+      {imageUrl && imageUrl.trim() !== "" && (
+        <img
+          className="rounded-[8px] overflow-hidden w-full object-cover"
+          src={imageUrl}
+          alt={data?.title || "blog cover"}
+        />
+      )}
+      {data?.body?.value && (
        <div
          className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-          dangerouslySetInnerHTML={{ __html: "data?.caption" }}
+          dangerouslySetInnerHTML={{ __html: data.body.value }}
        />
-      </div>
-      <Image
-        className="rounded-[8px] overflow-hidden w-full"
-        src={data?.cover_second}
-        alt="cover-blog"
-        height={570}
-        width={808}
-      />
-      <div
-        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-        dangerouslySetInnerHTML={{ __html: "data?.caption" }}
-      />
+      )}
    </>
  );
 }
@@ -7,7 +7,7 @@ function Detail({ data }) {
    <div className="w-full lg:w-[68%]">
      <Caption data={data} />
      <SocialMedia />
-      <CommentUser data={data} loading={false} />
+      {/* <CommentUser data={data} loading={false} /> */}
    </div>
  );
 }
@@ -1,39 +1,52 @@
+import { convertTimestampToJalali } from "@/helper";
+
 function Head({ data }) {
+  const firstTag = data?.tag?.[0];
+  const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
+
  return (
    <div>
      <div className="flex items-center justify-start gap-1">
        <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
          بلاگ {">"}
        </p>
-        <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-          پوست و مو {">"}
-        </p>
+        {firstTag && (
+          <>
+            <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+              {firstTag.name} {">"}
+            </p>
+          </>
+        )}
        <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-          روش های خانگی محافظت از پوست در تابستان
+          {data?.title}
        </p>
      </div>
      <div>
        <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
-          روش های خانگی محافظت از پوست در تابستان
+          {data?.title}
        </h1>
      </div>
      <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
-        <div className="flex items-center justify-start gap-1">
-          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
-            تاریخ انتشار:
-          </p>
-          <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
-            {data?.date_of_release}
-          </p>
-        </div>
-        <div className="flex items-center justify-start gap-1">
-          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
-            زمان مطالعه:
-          </p>
-          <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
-            {data?.time}
-          </p>
-        </div>
+        {data?.author && (
+          <div className="flex items-center justify-start gap-1">
+            <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
+              نویسنده:
+            </p>
+            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+              {data.author}
+            </p>
+          </div>
+        )}
+        {createdDate && (
+          <div className="flex items-center justify-start gap-1">
+            <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
+              تاریخ انتشار:
+            </p>
+            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+              {createdDate}
+            </p>
+          </div>
+        )}
      </div>
    </div>
  );
@@ -1,30 +1,39 @@
 import CircularLoading from "@/app/component/loading/Circular";
 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 { convertTimestampToJalali } from "@/helper";

 function Item({ data, idx, loading }) {
+  const imageUrl = data?.images?.[0]?.url;
+  const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
+
  return (
    <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
      <CustomLoading width={80} height={72} loading={loading}>
-        <Link href={`/blog/${data.id}`}>
-          <Image
-            className="
-                        min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
-                        min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
+        <Link href={`/blog/${data.uuid}`}>
+          {imageUrl && imageUrl.trim() !== "" ? (
+            <img
+              className="
+                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px] 
+                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] 
                        rounded-[8px] overflow-hidden object-cover
                    "
-            src={data.src}
-            alt="article"
-            height={88}
-            width={97}
-          />
+              src={imageUrl}
+              alt={data.title || "article"}
+            />
+          ) : (
+            <div className="
+                        w-[64px] sm:w-[73px] md:w-[85px] lg:w-[97px] 
+                        h-[56px] sm:h-[64px] md:h-[75px] lg:h-[88px] 
+                        rounded-[8px] overflow-hidden bg-gray-200
+                    "></div>
+          )}
        </Link>
      </CustomLoading>
      <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
        <TextLoading width={150} height={18} loading={loading}>
-          <Link href={`/blog/${data.id}`}>
+          <Link href={`/blog/${data.uuid}`}>
            <h2 className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
              {data.title}
            </h2>
@@ -32,11 +41,11 @@ function Item({ data, idx, loading }) {
        </TextLoading>
        <TextLoading width={110} height={18} loading={loading}>
          <p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
-            تاریخ انتشار: {data.date_of_release}
+            {createdDate && `تاریخ انتشار: ${createdDate}`}
          </p>
        </TextLoading>
      </div>
-      {data.id > idx + 1 && (
+      {idx > 0 && (
        <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
      )}
    </li>