Reza_ashrafi
3 years ago
parent
8be8dfe377
commit
b9552ffbb5
11 changed files with 200 additions and 100 deletions
@ -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 ( |
||||
<StarRatingComponent |
||||
name="rate1" |
||||
|
||||
renderStarIcon={(index, value)=> { |
||||
if (index <= value){ |
||||
onStarClick={(value) => |
||||
isBuyer |
||||
? setRating(value) |
||||
: addVote({ productId: location.getId(), rate: value }) |
||||
} |
||||
renderStarIcon={(index, value) => { |
||||
if (index <= value) { |
||||
return ( |
||||
<img |
||||
src={starYellowIcon} |
||||
className={size == "small" ? "w-3" : "w-5"} |
||||
/> |
||||
); |
||||
} |
||||
return ( |
||||
<img src={starYellowIcon} className={size == 'small' ? 'w-3' : 'w-5'}/> |
||||
<img src={starGrayIcon} className={size == "small" ? "w-3" : "w-5"} /> |
||||
); |
||||
} |
||||
return (<img src={starGrayIcon} className={size == 'small' ? 'w-3' : 'w-5'}/>); |
||||
}} |
||||
|
||||
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); |
||||
|
||||
@ -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; |
||||
@ -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; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue