From d69e9ef8975bd906e1a3ce89da3a702a7ae3c6b6 Mon Sep 17 00:00:00 2001
From: sina_sajjadi <alisina.a.a50182@gmail.com@google.com>
Date: Mon, 30 Sep 2024 12:18:01 +0330
Subject: [PATCH] blog bugs fixed

---
 src/app/blog/[...slug]/page.tsx | 51 ++++++++++++++++++++-------------
 src/shared/Badge.tsx            |  4 +--
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx
index 25aa5af..0dfa701 100644
--- a/src/app/blog/[...slug]/page.tsx
+++ b/src/app/blog/[...slug]/page.tsx
@@ -27,11 +27,19 @@ const Page = ({
 }) => {
   const [blog, setBlog] = useState();
 
+  const [posts, setPosts] = useState([]);
+
+  useEffect(() => {
+    axiosInstance.get("/api/blogs/").then((response) => {
+      setPosts(response.data.results);
+    });
+  }, []);
+
   useEffect(() => {
     axiosInstance.get(`/api/blogs/${params.slug[0]}/`).then((response) => {
       setBlog(response.data);
     });
-  });
+  }, []);
   const renderHeader = () => {
     return (
       <header className="container rounded-xl">
@@ -96,22 +104,19 @@ const Page = ({
   const renderTags = () => {
     console.log(blog?.tags[0].name);
 
-    return(
-      
-      (<div className="max-w-screen-md mx-auto flex flex-wrap">
-      {blog?.tags.map((item) => (
-      
-      
+    return (
+      <div className="max-w-screen-md mx-auto flex flex-wrap">
+        {blog?.tags.map((item) => (
           <a
+            key={item.id}
             className="nc-Tag inline-block bg-white text-sm text-neutral-600 dark:text-neutral-300 py-2 rounded-lg border border-neutral-100  md:px-4 dark:bg-neutral-700 dark:border-neutral-700 hover:border-neutral-200 dark:hover:border-neutral-6000 mr-2 mb-2"
             href={item.slug}
           >
             {item.name}
           </a>
-      
-    ))}
-        </div>)
-)
+        ))}
+      </div>
+    );
   };
 
   const renderCommentForm = () => {
@@ -155,6 +160,7 @@ const Page = ({
       </div>
     );
   };
+  console.log(posts);
 
   const renderPostRelated = (post: PostDataType) => {
     return (
@@ -162,10 +168,10 @@ const Page = ({
         key={post.id}
         className="relative aspect-w-3 aspect-h-4 rounded-3xl overflow-hidden group"
       >
-        <Link href={post.href as Route} />
+        <Link href={`blog/${post.slug}`} />
         <Image
           className="object-cover transform group-hover:scale-105 transition-transform duration-300"
-          src={post.featuredImage}
+          src={post.cover}
           fill
           sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 50vw"
           alt=""
@@ -174,20 +180,21 @@ const Page = ({
           <div className="absolute bottom-0 inset-x-0 h-1/2 bg-gradient-to-t from-black"></div>
         </div>
         <div className="flex flex-col justify-end items-start text-xs text-neutral-300 space-y-2.5 p-4">
-          <Badge name="Categories" />
           <h2 className="block text-lg font-semibold text-white ">
             <span className="line-clamp-2">{post.title}</span>
           </h2>
 
           <div className="flex">
-            <span className="block text-neutral-200 hover:text-white font-medium truncate">
+            {/* <span className="block text-neutral-200 hover:text-white font-medium truncate">
               {post.author.displayName}
             </span>
-            <span className="mx-1.5 font-medium">·</span>
-            <span className="font-normal truncate">{post.date}</span>
+            <span className="mx-1.5 font-medium">·</span> */}
+            <span className="font-normal truncate">
+              {post.created_at.split("T")[0]}
+            </span>
           </div>
         </div>
-        <Link href={post.href as Route} />
+        <Link href={`blog/${post.slug}`} />
       </div>
     );
   };
@@ -211,8 +218,12 @@ const Page = ({
         <div className="container ">
           <h2 className="text-3xl font-semibold">Related posts</h2>
           <div className="mt-10 grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
-            {/*  */}
-            {DEMO_POSTS.filter((_, i) => i < 4).map(renderPostRelated)}
+            {console.log(params.slug[0], posts)}
+            {posts
+              .filter((_, i) => {
+                return _?.slug !== params.slug[0];
+              })
+              .map((item, i) => i < 4 && renderPostRelated(item))}
             {/*  */}
           </div>
         </div>
diff --git a/src/shared/Badge.tsx b/src/shared/Badge.tsx
index dee49a0..3b80b1b 100644
--- a/src/shared/Badge.tsx
+++ b/src/shared/Badge.tsx
@@ -38,7 +38,7 @@ const Badge: FC<BadgeProps> = ({
         }`;
     }
   };
-  const getStatus = (hasHover = true) => {
+  const getStatus = () => {
     switch (color) {
       case "SOLD_OUT":
         return `Sold Out`;
@@ -51,7 +51,7 @@ const Badge: FC<BadgeProps> = ({
         return `Booked`;
 
       default:
-        return `None`;
+        return color;
     }
   };