From 42e00c7ec08fb014853b2a568b3889e84b3c3884 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimiireza98@gmail.com>
Date: Thu, 7 Jul 2022 18:37:30 +0430
Subject: [PATCH] update src/views/Blog/index.js, Suggest.js and
 src/views/ShoppingCart/index.js

---
 src/views/Blog/index.js            |  96 +++++------
 src/views/Blogs/layouts/Suggest.js |   2 +-
 src/views/ShoppingCart/index.js    | 268 +++++++++++++++--------------
 3 files changed, 183 insertions(+), 183 deletions(-)

diff --git a/src/views/Blog/index.js b/src/views/Blog/index.js
index 791cdb5..b6168fd 100644
--- a/src/views/Blog/index.js
+++ b/src/views/Blog/index.js
@@ -2,14 +2,13 @@ import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { blog, publicApi } from "../../redux/actions";
 import { Carousel } from "@trendyol-js/react-carousel";
-import location from "../../utils/location";
+import { useParams } from "react-router-dom";
 
-import Hashtags from "../Blogs/layouts/Hashtags";
+//components
 import Header from "../Blogs/layouts/Header";
 import Suggest from "../Blogs/layouts/Suggest";
 import New from "../Blogs/layouts/New";
 import Avatar from "../../components/Avatar";
-import { useParams } from "react-router-dom";
 
 //assets
 import arrow from "../../assets/icons/dropdown-blue.svg";
@@ -21,64 +20,21 @@ export const Blog = ({
   headerOptions,
   getList,
   blogs,
-  activeBlog,
 }) => {
   let { id } = useParams();
 
-  // let id = location.getId();
   useEffect(() => {
+    getList();
     setHeaderOptions(headerOptions);
-    getInfo({ id: location.getId() });
-    if (blogs.length === 0) {
-      getList();
-    }
-  }, [id]);
-
-  useEffect(() => {
-    getInfo({ id: location.getId() });
-  }, [activeBlog]);
+  }, []);
 
   useEffect(() => {
-    // alert();
-    window.scrollTo(0, 0);
+    window.scroll({ top: 0, behavior: "smooth" });
+    getInfo({ id });
   }, [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 ">
+  return blogs?.length ? (
+    <div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-10 pb-24">
       <div
         className="flex lg:hidden w-full rounded-md overflow-hidden relative"
         style={{
@@ -169,11 +125,43 @@ export const Blog = ({
       {/* mobile */}
       {/* desktop */}
       <div className="hidden lg:flex w-full relative ltr">
-        <suggestionSlider />
+        <Carousel
+          show={4}
+          slide={2}
+          swiping={true}
+          useArrowKeys={true}
+          key={id}
+          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
+            ?.slice(0, 10)
+            ?.filter((blog) => Number(blog?.id) !== Number(id))
+            .map((blog, index) => (
+              <Suggest blog={blog} key={index} />
+            ))}
+        </Carousel>
       </div>
       {/* desktop */}
     </div>
-  );
+  ) : <div className="w-full h-screen">
+
+  </div>;
 };
 
 const mapStateToProps = (state) => ({
diff --git a/src/views/Blogs/layouts/Suggest.js b/src/views/Blogs/layouts/Suggest.js
index 4032f91..1afdd10 100644
--- a/src/views/Blogs/layouts/Suggest.js
+++ b/src/views/Blogs/layouts/Suggest.js
@@ -20,7 +20,7 @@ export const Suggest = ({ blog }) => {
         className="w-full rounded-md"
         style={{ height: "calc(100vw / 12 * 11 / 3 / 21 * 9)" }}
       />
-      <strong className="text-lg my-4 leading-7">{blog?.title}</strong>
+      <strong className="text-tiny my-4 leading-7">{blog?.title}</strong>
     </Link>
   );
 };
diff --git a/src/views/ShoppingCart/index.js b/src/views/ShoppingCart/index.js
index 2a3fb23..2134d2d 100644
--- a/src/views/ShoppingCart/index.js
+++ b/src/views/ShoppingCart/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
 import {
   userProduct,
   userFactor,
@@ -24,7 +24,6 @@ import { connect } from "react-redux";
 function ShoppingCart({
   isDark,
   isMobile,
-  list,
   factorInfo,
   user,
   getList,
@@ -37,11 +36,11 @@ function ShoppingCart({
   loading,
   setDialog,
   isLogin,
+  useless,
 }) {
   const [phase, setPhase] = useState("products");
   const navigation = useNavigate();
   useEffect(() => {
-    console.log("gl1")
     if (isLogin) getList();
     getFactorInfo({ userId: user?.id });
     setHeaderOptions(headerOptions);
@@ -53,36 +52,38 @@ function ShoppingCart({
     }
   }, [phase]);
 
-  const productsLength = userProducts?.filter(
-    (product) => product.condition < 2
-  )?.length;
+  const productsLength = useMemo(() => {
+    return userProducts?.filter((product) => product.condition < 2)?.length;
+  }, [userProducts]);
 
-  const next = {
-    products: () =>
-      productsLength
-        ? userProducts.filter((object) => object.productType === 2).length > 0
-          ? setPhase("deliveryForm")
-          : setDialog({
-              type: "confirm",
-              text: "به درگاه پرداخت بریم؟",
-              open: true,
-              accept: () => payFactor({ userId: user.id }),
-            })
-        : toast.info("ابتدا یک محصول را به سبد خرید خود اضافه کنید."),
-    deliveryForm: () =>
-      setDialog({
-        type: "confirm",
-        text: "به درگاه پرداخت بریم؟",
-        open: true,
-        accept: () => payFactor({ userId: user.id }),
-      }),
-    profile: () => {
-      console.log("Set profile");
-      console.log("Go to shaparak");
-    },
-  };
+  const next = useMemo(() => {
+    return {
+      products: () =>
+        productsLength
+          ? userProducts.filter((object) => object.productType === 2)?.length
+            ? setPhase("deliveryForm")
+            : setDialog({
+                type: "confirm",
+                text: "به درگاه پرداخت بریم؟",
+                open: true,
+                accept: () => payFactor({ userId: user.id }),
+              })
+          : toast.info("ابتدا یک محصول را به سبد خرید خود اضافه کنید."),
+      deliveryForm: () =>
+        setDialog({
+          type: "confirm",
+          text: "به درگاه پرداخت بریم؟",
+          open: true,
+          accept: () => payFactor({ userId: user.id }),
+        }),
+      profile: () => {
+        console.log("Set profile");
+        console.log("Go to shaparak");
+      },
+    };
+  }, [userProducts, user]);
 
-  const Table = () => {
+  const Table = React.useCallback(() => {
     return (
       <div className="w-full flex flex-col">
         <header className="w-full flex gap-10">
@@ -94,11 +95,11 @@ function ShoppingCart({
           </strong>
         </header>
         <ul className="w-full mt-2 list-none p-0">
-          {list
-            .sort((a, b) => a?.id - b?.id)
-            .map(
+          {userProducts
+            ?.sort((a, b) => a?.id - b?.id)
+            ?.map(
               (product, index) =>
-                product.condition < 2 && (
+                product?.condition < 2 && (
                   <Product loading={loading} key={index} product={product} />
                 )
             )}
@@ -108,90 +109,97 @@ function ShoppingCart({
         </div>
       </div>
     );
-  };
+  }, [userProducts]);
 
-  const PriceStatus = ({ name, value, type }) => {
-    return isMobile ? (
-      <div className="w-full flex justify-between py-3">
-        <strong className="font-semibold text-tiny dark:text-white text-blue5F">
-          {name}
-        </strong>
-        <span
-          className="font-medium text-lg dark:text-white"
-          style={{
-            color: !isDark
-              ? type === "error"
-                ? "#F1420D"
-                : "rgb(6, 186, 206)"
-              : "",
-          }}
-        >
-          {separate(Math.floor(value))}
-          <span
-            style={{
-              color: !isDark ? (type === "error" ? "#F1420D" : "") : "",
-            }}
-            className="text-sm mr-2"
-          >
-            تومان
-          </span>
-        </span>
-      </div>
-    ) : (
-      <div className="w-full flex justify-between py-4">
-        <strong className="font-semibold text-tiny dark:text-white text-blue5F">
-          {name}
-        </strong>
-        <span
-          className="font-medium text-lg dark:text-white"
-          style={{
-            color: !isDark
-              ? type === "error"
-                ? "#F1420D"
-                : "rgb(6, 186, 206)"
-              : "",
-          }}
-        >
-          {separate(Math.floor(value))}
-          <span
-            style={{
-              color: !isDark ? (type === "error" ? "#F1420D" : "") : "",
-            }}
-            className="text-sm mr-2"
-          >
-            تومان
-          </span>
-        </span>
-      </div>
-    );
-  };
+  const PriceStatus = useCallback(
+    ({ name, value, type }) => {
+      return (
+        <React.Fragment>
+          <div className="w-full flex lg:hidden justify-between py-3">
+            <strong className="font-semibold text-tiny dark:text-white text-blue5F">
+              {name}
+            </strong>
+            <span
+              className="font-medium text-lg dark:text-white"
+              style={{
+                color: !isDark
+                  ? type === "error"
+                    ? "#F1420D"
+                    : "rgb(6, 186, 206)"
+                  : "",
+              }}
+            >
+              {separate(Math.floor(value))}
+              <span
+                style={{
+                  color: !isDark ? (type === "error" ? "#F1420D" : "") : "",
+                }}
+                className="text-sm mr-2"
+              >
+                تومان
+              </span>
+            </span>
+          </div>
+          <div className="w-full hidden lg:flex justify-between py-4">
+            <strong className="font-semibold text-tiny dark:text-white text-blue5F">
+              {name}
+            </strong>
+            {value ? (
+              <span
+                className="font-medium text-lg dark:text-white"
+                style={{
+                  color: !isDark
+                    ? type === "error"
+                      ? "#F1420D"
+                      : "rgb(6, 186, 206)"
+                    : "",
+                }}
+              >
+                {separate(Math.floor(value))}
+                <span
+                  style={{
+                    color: !isDark ? (type === "error" ? "#F1420D" : "") : "",
+                  }}
+                  className="text-sm mr-2"
+                >
+                  تومان
+                </span>
+              </span>
+            ) : null}
+          </div>
+        </React.Fragment>
+      );
+    },
+    [useless]
+  );
 
-  const layouts = {
-    products: isMobile ? (
-      <>
-        {list
-          .sort((a, b) => a?.id - b?.id)
-          .map(
-            (product, index) =>
-              product.condition < 2 && (
-                <Product loading={loading} key={index} product={product} />
-              )
-          )}
-        <Code />
-      </>
-    ) : productsLength ? (
-      <Table />
-    ) : (
-      <Empty
-        text="سبد خرید شما خالی است."
-        buttonText="فروشگاه"
-        buttonAction={() => navigation("/products")}
-      />
-      // <strong className="text-blueC0">سبد خرید شما خالی است.</strong>
-    ),
-    deliveryForm: <DeliveryForm setPhase={setPhase} />,
-    address: <Address setPhase={setPhase} />,
-  };
+  const layouts = useMemo(() => {
+    return {
+      products: isMobile ? (
+        <>
+          {userProducts
+            .sort((a, b) => a?.id - b?.id)
+            .map(
+              (product, index) =>
+                product.condition < 2 && (
+                  <Product loading={loading} key={index} product={product} />
+                )
+            )}
+          <Code />
+        </>
+      ) : productsLength ? (
+        <Table />
+      ) : (
+        <Empty
+          text="سبد خرید شما خالی است."
+          buttonText="فروشگاه"
+          buttonAction={() => navigation("/products")}
+        />
+      ),
+      deliveryForm: <DeliveryForm setPhase={setPhase} />,
+      address: <Address setPhase={setPhase} />,
+    };
+  }, [isMobile, userProducts, loading]);
 
   return isMobile ? (
     <div className="w-full flex flex-col px-4 pb-24">
@@ -221,11 +229,13 @@ function ShoppingCart({
                 <strong className="font-bold text-tiny text-blue5F dark:text-white">
                   جمع کل سبد خرید
                 </strong>
-                <p className="font-medium text-greenBA text-lg dark:text-white">
-                  {separate(productsLength ? factorInfo?.payPrice : 0) +
-                    " " +
-                    "تومان"}
-                </p>
+                {factorInfo?.payFactor ? (
+                  <p className="font-medium text-greenBA text-lg dark:text-white">
+                    {separate(factorInfo?.payPrice) +
+                      " " +
+                      "تومان"}
+                  </p>
+                ) : null}
               </div>
               <div
                 className="w-full rounded-md flex justify-center items-center py-2.5 px-3 mt-5 mb-4"
@@ -276,8 +286,7 @@ function ShoppingCart({
       }`}
     >
       <div className="flex flex-col flex-1">{layouts[phase]}</div>
-      {console.log(list)}
-      {list?.filter((product) => product?.condition < 2)?.length
+      {userProducts?.filter((product) => product?.condition < 2)?.length
         ? phase !== "address" && (
             <div
               className="flex flex-col w-1/4 p-10 bg-white  shadow-all rounded-md px-4 py-4"
@@ -286,17 +295,21 @@ function ShoppingCart({
               <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
                 <PriceStatus
                   name="مبلغ سبد خرید"
-                  value={productsLength ? factorInfo?.sumPrice : ""}
+                  value={factorInfo?.sumPrice ? factorInfo?.sumPrice : " "}
                   type="normal"
                 />
                 <PriceStatus
                   name="هزینه حمل و نقل"
-                  value={productsLength ? factorInfo?.transportPrice : 0}
+                  value={
+                    factorInfo?.transportPrice
+                      ? factorInfo?.transportPrice
+                      : " "
+                  }
                   type="error"
                 />
                 <PriceStatus
                   name="میزان تخفیف"
-                  value={productsLength ? factorInfo?.offPrice : ""}
+                  value={factorInfo?.offPrice ? factorInfo?.offPrice : " "}
                   type="error"
                 />
                 {/* <PriceStatus
@@ -398,7 +411,6 @@ function ShoppingCart({
 const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
   isMobile: state.publicApi.isMobile,
-  list: state.userProduct.list,
   payPrice: state.userProduct.sum,
   factorInfo: state.userFactor.info,
   user: state.user.status,