reza fixed item 18

temp
Reza_ashrafi 3 years ago
parent 2d3d4dcfb9
commit 42130ec618
  1. 67
      src/components/ProductSuggestion/index.js
  2. 4
      src/redux/actions/product.js
  3. 7
      src/redux/reducers/product.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: [

@ -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) =>

@ -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":

Loading…
Cancel
Save