|
|
|
@ -12,7 +12,39 @@ import Colors from "../../../constants/Colors"; |
|
|
|
|
|
|
|
|
|
const width = Dimensions.get("window").width; |
|
|
|
|
|
|
|
|
|
function Rates({ rate, productId, addVote, isBuyed = null, theme }) { |
|
|
|
|
function Rates({ productId, addVote, isBuyed = null, theme, rateDetail }) { |
|
|
|
|
const fiveCount = React.useMemo(() => { |
|
|
|
|
return rateDetail?.filter((rate) => rate?.rate === 5)[0]; |
|
|
|
|
}, [rateDetail]); |
|
|
|
|
|
|
|
|
|
const fourCount = React.useMemo(() => { |
|
|
|
|
return rateDetail?.filter((rate) => rate?.rate === 4)[0]; |
|
|
|
|
}, [rateDetail]); |
|
|
|
|
|
|
|
|
|
const threeCount = React.useMemo(() => { |
|
|
|
|
return rateDetail?.filter((rate) => rate?.rate === 3)[0]; |
|
|
|
|
}, [rateDetail]); |
|
|
|
|
|
|
|
|
|
const twoCount = React.useMemo(() => { |
|
|
|
|
return rateDetail?.filter((rate) => rate?.rate === 2)[0]; |
|
|
|
|
}, [rateDetail]); |
|
|
|
|
|
|
|
|
|
const oneCount = React.useMemo(() => { |
|
|
|
|
return rateDetail?.filter((rate) => rate?.rate === 1)[0]; |
|
|
|
|
}, [rateDetail]); |
|
|
|
|
|
|
|
|
|
const allCount = React.useMemo(() => { |
|
|
|
|
return rateDetail?.reduce((a, b) => a + b?.count, 0); |
|
|
|
|
}, [rateDetail]); |
|
|
|
|
|
|
|
|
|
const rate = React.useMemo(() => { |
|
|
|
|
return ((oneCount?.count || 0) * 1 + |
|
|
|
|
(twoCount?.count || 0) * 2 + |
|
|
|
|
(threeCount?.count || 0) * 3 + |
|
|
|
|
(fourCount?.count || 0) * 4 + |
|
|
|
|
(fiveCount?.count || 0) * 5) / rateDetail?.length; |
|
|
|
|
}, [rateDetail]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View style={tw("flex flex-row-reverse")}> |
|
|
|
|
<Pressable |
|
|
|
@ -28,7 +60,7 @@ function Rates({ rate, productId, addVote, isBuyed = null, theme }) { |
|
|
|
|
}, |
|
|
|
|
]} |
|
|
|
|
> |
|
|
|
|
{rate} |
|
|
|
|
{rate || 4} |
|
|
|
|
</Text> |
|
|
|
|
<Rating |
|
|
|
|
type="star" |
|
|
|
@ -42,7 +74,7 @@ function Rates({ rate, productId, addVote, isBuyed = null, theme }) { |
|
|
|
|
onFinishRating={(rating) => addVote({ productId, vote: rating })} |
|
|
|
|
readonly={!isBuyed} |
|
|
|
|
/> |
|
|
|
|
{/* <Text |
|
|
|
|
<Text |
|
|
|
|
style={{ |
|
|
|
|
fontSize: fontSize.sm, |
|
|
|
|
color: theme === "light" ? "#707070" : Colors.theme1.white, |
|
|
|
@ -50,16 +82,31 @@ function Rates({ rate, productId, addVote, isBuyed = null, theme }) { |
|
|
|
|
marginTop: 5, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{`از بین ${1150} نفر`} |
|
|
|
|
</Text> */} |
|
|
|
|
{`از بین ${allCount} نفر`} |
|
|
|
|
</Text> |
|
|
|
|
</Pressable> |
|
|
|
|
<View style={[tw("flex flex-1"), { width: "60%" }]}> |
|
|
|
|
{[ |
|
|
|
|
{ name: "یک ستاره", value: 40 }, |
|
|
|
|
{ name: "دو ستاره", value: 10 }, |
|
|
|
|
{ name: "سه ستاره", value: 10 }, |
|
|
|
|
{ name: "چهار ستاره", value: 30 }, |
|
|
|
|
{ name: "پنج ستاره", value: 10 }, |
|
|
|
|
{ |
|
|
|
|
name: "یک ستاره", |
|
|
|
|
value: ((oneCount?.count || 0) / allCount) * 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "دو ستاره", |
|
|
|
|
value: ((twoCount?.count || 0) / allCount) * 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "سه ستاره", |
|
|
|
|
value: ((threeCount?.count || 0) / allCount) * 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "چهار ستاره", |
|
|
|
|
value: ((fourCount?.count || 0) / allCount) * 100, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: "پنج ستاره", |
|
|
|
|
value: ((fiveCount?.count || 0) / allCount) * 100, |
|
|
|
|
}, |
|
|
|
|
].map((field, index) => ( |
|
|
|
|
<Progress key={index} data={field} theme={theme} /> |
|
|
|
|
))} |
|
|
|
|