From a0bf166a5a4d65903986bc23c57f42e7f7d6eeb4 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Tue, 5 Jul 2022 12:51:14 +0430
Subject: [PATCH] =?UTF-8?q?=D8=B1=D9=88=DB=8C=20=D8=A7=DB=8C=D9=86=20?=
 =?UTF-8?q?=DA=A9=D8=A7=D8=B1=20=DA=A9=D8=B1=D8=AF=D9=85=20=DA=A9=D9=87=20?=
 =?UTF-8?q?=D8=B3=D8=A7=D8=AC=D8=B3=D8=AA=D8=B4=D9=86=20=D8=A8=D9=84=D8=A7?=
 =?UTF-8?q?=DA=AF=20=D9=87=D8=A7=20=D8=AF=D8=B1=D8=B3=D8=AA=20=DA=A9=D8=A7?=
 =?UTF-8?q?=D8=B1=20=DA=A9=D9=86=D8=AF=20=D8=A7=D9=85=D8=A7=20=D9=86=D8=B4?=
 =?UTF-8?q?=D8=AF:(((=20|30?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Blog/index.js | 67 +++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/views/Blog/index.js b/src/views/Blog/index.js
index a4c8eae..0e822be 100644
--- a/src/views/Blog/index.js
+++ b/src/views/Blog/index.js
@@ -25,7 +25,6 @@ export const Blog = ({
   activeBlog,
 }) => {
   let { id } = useParams();
-  console.log(id);
 
   // let id = location.getId();
   useEffect(() => {
@@ -45,6 +44,40 @@ export const Blog = ({
     window.scrollTo(0, 0);
   }, [id]);
 
+  const suggestionSlider = React.useCallback(() => {
+    return (
+      <Carousel
+        show={4}
+        slide={2}
+        swiping={true}
+        useArrowKeys={true}
+        transition={0.5}
+        rightArrow={
+          <img
+            className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
+            src={arrow}
+            alt=""
+            // onClick={(e) => e.stopPropagation()}
+          />
+        }
+        leftArrow={
+          <img
+            className="absolute top-1/2 transform -translate-y-1/2  -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
+            src={arrow}
+            alt=""
+            // onClick={(e) => e.stopPropagation()}
+          />
+        }
+      >
+        {blogs
+          ?.filter((blog) => Number(blog?.id) !== Number(id))
+          .map((blog, index) => (
+            <Suggest blog={blog} key={index} />
+          ))}
+      </Carousel>
+    );
+  }, [blogs, id]);
+
   return (
     <div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-0 pb-24 ">
       <Hashtags />
@@ -140,37 +173,7 @@ export const Blog = ({
         </div>
       ) : (
         <div className="w-full relative" style={{ direction: "ltr" }}>
-          {blogs.length > 0 && (
-            <Carousel
-              show={4}
-              slide={2}
-              swiping={true}
-              useArrowKeys={true}
-              transition={0.5}
-              rightArrow={
-                <img
-                  className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
-                  src={arrow}
-                  alt=""
-                  // onClick={(e) => e.stopPropagation()}
-                />
-              }
-              leftArrow={
-                <img
-                  className="absolute top-1/2 transform -translate-y-1/2  -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
-                  src={arrow}
-                  alt=""
-                  // onClick={(e) => e.stopPropagation()}
-                />
-              }
-            >
-              {blogs
-                .filter((e) => e.id != blog.id)
-                .map((blog, index) => (
-                  <Suggest blog={blog} key={index} />
-                ))}
-            </Carousel>
-          )}
+          <suggestionSlider />
         </div>
       )}
     </div>