From b9552ffbb549ca715a047e6d7b5e688f669d1376 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Fri, 18 Mar 2022 11:59:58 +0330 Subject: [PATCH] reza connected userVote to product --- src/components/StarRating/index.js | 69 ++++++++++++---- src/redux/actions/index.js | 1 + src/redux/actions/userVote.js | 26 ++++++ src/redux/reducers/index.js | 1 + src/redux/reducers/userFavorite.js | 2 +- src/redux/reducers/userProduct.js | 2 +- src/redux/reducers/userVote.js | 31 +++++++ src/views/Product/index.js | 2 +- src/views/Video/index.js | 15 ++-- .../Videos/components/MostViewedVideo.js | 80 +++++++++---------- src/views/Videos/components/NewestVideo.js | 71 ++++++++-------- 11 files changed, 200 insertions(+), 100 deletions(-) create mode 100644 src/redux/actions/userVote.js create mode 100644 src/redux/reducers/userVote.js diff --git a/src/components/StarRating/index.js b/src/components/StarRating/index.js index 72ed8f6..f4e4e81 100644 --- a/src/components/StarRating/index.js +++ b/src/components/StarRating/index.js @@ -1,28 +1,65 @@ -import React, { useState } from "react"; +import React from "react"; import StarRatingComponent from "react-star-rating-component"; -import starGrayIcon from '../../assets/icons/starGray.svg'; -import starYellowIcon from '../../assets/icons/starYellow.svg'; +import { userVote, userProduct } from "../../redux/actions"; +import { connect } from "react-redux"; +import location from "../../utils/location"; + +//assets +import starGrayIcon from "../../assets/icons/starGray.svg"; +import starYellowIcon from "../../assets/icons/starYellow.svg"; + +function StarRating({ value, size, addVote, userProducts, getUserProducts }) { + const [rate, setRating] = React.useState(null); + + React.useEffect(() => { + getUserProducts(); + }, []); + + React.useEffect(() => { + if (rate) { + addVote({ productId: location.getId(), rate }); + } + }, [rate]); + + const isBuyer = + userProducts?.filter( + (product) => product?.condition > 1 && product?.id === location.getId() + ).length > 0; -function StarRating({value, size}) { - const [rate, setRating] = useState(value); return ( { - if (index <= value){ + onStarClick={(value) => + isBuyer + ? setRating(value) + : addVote({ productId: location.getId(), rate: value }) + } + renderStarIcon={(index, value) => { + if (index <= value) { + return ( + + ); + } return ( - + ); - } - return (); - }} - - value={rate} - size='35' + }} + value={isBuyer ? rate || value : value || 0} // onStarHover={(value) => setRating(value)} /> ); } -export default StarRating; +const mapStateToProps = (state) => ({ + userProducts: state.userProduct.list, +}); + +const mapDispatchToProps = { + addVote: userVote.add, + getUserProducts: userProduct.list, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(StarRating); diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js index 5142481..f954020 100644 --- a/src/redux/actions/index.js +++ b/src/redux/actions/index.js @@ -8,6 +8,7 @@ export { default as userFactor } from "./userFactor"; export { default as userProduct } from "./userProduct"; export { default as userAddress } from "./userAddress"; export { default as userFavorite } from "./userFavorite"; +export { default as userVote } from "./userVote"; export { default as transport } from "./transport"; export { default as content } from "./content"; export { default as faq } from "./faq"; diff --git a/src/redux/actions/userVote.js b/src/redux/actions/userVote.js new file mode 100644 index 0000000..70cd1c7 --- /dev/null +++ b/src/redux/actions/userVote.js @@ -0,0 +1,26 @@ +import proxy from "../proxy"; + +const userVote = { + list: + (data = {}) => + async (dispatch) => { + await proxy.post("userVote/list", data, { dispatch }); + }, + update: + (data = {}, data2 = {}) => + async (dispatch) => { + await proxy.put("userVote/update", data); + }, + add: + (data = {}, data2 = {}, data3 = {}) => + async (dispatch) => { + await proxy.post("userVote/add", data, { dispatch }); + }, + del: + (data = {}, data2 = {}) => + async (dispatch) => { + await proxy.delete("userVote/delete", data); + }, +}; + +export default userVote; \ No newline at end of file diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index b5776a2..b03f03e 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -7,6 +7,7 @@ export { default as product } from "./product"; export { default as content } from "./content"; export { default as userAddress } from "./userAddress"; export { default as userFavorite } from "./userFavorite"; +export { default as userVote } from "./userVote"; export { default as transport } from "./transport"; export { default as faq } from "./faq"; export { default as file } from "./file"; diff --git a/src/redux/reducers/userFavorite.js b/src/redux/reducers/userFavorite.js index 8f0eaf2..f7592ca 100644 --- a/src/redux/reducers/userFavorite.js +++ b/src/redux/reducers/userFavorite.js @@ -5,7 +5,7 @@ const initialState = { error: null, list: [], }; -export default function userAddress(state = initialState, action) { +export default function userFavorite(state = initialState, action) { let { type, data } = action; switch (type) { case "userFavorite/list": diff --git a/src/redux/reducers/userProduct.js b/src/redux/reducers/userProduct.js index c3f8216..c291566 100644 --- a/src/redux/reducers/userProduct.js +++ b/src/redux/reducers/userProduct.js @@ -10,7 +10,7 @@ const initialState = { checkEmpty: false, hasPhysical: false, }; -export default function userFactor(state = initialState, action) { +export default function userProduct(state = initialState, action) { let { type, data } = action; switch (type) { case "userProduct/myList": diff --git a/src/redux/reducers/userVote.js b/src/redux/reducers/userVote.js new file mode 100644 index 0000000..f4dc4a9 --- /dev/null +++ b/src/redux/reducers/userVote.js @@ -0,0 +1,31 @@ +import {toast} from 'react-toastify'; + +const initialState = { + loading: false, + error: null, +}; +export default function userVote(state = initialState, action) { + let { type, data } = action; + switch (type) { + case "userVote/list": + return { + ...state, + loading: false, + error: null, + }; + case "userVote/update": + return { ...state, loading: false, error: null }; + case "userVote/add": + toast.success('رای شما با موفقیت ثبت شد.'); + return { ...state, loading: false, error: null }; + case "userVote/delete": + return { ...state, loading: false, error: null }; + case "userVote/loading": + return { ...state, loading: true }; + case "userVote/error": + toast.error(data.message); + return { ...state, loading: false, error: data.message }; + default: + return state; + } +} \ No newline at end of file diff --git a/src/views/Product/index.js b/src/views/Product/index.js index b16595b..ba682fa 100644 --- a/src/views/Product/index.js +++ b/src/views/Product/index.js @@ -170,7 +170,7 @@ export const Product = ({
- +
+ {(!book) && ( +
+ +
+ )}
{"دوره ویدئویی" + " " + book?.product[2]?.name} - + {"پایه" + " " + (grades[book?.gradeId] || "پایه دوازدهم")}
diff --git a/src/views/Videos/components/MostViewedVideo.js b/src/views/Videos/components/MostViewedVideo.js index e30d508..535303d 100644 --- a/src/views/Videos/components/MostViewedVideo.js +++ b/src/views/Videos/components/MostViewedVideo.js @@ -5,55 +5,55 @@ import Header from "../../../components/Header"; import posterImage from "../../../assets/images/poster.svg"; function MostViewedVideo({ videos, grades }) { - const Video = ({ video }) => { - return ( - -
- -
- - {"دوره‌ ویدئویی" + " " + video.name} - -
- - {separate(video?.product[2]?.price) + " " + "تومان"} - - - {"پایه" + " " + grades[video.gradeId]} - -
- - ); - }; return (
{videos.map((video, index) => ( -
); } +const Video = ({ video, grades }) => { + return ( + +
+ +
+ + {"دوره‌ ویدئویی" + " " + video.name} + +
+ + {"پایه" + " " + grades[video.gradeId]} + + + {separate(video?.product[2]?.price) + " " + "تومان"} + +
+ + ); +}; + export default MostViewedVideo; diff --git a/src/views/Videos/components/NewestVideo.js b/src/views/Videos/components/NewestVideo.js index 61e95d2..779f6be 100644 --- a/src/views/Videos/components/NewestVideo.js +++ b/src/views/Videos/components/NewestVideo.js @@ -1,52 +1,53 @@ import React from "react"; import { Link } from "react-router-dom"; -import Header from "../../../components/Header"; import separate from "../../../utils/separate"; +//components +import Header from "../../../components/Header"; const NewestVideo = ({ videos, grades }) => { - const Video = ({ video }) => { - return ( - -
- -
- - - {video.name} - -
- - {"پایه" + " " + grades[video.gradeId]} - - - {separate(video?.product[2]?.price) + " " + "تومان"} - -
- - ); - }; return (
- {videos.slice(0, 5).map((video, index) => ( -
); }; +const Video = ({ video, grades }) => { + return ( + +
+ +
+ + + {video.name} + +
+ + {"پایه" + " " + grades[video.gradeId]} + + + {separate(video?.product[2]?.price) + " " + "تومان"} + +
+ + ); +}; + export default NewestVideo;