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(() => {
|
useEffect(() => {
|
||||||
function onConnect(data) {
|
function onConnect(data) {
|
||||||
console.log(' 🐞 APP onConnect', data)
|
console.log(' 🐞 onConnect', data)
|
||||||
setIsConnected(true)
|
setIsConnected(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDisconnect(data) {
|
function onDisconnect(data) {
|
||||||
console.log(' 🐞 APP onDisconnect', data)
|
console.log(' 🐞 onDisconnect', data)
|
||||||
setIsConnected(false)
|
setIsConnected(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCreate(data) {
|
function onCreate(data) {
|
||||||
console.log(' 🪲 APP onCreate data:', data)
|
console.log(' 🪲 onCreate data:', data)
|
||||||
setAnon(undefined)
|
setAnon(undefined)
|
||||||
navigate(`/poll/${data}`)
|
navigate(`/poll/${data}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onExist(data) {
|
function onExist(data) {
|
||||||
console.log(' 🪲 APP onExist data: ', data)
|
console.log(' 🪲 onExist data: ', data)
|
||||||
setExist(Boolean(data))
|
setExist(Boolean(data))
|
||||||
if (data) {
|
if (data) {
|
||||||
console.log(' 🪲 APP onExist join: ', data)
|
console.log(' 🪲 onExist join: ', data)
|
||||||
socket.emit('join', data);
|
socket.emit('join', data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onJoin(data) {
|
function onJoin(data) {
|
||||||
console.log(' 🪲 APP onJoin data: ', data)
|
console.log(' 🪲 onJoin data: ', data)
|
||||||
setUser(data.user)
|
setUser(data.user)
|
||||||
if (data.code === 401) {
|
if (data.code === 401) {
|
||||||
navigate(`/poll/${data.pid}/join`)
|
navigate(`/poll/${data.pid}/join`)
|
||||||
@ -63,19 +63,19 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onPoll(data) {
|
function onPoll(data) {
|
||||||
console.log(' 🪲 APP onPoll data: ', data)
|
console.log(' 🪲 onPoll data: ', data)
|
||||||
setPoll(data.poll)
|
setPoll(data.poll)
|
||||||
}
|
}
|
||||||
|
|
||||||
function onInfo(data) {
|
function onInfo(data) {
|
||||||
console.log(' 🪲 APP onInfo data: ', data)
|
console.log(' 🪲 onInfo data: ', data)
|
||||||
if (data.anonymous !== undefined) {
|
if (data.anonymous !== undefined) {
|
||||||
setAnon(data.anonymous)
|
setAnon(data.anonymous)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onList(data) {
|
function onList(data) {
|
||||||
console.log(' 🪲 APP onList data: ', data)
|
console.log(' 🪲 onList data: ', data)
|
||||||
setList(data)
|
setList(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,15 @@ const Join = (props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const submit = () => {
|
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);
|
socket.emit('join', data);
|
||||||
console.log('JOIN emit.join.data: ', data)
|
console.log('JOIN emit.join.data: ', data)
|
||||||
};
|
};
|
||||||
|
|||||||
@ -42,33 +42,33 @@ function Poll(props) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!token) {
|
if (!token) {
|
||||||
console.log('POLL 🎱 id:', id)
|
const data = {
|
||||||
console.log('POLL 🎱 token:', Boolean(token))
|
pid:id,
|
||||||
const data = {pid:id};
|
userData: {
|
||||||
console.log(' 💾 POLL emit.join.data:', data)
|
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);
|
socket.emit('join', data);
|
||||||
}
|
}
|
||||||
if (token) {
|
if (token) {
|
||||||
console.log('POLL 🎱 id:', id)
|
|
||||||
console.log('POLL 🎱 token:', Boolean(token))
|
|
||||||
const data = {pid:id, token: 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);
|
socket.emit('join', data);
|
||||||
}
|
}
|
||||||
},[id, token])
|
},[id, token])
|
||||||
|
|
||||||
useEffect(() => {
|
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) {
|
if (token) {
|
||||||
console.log('POLL 🎱 id:', id)
|
console.log(' 🎱 id:', id)
|
||||||
console.log('POLL 🎱 token:', Boolean(token))
|
console.log(' 🎱 token:', Boolean(token))
|
||||||
console.log('POLL emit.poll.token:', token)
|
console.log(' emit.poll.token:', token)
|
||||||
socket.emit('poll', token);
|
socket.emit('poll', token);
|
||||||
}
|
}
|
||||||
},[token])
|
},[token])
|
||||||
@ -81,71 +81,71 @@ function Poll(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="poll">
|
<div className="poll">
|
||||||
{poll &&
|
{poll &&
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<Title variant={1} label={poll.title} />
|
<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>
|
<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}/>
|
<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>
|
||||||
|
}
|
||||||
|
{/* 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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user