From b92acf8d163ff87af0985d15721016eedb8f967c Mon Sep 17 00:00:00 2001 From: Ste Vadis Date: Tue, 18 Mar 2025 08:51:19 +0200 Subject: [PATCH] X --- src/App.js | 18 +++--- src/view/Join.jsx | 10 ++- src/view/Poll.jsx | 162 +++++++++++++++++++++++----------------------- 3 files changed, 99 insertions(+), 91 deletions(-) diff --git a/src/App.js b/src/App.js index e957138..ae6d606 100644 --- a/src/App.js +++ b/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) } diff --git a/src/view/Join.jsx b/src/view/Join.jsx index 7e08f8f..0c6133b 100644 --- a/src/view/Join.jsx +++ b/src/view/Join.jsx @@ -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) }; diff --git a/src/view/Poll.jsx b/src/view/Poll.jsx index 07540a2..8696254 100644 --- a/src/view/Poll.jsx +++ b/src/view/Poll.jsx @@ -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 (
- {poll && -
- - <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> ); }