diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js index 7962d98..2b0d810 100644 --- a/src/components/ProductSuggestion/index.js +++ b/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 (

این کالاها برای خرید به شما پیشنهام می دهیم

{/* product design */} -
- {suggestions.map((suggestion, index) => ( -
+
+ {similarList.map((book, index) => ( +
setSelectedProduct(suggestion)} + ${selectedProduct === book ? "bg-white" : ""}`} + onClick={() => setSelectedProduct(book)} > - -

- {suggestion.productTitle} -

+ +

{book?.name}

- {suggestion.productPrice} + {book?.price} تومان

{/*
@@ -39,8 +57,12 @@ const ProductSuggestion = ({ suggestions, isDark }) => { />
*/}
- {Number(index) !== suggestions.length - 1 && ( - + {Number(index) !== similarList.length - 1 && ( + )}
))} @@ -49,8 +71,9 @@ const ProductSuggestion = ({ suggestions, isDark }) => {

- جمع لوازم اختیاری خریداری شده - 56/894/400 +  جمع لوازم اختیاری خریداری شده  + {price} +   تومان

@@ -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: [ diff --git a/src/redux/actions/product.js b/src/redux/actions/product.js index 7a770ad..0dabd1e 100644 --- a/src/redux/actions/product.js +++ b/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) => diff --git a/src/redux/reducers/product.js b/src/redux/reducers/product.js index 411a256..4fb4099 100644 --- a/src/redux/reducers/product.js +++ b/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":