82 lines
2.4 KiB
JavaScript
82 lines
2.4 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { CopyToClipboard } from "react-copy-to-clipboard";
|
|
|
|
import { Title } from "../ui/title";
|
|
import Answers from './Answers'
|
|
|
|
function Poll(props) {
|
|
console.log('Poll props:', props)
|
|
|
|
const { user, poll, socket } = props
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const token = localStorage.getItem(id)
|
|
const FRONT_URL = "https://poll.vaidis.eu"
|
|
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const randomUser = (length) => {
|
|
let result = "";
|
|
const characters = "abcdefghijklmnopqrstuvwxyz123456789";
|
|
const charactersLength = characters.length;
|
|
let counter = 0;
|
|
while (counter < length) {
|
|
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
|
counter += 1;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!token && poll?.anonymous) {
|
|
const data = {poll:id, user:randomUser(24)};
|
|
socket.emit('join', data);
|
|
}
|
|
if (!token && !poll?.anonymous) {
|
|
return navigate(`/poll/${id}/join`)
|
|
}
|
|
if (token) {
|
|
socket.emit('poll', token);
|
|
}
|
|
}, [id, token, navigate]);
|
|
|
|
const onCopy = () => {
|
|
console.log('onCopy')
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="poll">
|
|
{poll &&
|
|
<div className="mb-8">
|
|
<Title variant={1} label={poll.title} />
|
|
<p className="text-white mt-6 text-sm">Hello <strong>{poll.anonymous ? 'Anonymous' : user}</strong>, please choose the answer you like</p>
|
|
<Answers poll={poll} id={id} user={user} socket={socket} />
|
|
</div>
|
|
}
|
|
{/* SHARE */}
|
|
<div className="mt-2 text-white">
|
|
<p className="text-sm mb-3">Share the poll URL to the voters</p>
|
|
<div className="flex p-4 bg-black bg-opacity-20 rounded-xl justify-between">
|
|
<div className="text-sm">
|
|
{FRONT_URL}/poll/{id}
|
|
</div>
|
|
<div className="">
|
|
<CopyToClipboard onCopy={onCopy} text={`${FRONT_URL}/poll/${id}`}>
|
|
<i className="flex mr-2 gg-copy"></i>
|
|
</CopyToClipboard>
|
|
</div>
|
|
</div>
|
|
<div className={`transition-opacity duration-600 flex justify-end text-sm mr-2 ${copied ? 'opacity-100' : 'opacity-0'}`}>
|
|
Copied
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Poll;
|