reza fixed item 18

src/components/ProductSuggestion/index.js

@@ -1,34 +1,52 @@
-import React, { useState } from "react";
-import {connect} from 'react-redux';
+import React, { useState, useEffect } from "react";
+import { product } from "../../redux/actions";
+import { connect } from "react-redux";
 
 import Button from "../Button";
 
 import productImg from "./product-chair.svg";
 import plus from "./plus.svg";
 
-const ProductSuggestion = ({ suggestions, isDark }) => {
+const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarList }) => {
   const [selectedProduct, setSelectedProduct] = useState(null);
+  const [price, setPrice] = useState(0);
 
+  useEffect(() => {
+    if (book) {
+      getSimilar({ id: book?.id });
+    }
+  }, [book]);
+  useEffect(() => {
+    if(similarList.length > 0) {
+      let allPrice = 0;
+      for(let item of similarList) {
+        allPrice = item.price + allPrice;
+      }
+      setPrice(() => allPrice);
+    }
+  },[similarList]);
   return (
     <section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9">
       <h2 className="text-center text-lg font-bold text-productPrice">
         این کالاها برای خرید به شما پیشنهام می دهیم
       </h2>
       {/* product design */}
-      <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full">
-        {suggestions.map((suggestion, index) => (
-          <div className="flex flex-row mb-7 justify-center relative" style={{ width : 'calc(100% / 4.5)' }} key={index}>
+      <div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-5">
+        {similarList.map((book, index) => (
+          <div
+            className="flex flex-row mb-7 justify-center relative"
+            style={{ maxWidth: "calc(100% / 5)" }}
+            key={index}
+          >
             <div
               className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer bg-white
-               ${selectedProduct === suggestion ? "bg-white" : ""}`}
-              onClick={() => setSelectedProduct(suggestion)}
+               ${selectedProduct === book ? "bg-white" : ""}`}
+              onClick={() => setSelectedProduct(book)}
             >
-              <img src={suggestion.productImage} alt="" className="w-full" />
-              <h2 className="my-3 text-tiny">
-                {suggestion.productTitle}
-              </h2>
+              <img src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`} alt="" className="w-2/3 rounded-md" />
+              <h2 className="my-3 text-tiny">{book?.name}</h2>
               <p className="text-base text-blueC0 font-medium">
-                {suggestion.productPrice}
+                {book?.price}
                 <span className="mr-1 text-xs text-black">تومان</span>
               </p>
               {/* <div className="flex flex-col items-center mt-3">
@@ -39,8 +57,12 @@ const ProductSuggestion = ({ suggestions, isDark }) => {
                 />
               </div> */}
             </div>
-            {Number(index) !== suggestions.length - 1 && (
-              <img src={plus} alt="" className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2" />
+            {Number(index) !== similarList.length - 1 && (
+              <img
+                src={plus}
+                alt=""
+                className="w-5 absolute -left-2.5 top-1/2 transform -translate-y-1/2 -translate-x-1/2 z-20"
+              />
             )}
           </div>
         ))}
@@ -49,8 +71,9 @@ const ProductSuggestion = ({ suggestions, isDark }) => {
       <div className="flex flex-col justify-center items-center mt-4">
         <div className="flex flex-row mb-5">
           <p className="text-base text-productPrice font-bold">
-            جمع لوازم اختیاری خریداری شده
-            <span> 56/894/400 </span>
+            &nbsp;جمع لوازم اختیاری خریداری شده&nbsp;
+            <span>{price}</span>
+            &nbsp;
             تومان
           </p>
           <span className="text-lightBlueTextColor text-base mr-1 font-bold">
@@ -75,10 +98,16 @@ const ProductSuggestion = ({ suggestions, isDark }) => {
 };
 
 const mapStateToProps = (state) => ({
+  book: state.book.info,
   isDark: state.publicApi.isDark,
-})
+  similarList: state.product.similarList,
+});
 
-export default connect(mapStateToProps)(ProductSuggestion);
+const mapDispatchToProps = {
+  getSimilar: product.getSimilar,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProductSuggestion);
 
 ProductSuggestion.defaultProps = {
   suggestions: [

src/redux/actions/product.js

@@ -1,5 +1,9 @@
 import proxy from "../proxy";
 const product = {
+  getSimilar:
+    (data = {}) =>
+    async (dispatch) =>
+      await proxy.get("product/similar", data, { dispatch }),
   listVOD:
     (data = {}) =>
     async (dispatch) =>

src/redux/reducers/product.js

@@ -5,18 +5,21 @@ const initialState = {
   error: null,
   listVOD: [],
   selectedVOD: null,
+  similarList : [],
 };
 export default function product(state = initialState, action) {
   let { type, data } = action;
   switch (type) {
     case "product/listVOD":
       return { ...state, loading: false, listVOD: data, error: null };
+    case "product/similar":
+      return { ...state, loading: false, similarList: data, error: null };
     case "product/addVOD":
       return { ...state, loading: false, error: null };
     case "product/deleteVOD":
       return { ...state, loading: false, error: null };
-      case "product/selectVOD":
-        return {...state, selectedVOD : data};
+    case "product/selectVOD":
+      return { ...state, selectedVOD: data };
     case "product/loading":
       return { ...state, loading: true };
     case "product/error":