update src/views/Product/Rate/index.js and src/views/Product/index.js

src/views/Product/Rate/index.js

@@ -1,73 +1,112 @@
 import React from "react";
-import separate from '../../../utils/separate';
+import separate from "../../../utils/separate";
 
 //components
 import StarRating from "../../../components/StarRating";
 import Progress from "../../../components/Progress";
 
+function Rate({ desktop, productId, rateDetail }) {
+  const fiveCount = React.useMemo(() => {
+    return rateDetail?.find((rate) => rate?.rate === 5);
+  }, [rateDetail]);
 
+  const fourCount = React.useMemo(() => {
+    return rateDetail?.find((rate) => rate?.rate === 4);
+  }, [rateDetail]);
+
+  const threeCount = React.useMemo(() => {
+    return rateDetail?.find((rate) => rate?.rate === 3);
+  }, [rateDetail]);
+
+  const twoCount = React.useMemo(() => {
+    return rateDetail?.find((rate) => rate?.rate === 2);
+  }, [rateDetail]);
+
+  const oneCount = React.useMemo(() => {
+    return rateDetail?.find((rate) => rate?.rate === 1);
+  }, [rateDetail]);
+
+  const allCount = React.useMemo(() => {
+    return rateDetail?.reduce((a, b) => a + b?.count, 0);
+  }, [rateDetail]);
+
+  const rate = React.useMemo(() => {
+    return rateDetail?.length
+      ? ((oneCount?.count || 0) * 1 +
+          (twoCount?.count || 0) * 2 +
+          (threeCount?.count || 0) * 3 +
+          (fourCount?.count || 0) * 4 +
+          (fiveCount?.count || 0) * 5) /
+          rateDetail?.length
+      : 0;
+  }, [rateDetail]);
 
-function Rate({ avarage, all, fields, desktop }) {
   return (
     <div className="w-full flex justify-between items-center mt-5">
       <div className="flex flex-col items-center justify-center h-full ml-4">
-        {
-          desktop ?
+        {desktop ? (
           <h1 className={`text-gray-600 mb-2 font-bold dark:text-white`}>
-              {avarage}
+            {rate}
           </h1>
-            :
-            <strong className={`text-blue5F mb-2 font-bold dark:text-white`} style={{ fontSize: 'calc(100vw / 10)' }}>
-              {avarage}
+        ) : (
+          <strong
+            className={`text-blue5F mb-2 font-bold dark:text-white`}
+            style={{ fontSize: "calc(100vw / 10)" }}
+          >
+            {rate}
           </strong>
-        }
+        )}
         <div className="">
-        <StarRating />
+          <StarRating value={rate} />
         </div>
-        <span className="text-base text-gray70 mt-2 dark:text-white">{separate(all)}</span>
+        <span className="text-base text-gray70 mt-2 dark:text-white">
+          {" "}
+          {`از بین ${allCount} نفر`}
+        </span>
       </div>
       <ul className="p-0 m-0 list-none flex flex-col flex-1">
-        {fields.map((item, index) => (
-          <li key={index} className="w-full flex flex-row-reverse items-center justify-between">
-            <span className="mr-2 text-xs text-blue5F dark:text-white">{item.name}</span>
-
-            {
-              desktop ? <Progress deskTop percent={item.percent} /> : <Progress percent={item.percent} />
-            }
-
-            <span className="ml-2 text-xs text-blue5F dark:text-white">{item.percent + "%"}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-export default Rate;
-
-Rate.defaultProps = {
-  avarage: 4.8,
-  all: 4780,
-  fields: [
+        {[
           {
-      name: "5 ستاره",
-      percent: 49,
+            name: "یک ستاره",
+            value: ((oneCount?.count || 0) / allCount) * 100,
           },
           {
-      name: "4 ستاره",
-      percent: 31,
+            name: "دو ستاره",
+            value: ((twoCount?.count || 0) / allCount) * 100,
           },
           {
-      name: "3 ستاره",
-      percent: 9,
+            name: "سه ستاره",
+            value: ((threeCount?.count || 0) / allCount) * 100,
           },
           {
-      name: "2 ستاره",
-      percent: 5,
+            name: "چهار ستاره",
+            value: ((fourCount?.count || 0) / allCount) * 100,
           },
           {
-      name: "1 ستاره",
-      percent: 6,
+            name: "پنج ستاره",
+            value: ((fiveCount?.count || 0) / allCount) * 100,
           },
-  ],
-};
+        ].map((item, index) => (
+          <li
+            key={index}
+            className="w-full flex flex-row-reverse items-center justify-between"
+          >
+            <span className="mr-2 text-xs text-blue5F dark:text-white">
+              {item.name}
+            </span>
+            {desktop ? (
+              <Progress deskTop percent={item.value} />
+            ) : (
+              <Progress percent={item.value} />
+            )}
+            <span className="ml-2 text-xs text-blue5F dark:text-white">
+              {item.value + "%"}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Rate;

src/views/Product/index.js

@@ -149,7 +149,6 @@ export const Product = ({
               <span>{videoAvailableForSell ? "ویدئویی - " : ""}</span>
               <span>{digitalAvailableForSell ? "دیجیتال - " : ""}</span>
               <span>{physicalAvailableForSell ? "فیزیکی" : ""}</span>
-              
               <br /> در دسترس
             </li>
             {book?.rate ? (
@@ -317,14 +316,18 @@ export const Product = ({
           </div>
           <div className="w-full flex flex-col justify-between items-center mt-10">
             <Header title="امتیازات و نظرات" link="#" />
-            <Rate value={book?.rate || 0} />
+            <Rate
+              value={book?.rate || 0}
+              productId={physicalProduct?.id}
+              rateDetail={physicalProduct?.rateDetail}
+            />
           </div>
           <div
             className="flex w-full pb-4 mt-10 no-scrollbar"
             style={{ overflowX: "scroll" }}
           >
-            {[0, 1, 2, 2].map((comment, index) => (
-              <Comment key={index} />
+            {book?.comment?.map((comment, index) => (
+              <Comment comment={comment} key={index} />
             ))}
           </div>
         </div>