X
This commit is contained in:
Ste Vadis
parent
23aeb6059f
commit
b92acf8d16
18
src/App.js
18
src/App.js
@ -26,32 +26,32 @@ function App() {
|
||||
|
||||
useEffect(() => {
|
||||
function onConnect(data) {
|
||||
console.log(' 🐞 APP onConnect', data)
|
||||
console.log(' 🐞 onConnect', data)
|
||||
setIsConnected(true)
|
||||
}
|
||||
|
||||
function onDisconnect(data) {
|
||||
console.log(' 🐞 APP onDisconnect', data)
|
||||
console.log(' 🐞 onDisconnect', data)
|
||||
setIsConnected(false)
|
||||
}
|
||||
|
||||
function onCreate(data) {
|
||||
console.log(' 🪲 APP onCreate data:', data)
|
||||
console.log(' 🪲 onCreate data:', data)
|
||||
setAnon(undefined)
|
||||
navigate(`/poll/${data}`)
|
||||
}
|
||||
|
||||
function onExist(data) {
|
||||
console.log(' 🪲 APP onExist data: ', data)
|
||||
console.log(' 🪲 onExist data: ', data)
|
||||
setExist(Boolean(data))
|
||||
if (data) {
|
||||
console.log(' 🪲 APP onExist join: ', data)
|
||||
console.log(' 🪲 onExist join: ', data)
|
||||
socket.emit('join', data);
|
||||
}
|
||||
}
|
||||
|
||||
function onJoin(data) {
|
||||
console.log(' 🪲 APP onJoin data: ', data)
|
||||
console.log(' 🪲 onJoin data: ', data)
|
||||
setUser(data.user)
|
||||
if (data.code === 401) {
|
||||
navigate(`/poll/${data.pid}/join`)
|
||||
@ -63,19 +63,19 @@ function App() {
|
||||
}
|
||||
|
||||
function onPoll(data) {
|
||||
console.log(' 🪲 APP onPoll data: ', data)
|
||||
console.log(' 🪲 onPoll data: ', data)
|
||||
setPoll(data.poll)
|
||||
}
|
||||
|
||||
function onInfo(data) {
|
||||
console.log(' 🪲 APP onInfo data: ', data)
|
||||
console.log(' 🪲 onInfo data: ', data)
|
||||
if (data.anonymous !== undefined) {
|
||||
setAnon(data.anonymous)
|
||||
}
|
||||
}
|
||||
|
||||
function onList(data) {
|
||||
console.log(' 🪲 APP onList data: ', data)
|
||||
console.log(' 🪲 onList data: ', data)
|
||||
setList(data)
|
||||
}
|
||||
|
||||
|
||||
@ -15,7 +15,15 @@ const Join = (props) => {
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const data = {pid:id, user:user};
|
||||
const data = {
|
||||
pid:id,
|
||||
user:user,
|
||||
userData: {
|
||||
appVersion: window.navigator.appVersion,
|
||||
language: window.navigator.language,
|
||||
userAgentData: window.navigator.userAgentData,
|
||||
}
|
||||
};
|
||||
socket.emit('join', data);
|
||||
console.log('JOIN emit.join.data: ', data)
|
||||
};
|
||||
|
||||
@ -42,33 +42,33 @@ function Poll(props) {
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
console.log('POLL 🎱 id:', id)
|
||||
console.log('POLL 🎱 token:', Boolean(token))
|
||||
const data = {pid:id};
|
||||
console.log(' 💾 POLL emit.join.data:', data)
|
||||
const data = {
|
||||
pid:id,
|
||||
userData: {
|
||||
appVersion: window.navigator.appVersion,
|
||||
language: window.navigator.language,
|
||||
languages: window.navigator.languages,
|
||||
userAgentData: window.navigator.userAgentData,
|
||||
screen: window.screen
|
||||
}
|
||||
}
|
||||
console.log(' 🎱 id:', id)
|
||||
console.log(' 🎱 token:', Boolean(token))
|
||||
socket.emit('join', data);
|
||||
}
|
||||
if (token) {
|
||||
console.log('POLL 🎱 id:', id)
|
||||
console.log('POLL 🎱 token:', Boolean(token))
|
||||
const data = {pid:id, token: token};
|
||||
console.log(' 💾 POLL emit.join.data:', data)
|
||||
console.log(' 🎱 id:', id)
|
||||
console.log(' 🎱 token:', Boolean(token))
|
||||
socket.emit('join', data);
|
||||
}
|
||||
},[id, token])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('POLL 🎱 id:', id)
|
||||
console.log('POLL 🎱 exist:', exist)
|
||||
console.log('POLL 🎱 anon:', anon)
|
||||
console.log('POLL 🎱 user:', user)
|
||||
console.log('POLL 🎱 token:', Boolean(token))
|
||||
console.log('POLL 🎱 poll:', poll)
|
||||
|
||||
if (token) {
|
||||
console.log('POLL 🎱 id:', id)
|
||||
console.log('POLL 🎱 token:', Boolean(token))
|
||||
console.log('POLL emit.poll.token:', token)
|
||||
console.log(' 🎱 id:', id)
|
||||
console.log(' 🎱 token:', Boolean(token))
|
||||
console.log(' emit.poll.token:', token)
|
||||
socket.emit('poll', token);
|
||||
}
|
||||
},[token])
|
||||
@ -81,71 +81,71 @@ function Poll(props) {
|
||||
|
||||
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} pid={id} user={user} socket={socket} token={token}/>
|
||||
</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-xs">
|
||||
{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 className="flex flex-row justify-center">
|
||||
|
||||
<div className="mr-4">
|
||||
<ViberShareButton url={shareUrl}>
|
||||
<ViberIcon size={32} round />
|
||||
</ViberShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<FacebookShareButton url={shareUrl}>
|
||||
<FacebookIcon size={32} round />
|
||||
</FacebookShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<LinkedinShareButton url={shareUrl}>
|
||||
<LinkedinIcon size={32} round />
|
||||
</LinkedinShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<TwitterShareButton url={shareUrl}>
|
||||
<TwitterIcon size={32} round />
|
||||
</TwitterShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<TelegramShareButton url={shareUrl}>
|
||||
<TelegramIcon size={32} round />
|
||||
</TelegramShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<WhatsappShareButton url={shareUrl}>
|
||||
<WhatsappIcon size={32} round />
|
||||
</WhatsappShareButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{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} pid={id} user={user} socket={socket} token={token}/>
|
||||
</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-xs">
|
||||
{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 className="flex flex-row justify-center">
|
||||
|
||||
<div className="mr-4">
|
||||
<ViberShareButton url={shareUrl}>
|
||||
<ViberIcon size={32} round />
|
||||
</ViberShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<FacebookShareButton url={shareUrl}>
|
||||
<FacebookIcon size={32} round />
|
||||
</FacebookShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<LinkedinShareButton url={shareUrl}>
|
||||
<LinkedinIcon size={32} round />
|
||||
</LinkedinShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<TwitterShareButton url={shareUrl}>
|
||||
<TwitterIcon size={32} round />
|
||||
</TwitterShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<TelegramShareButton url={shareUrl}>
|
||||
<TelegramIcon size={32} round />
|
||||
</TelegramShareButton>
|
||||
</div>
|
||||
|
||||
<div className="mr-4">
|
||||
<WhatsappShareButton url={shareUrl}>
|
||||
<WhatsappIcon size={32} round />
|
||||
</WhatsappShareButton>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user