diff --git a/.env b/.env index 4ace3ec..0efd8b0 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -WDS_SOCKET_PORT=443 +WDS_SOCKET_PORT=4000 diff --git a/package-lock.json b/package-lock.json index 9ede0b7..eb0979d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.15.0", "react-scripts": "5.0.1", + "react-share": "^4.4.1", "socket.io-client": "^4.7.2", "web-vitals": "^2.1.4" }, @@ -11990,6 +11991,27 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==", + "dependencies": { + "debug": "^2.1.3" + } + }, + "node_modules/jsonp/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/jsonp/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/jsonpath": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz", @@ -14858,6 +14880,22 @@ } } }, + "node_modules/react-share": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-share/-/react-share-4.4.1.tgz", + "integrity": "sha512-AJ9m9RiJssqvYg7MoJUc9J0D7b/liWrsfQ99ndKc5vJ4oVHHd4Fy87jBlKEQPibT40oYA3AQ/a9/oQY6/yaigw==", + "dependencies": { + "classnames": "^2.3.2", + "jsonp": "^0.2.1" + }, + "engines": { + "node": ">=6.9.0", + "npm": ">=5.0.0" + }, + "peerDependencies": { + "react": "^16.3.0 || ^17 || ^18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 2b35d42..01d5e73 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,12 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.15.0", "react-scripts": "5.0.1", + "react-share": "^4.4.1", "socket.io-client": "^4.7.2", "web-vitals": "^2.1.4" }, "scripts": { - "start": "export PORT=80; react-scripts start", + "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" diff --git a/src/App.js b/src/App.js index 5a93504..854f03d 100644 --- a/src/App.js +++ b/src/App.js @@ -18,52 +18,68 @@ function App() { const [data, setData] = useState(); const [poll, setPoll] = useState(); const [user, setUser] = useState(); + const [anon, setAnon] = useState(); const [list, setList] = useState(); + const [exist, setExist] = useState(); const [isConnected, setIsConnected] = useState(socket.connected); const navigate = useNavigate(); useEffect(() => { function onConnect() { - console.log('APP onConnect') + console.log(' 🐞 APP onConnect') setIsConnected(true); } function onDisconnect() { - console.log('APP onDisconnect') + console.log(' 🐞 APP onDisconnect') setIsConnected(false); } function onCreate(data) { - console.log('APP onCreate') + console.log(' 🪲 APP onCreate') navigate(`/poll/${data}`) } - function onRegister(data) { - console.log('APP onRegister data: ', data) + function onJoin(data) { + console.log(' 🪲 APP onJoin data: ', data) setUser(data.user) - localStorage.setItem(data.poll, data.token) - navigate(`/poll/${data.poll}`) + localStorage.setItem(data.pid, data.token) + navigate(`/poll/${data.pid}`) } function onPoll(data) { - console.log('APP onPoll data: ', data) - setPoll(data) + console.log(' 🪲 APP onPoll data: ', data) + setPoll(data.poll) + setUser(data.user) + } + function onExist(data) { + console.log(' 🪲 APP onExist data: ', data) + setExist(data) } function onInfo(data) { - console.log('APP onInfo data: ', data) + console.log(' 🪲 APP onInfo data: ', data) + if (data?.anonymous) { + setAnon(data.anonymous) + } + } + function onList(data) { + console.log(' 🪲 APP onList data: ', data) setList(data) } - socket.on('connect', onConnect); - socket.on('disconnect', onDisconnect); socket.on('create', onCreate); - socket.on('register', onRegister); + socket.on('join', onJoin); socket.on('poll', onPoll); + socket.on('exist', onExist); socket.on('info', onInfo); + socket.on('list', onList); + socket.on('disconnect', onDisconnect); return () => { socket.off('connect', onConnect); - socket.off('disconnect', onDisconnect); socket.off('create', onCreate); - socket.off('register', onRegister); + socket.off('join', onJoin); socket.off('poll', onPoll); + socket.off('exist', onExist); socket.off('info', onInfo); + socket.off('list', onList); + socket.off('disconnect', onDisconnect); }; }, []); @@ -75,7 +91,7 @@ function App() { } /> } /> - } /> + } /> } /> @@ -86,3 +102,4 @@ function App() { } export default App; + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 92295c7..a14280d 100644 --- a/src/index.js +++ b/src/index.js @@ -7,11 +7,9 @@ import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - ); // If you want to start measuring performance in your app, pass a function diff --git a/src/socket.jsx b/src/socket.jsx index cc2e1b1..b933535 100644 --- a/src/socket.jsx +++ b/src/socket.jsx @@ -6,6 +6,7 @@ const options = { secure: false }; -const URL = 'https://pollback.vaidis.eu'; +const URL = 'http://localhost:4000'; +// const URL = 'https://pollback.vaidis.eu'; export const socket = io(URL, options); diff --git a/src/ui/button.jsx b/src/ui/button.jsx index 2692a31..10385a1 100644 --- a/src/ui/button.jsx +++ b/src/ui/button.jsx @@ -8,7 +8,7 @@ export const Button = ({ big }) => { const clsCommon = 'flex text-white text-center w-full justify-center rounded-lg'; - const clsEnabled = 'bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 focus:outline-none shadow-md rounded-lg mx-auto shadow-black'; + const clsEnabled = 'bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 focus:outline-none shadow-lg rounded-lg mx-auto shadow-gray-800'; const clsDisabled = 'text-slate-500 bg-black'; const clsBig = `p-5` const clsSmall = `py-1 px-3` diff --git a/src/view/Home.jsx b/src/view/Home.jsx index 686b9df..b7a501c 100644 --- a/src/view/Home.jsx +++ b/src/view/Home.jsx @@ -1,5 +1,5 @@ import { useState, useEffect } from "react"; -import { useNavigate, Link} from "react-router-dom"; +import { useNavigate, useLocation, Link} from "react-router-dom"; import { Title } from "../ui/title"; import { Button } from "../ui/button"; @@ -9,11 +9,15 @@ const Home = (props) => { const { list, socket } = props; const storage = localStorage const navigate = useNavigate(); + const location = useLocation(); const FRONT_URL="https://poll.vaidis.eu" + console.log("HOME storage:", storage) + console.log("HOME location:", location.pathname) + useEffect(() => { if (Object.keys(storage).length > 0) { - socket.emit('info', storage); + socket.emit('list', storage); } },[]) @@ -28,10 +32,10 @@ const Home = (props) => { { list && list.map((item, index) => { return ( -
  • +
  • ☆ {item.title} ({item.users}) - {item.anonymous && anonymous} + {item.anonymous ? anonymous : {item.user}}
    • ) }) diff --git a/src/view/Join.jsx b/src/view/Join.jsx index e208b0a..7e08f8f 100644 --- a/src/view/Join.jsx +++ b/src/view/Join.jsx @@ -15,9 +15,9 @@ const Join = (props) => { }; const submit = () => { - const data = {poll:id, user:user}; - socket.emit('join', data); // triggers onRegister - console.log('JOIN submit data: ', data) + const data = {pid:id, user:user}; + socket.emit('join', data); + console.log('JOIN emit.join.data: ', data) }; return ( diff --git a/src/view/Poll.jsx b/src/view/Poll.jsx index 8f57e4c..c9ee14a 100644 --- a/src/view/Poll.jsx +++ b/src/view/Poll.jsx @@ -1,18 +1,26 @@ import { useState, useEffect } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { CopyToClipboard } from "react-copy-to-clipboard"; +import { + FacebookShareButton, + FacebookIcon, + ViberShareButton, + ViberIcon, + LinkedinShareButton, + LinkedinIcon, + TelegramShareButton, + TwitterShareButton } from "react-share"; import { Title } from "../ui/title"; import Answers from './Answers' function Poll(props) { - console.log('Poll props:', props) - - const { user, poll, socket } = props + const { user, anon, poll, exist, socket } = props const { id } = useParams(); const navigate = useNavigate(); const token = localStorage.getItem(id) - const FRONT_URL = "https://poll.vaidis.eu" + const FRONT_URL = `https://${window.location.hostname}` + const shareUrl = `${FRONT_URL}/poll/${id}` const [copied, setCopied] = useState(false); @@ -29,17 +37,30 @@ function Poll(props) { } useEffect(() => { - if (!token && poll?.anonymous) { - const data = {poll:id, user:randomUser(24)}; - socket.emit('join', data); + console.log('POLL props:', props) + + if (exist === undefined) { + console.log('POLL emit.exist.id:', id) + socket.emit('exist', id) } - if (!token && !poll?.anonymous) { + if (anon === undefined) { + console.log('POLL emit.info.id:', id) + socket.emit('info', id) + } + if (exist && !token && anon) { + const data = {pid:id, user:randomUser(24)}; + socket.emit('join', data); + console.log('POLL emit.join.data:', data) + } + if (exist && !token && anon !== undefined && !anon) { + console.log('POLL redirect anon:', JSON.stringify(anon)) return navigate(`/poll/${id}/join`) } - if (token) { + if (exist && token) { + console.log('POLL emit.poll.token:', token) socket.emit('poll', token); } - }, [id, token, navigate]); + },[user, exist, anon]) const onCopy = () => { console.log('onCopy') @@ -47,7 +68,6 @@ function Poll(props) { setTimeout(() => setCopied(false), 2000); } - return (
    {poll && @@ -59,6 +79,7 @@ function Poll(props) { } {/* SHARE */}
    +

    Share the poll URL to the voters

    @@ -73,6 +94,31 @@ function Poll(props) {
    Copied
    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    );