update src/views/Blog/index.js, Suggest.js and src/views/ShoppingCart/index.js

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(() => {
-    setHeaderOptions(headerOptions);
-    getInfo({ id: location.getId() });
-    if (blogs.length === 0) {
     getList();
-    }
+    setHeaderOptions(headerOptions);
-  }, [id]);
+  }, []);
-
-  useEffect(() => {
-    getInfo({ id: location.getId() });
-  }, [activeBlog]);
 
   useEffect(() => {
-    // alert();
+    window.scroll({ top: 0, behavior: "smooth" });
-    window.scrollTo(0, 0);
+    getInfo({ id });
   }, [id]);
 
-  const suggestionSlider = React.useCallback(() => {
+  return blogs?.length ? (
-    return (
+    <div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-10 pb-24">
-      <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 ">
       <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) => ({

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>
   );
 };

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,14 +52,15 @@ function ShoppingCart({
     }
   }, [phase]);
 
-  const productsLength = userProducts?.filter(
+  const productsLength = useMemo(() => {
-    (product) => product.condition < 2
+    return userProducts?.filter((product) => product.condition < 2)?.length;
-  )?.length;
+  }, [userProducts]);
 
-  const next = {
+  const next = useMemo(() => {
+    return {
       products: () =>
         productsLength
-        ? userProducts.filter((object) => object.productType === 2).length > 0
+          ? userProducts.filter((object) => object.productType === 2)?.length
             ? setPhase("deliveryForm")
             : setDialog({
                 type: "confirm",
@@ -81,8 +81,9 @@ function ShoppingCart({
         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
+          {userProducts
-            .sort((a, b) => a?.id - b?.id)
+            ?.sort((a, b) => a?.id - b?.id)
-            .map(
+            ?.map(
               (product, index) =>
-                product.condition < 2 && (
+                product?.condition < 2 && (
                   <Product loading={loading} key={index} product={product} />
                 )
             )}
@@ -108,11 +109,13 @@ function ShoppingCart({
         </div>
       </div>
     );
-  };
+  }, [userProducts]);
 
-  const PriceStatus = ({ name, value, type }) => {
+  const PriceStatus = useCallback(
-    return isMobile ? (
+    ({ name, value, type }) => {
-      <div className="w-full flex justify-between py-3">
+      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>
@@ -137,11 +140,11 @@ function ShoppingCart({
               </span>
             </span>
           </div>
-    ) : (
+          <div className="w-full hidden lg:flex justify-between py-4">
-      <div className="w-full 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={{
@@ -162,14 +165,19 @@ function ShoppingCart({
                   تومان
                 </span>
               </span>
+            ) : null}
           </div>
+        </React.Fragment>
+      );
+    },
+    [useless]
   );
-  };
 
-  const layouts = {
+  const layouts = useMemo(() => {
+    return {
       products: isMobile ? (
         <>
-        {list
+          {userProducts
             .sort((a, b) => a?.id - b?.id)
             .map(
               (product, index) =>
@@ -187,11 +195,11 @@ function ShoppingCart({
           buttonText="فروشگاه"
           buttonAction={() => navigation("/products")}
         />
-      // <strong className="text-blueC0">سبد خرید شما خالی است.</strong>
       ),
       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>
+                {factorInfo?.payFactor ? (
                   <p className="font-medium text-greenBA text-lg dark:text-white">
-                  {separate(productsLength ? factorInfo?.payPrice : 0) +
+                    {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)}
+      {userProducts?.filter((product) => product?.condition < 2)?.length
-      {list?.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,