update src/views/Product/Desktop/ProductOverAll/index.js, src/views/Product/Rate/index.js and Main.js

src/views/Product/Desktop/ProductOverAll/index.js

@@ -66,11 +66,11 @@ export const ProductOverAll = ({
 
             <div className="flex justify-end items-center">
               <div className="p-2">
-                <StarRating value={book?.rate || 4} />
+                <StarRating value={physicalProduct?.rate} />
               </div>
-              {activeProduct?.suggestedCounter ? (
+              {physicalProduct?.suggestedCounter ? (
                 <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
-                  بیش از {activeProduct?.suggestedCounter} نفر امتیاز داده اند
+                  بیش از {physicalProduct?.suggestedCounter} نفر امتیاز داده اند
                 </div>
               ) : null}
             </div>
@@ -155,22 +155,22 @@ export const ProductOverAll = ({
         <div className="flex flex-col w-1/3 ">
           <ProductStatusCard
             price={activeProduct?.price}
-            garanty={activeProduct?.garantyText}
+            garanty={physicalProduct?.garantyText}
-            suggestedCounter={activeProduct?.suggestedCounter}
+            suggestedCounter={physicalProduct?.suggestedCounter}
             seller={activeProduct?.seller}
             offerPrice={activeProduct?.offerPrice}
             id={activeProduct?.id}
-            shippingTime={activeProduct?.shippingTime}
+            shippingTime={physicalProduct?.shippingTime}
             loading={loading}
           />
         </div>
       </header>
-      {activeProduct?.properties?.length && (
+      {physicalProduct?.properties?.length && (
         <ProductTab
           tabs={[
             {
               title: "مشخصات",
-              components: <Table specifications={activeProduct?.properties} />,
+              components: <Table specifications={physicalProduct?.properties} />,
             },
             {
               title: "نقد و بررسی",

src/views/Products/layouts/Desktop/Main.js

@@ -12,8 +12,6 @@ import { book, publicApi } from "../../../../redux/actions";
 import moment from "jalali-moment";
 
 import dropdownIcon from "../../../../assets/icons/dropdown-blue.svg";
-import Posts from "./Posts";
-import Pagination from "./Pagination";
 const num = 6;
 
 export const Main = ({
@@ -22,30 +20,24 @@ export const Main = ({
   sortMethods,
   filterOptions,
   setFilterOptions,
-  isMobile,
+  useless
 }) => {
   const [filterLoading, setFilterLoading] = useState(false);
   const [page, setPage] = useState(1);
-  console.log(page);
   const [total, setTotal] = useState(books.length);
 
   useEffect(() => {
-    // setFilterLoading(() => true);
-    // setTimeout(() => {
-    //   setFilterLoading(() => false);
-    // }, 500);
     setPage(1);
   }, [filterOptions]);
 
   useEffect(() => {
-    window.scrollTo(0, 0);
+    if(books?.length){
-  }, []);
-
-  useEffect(() => {
       setTotal(books.length);
+      window.scroll({top : 0, behavior : 'smooth'});
+    }
   }, [books]);
 
-  const Items = (type) => {
+  const Items = React.useCallback((type) => {
     const { grade, subject, available, sort, productType } = filterOptions;
     let byGradeFilter;
     let bySubjectFilter;
@@ -59,7 +51,9 @@ export const Main = ({
     if (subject) {
       bySubjectFilter = byGradeFilter?.filter(
         (book) =>
-          book?.product[type]?.name?.indexOf(subject) !== -1 ||
+          book?.product
+            ?.find((product) => product?.productType === type)
+            ?.name?.indexOf(subject) !== -1 ||
           book?.name.indexOf(subject) !== -1
       );
     } else {
@@ -67,7 +61,8 @@ export const Main = ({
     }
     if (available) {
       byAvailableFilter = bySubjectFilter?.filter(
-        (book) => book.product[type].price
+        (book) =>
+          book.product?.find((product) => product?.productType === type)?.price
       );
     } else {
       byAvailableFilter = bySubjectFilter;
@@ -75,11 +70,15 @@ export const Main = ({
     if (sort) {
       if (sort === "ارزان ترین") {
         bySortFilter = byAvailableFilter?.sort(
-          (a, b) => a.product[type].price - b.product[type].price
+          (a, b) =>
+            a.product?.find((product) => product?.productType === type)?.price -
+            b.product?.find((product) => product?.productType === type)?.price
         );
       } else if (sort === "محبوب ترین") {
         bySortFilter = byAvailableFilter?.sort(
-          (a, b) => a.product[type].rate - b.product[type].rate
+          (a, b) =>
+            a.product?.find((product) => product?.productType === type)?.rate -
+            b.product?.find((product) => product?.productType === type)?.rate
         );
       } else if (sort === "جدیدترین") {
         bySortFilter = byAvailableFilter?.sort(
@@ -91,17 +90,24 @@ export const Main = ({
     } else {
       bySortFilter = byAvailableFilter;
     }
-    console.log("render here !");
     return bySortFilter;
-    // setTotal(bySortFilter.length);
+  },[books, filterOptions, grades]);
-  };
+
+  const elements = React.useMemo(() => {
+    return Items(2);
+  },[books, filterOptions]);
+
+  const vods = React.useMemo(() => {
+    return Items(4);
+  },[books, filterOptions]); 
 
-  const elements = Items(1);
+  const lastPage = React.useMemo(() => {
-  const vods = Items(2);
+    return  Math.floor((elements.length - 1) / num) + 1;
-  console.log(elements.length);
+  },[books, filterOptions]);
 
-  const lastPage = Math.floor((elements.length - 1) / num) + 1;
+  const pages = React.useMemo(() => {
-  const pages = lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : [];
+    return lastPage > 1 ? [...Array(lastPage)].map((e, i) => i + 1) : [];
+  },[books, filterOptions]); 
 
   return (
     <div
@@ -189,7 +195,6 @@ export const Main = ({
           ))}
         </ul>
       </div>
-
       <div className="flex flex-col w-full relative">
         {filterLoading && (
           <div
@@ -199,9 +204,8 @@ export const Main = ({
             <Loading size={4} color="bg-green-400" />
           </div>
         )}
-
+        {books.length ? (
-        {books.length > 0 && (
+          <div className="relative w-full mt-7 ltr">
-          <div className="relative w-full mt-7 " style={{ direction: "ltr" }}>
             <Carousel
               show={Math.round(window.innerWidth / 666)}
               slide={2}
@@ -246,8 +250,7 @@ export const Main = ({
               ))}
             </Carousel>
           </div>
-        )}
+        ) : null}
-
         <div className="w-full flex  flex-wrap  mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden gap-4 justify-evenly pt-3">
           {elements
             ?.slice((page - 1) * num, page * num)
@@ -261,7 +264,6 @@ export const Main = ({
                 type={0}
               />
             ))}
-
           {/* pagination */}
           <div className="w-full flex justify-center gap-x-2">
             {pages.map((e) => (