77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
import { useState, useEffect, useRef, useContext } from "react";
|
|
import classNames from "classnames";
|
|
|
|
const Answers = (props) => {
|
|
const { poll, user, socket, id, pid } = props;
|
|
const [winner, setWinner] = useState(0);
|
|
const token = localStorage.getItem(id)
|
|
|
|
const onVote = async (answer) => {
|
|
const data = { user:user, answer:answer, pid:pid, token:token }
|
|
socket.emit("vote", data);
|
|
};
|
|
|
|
useEffect(() => {
|
|
var res = poll.users.reduce(function (obj, v) {
|
|
obj[v.vote] = (obj[v.vote] || 0) + 1;
|
|
return obj;
|
|
}, {})
|
|
const arr = Object.values(res);
|
|
const max = Math.max(...arr)
|
|
setWinner(max)
|
|
}, [poll])
|
|
|
|
const countVotes = (index) => {
|
|
let count = 0
|
|
poll.users.filter(function (item) {
|
|
if (item.vote === index) {
|
|
count = count + 1
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className={`w-2/12 py-2 text-white text-2xl text-center rounded-l-lg ${winner === count ? 'bg-lime-500' : 'bg-black bg-opacity-40'} `}>
|
|
{count}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const buttonCN = classNames(`w-10/12 text-center bg-white w`)
|
|
|
|
return (
|
|
<div>
|
|
{poll.answers.map((answer, index) => (
|
|
<div key={index} className="flex flex-col my-8">
|
|
<div className="flex flex-row">
|
|
{countVotes(index)}
|
|
<button className="w-10/12 p-2 text-center text-black align-middle bg-white rounded-r-lg drop-shadow-lg" onClick={() => onVote(index)} >
|
|
{answer}
|
|
</button>
|
|
</div>
|
|
<div className="mt-2">
|
|
{
|
|
poll.users.map((user, i) => {
|
|
if (user.name != props.user && poll.anonymous) {
|
|
return null
|
|
}
|
|
if (index === user.vote) {
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={` text-white text-sm float-left py-1 px-2 mr-2 mb-2 rounded-md ${user.name === props.user ? 'bg-blue-500 bg-opacity-100' : 'bg-black bg-opacity-40'}`}
|
|
>
|
|
{user.name === props.user && <span className="mr-2">✪</span>}
|
|
{poll.anonymous ? 'Me' : user.name}
|
|
</div>)
|
|
}
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Answers
|