fixed

2023-09-13 23:04:06 +03:00 · 2023-09-13 23:04:06 +03:00 · 510ece7157
commit 510ece7157
parent 1231bccc15
10 changed files with 145 additions and 40 deletions
--- a/.env
+++ b/.env
@ -1 +1 @@
-WDS_SOCKET_PORT=443
+WDS_SOCKET_PORT=4000
--- 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",
--- 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"
--- 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() {
          <Routes>
            <Route path="/" element={<Home list={list} socket={socket} />} />
            <Route path="/create" element={<Create socket={socket} io={io} />} />
-            <Route path="/poll/:id" element={<Poll socket={socket} io={io} user={user} poll={poll} />} />
+            <Route path="/poll/:id" element={<Poll socket={socket} io={io} user={user} poll={poll} exist={exist} anon={anon}/>} />
            <Route path="/poll/:id/join" element={<Join socket={socket} />} />
          </Routes>
        </div>
@ -86,3 +102,4 @@ function App() {
 }

 export default App;
+ 
--- 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(
-  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
-  </React.StrictMode>
 );

 // If you want to start measuring performance in your app, pass a function
--- 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);
--- 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`
--- 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 (
-              <li className="my-6" key={index}><Link to={`${FRONT_URL}/poll/${item.id}`}>
+              <li className="my-6" key={index}><Link to={`/poll/${item.id}`}>
                &#9734; {item.title} 
              <span className="text-gray-500"> ({item.users})</span>
-              {item.anonymous && <span>anonymous</span>}
+              {item.anonymous ? <span>anonymous</span> : <span>{item.user}</span>}
              </Link></li>
            )
          })
--- 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 (
--- 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 (
    <div className="poll">
      {poll &&
@ -59,6 +79,7 @@ function Poll(props) {
      }
      {/* 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">
@ -73,6 +94,31 @@ function Poll(props) {
        <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">
+          <div className="mr-4">
+        <FacebookShareButton
+            url={shareUrl}
+            quote={'title'}
+            className="Demo__some-network__share-button"
+          >
+            <FacebookIcon size={32} round />
+          </FacebookShareButton>
+          </div>
+          <div className="mr-4">
+          <ViberShareButton
+            url={shareUrl}
+            title={'title'}
+            className="Demo__some-network__share-button"
+          >
+            <ViberIcon size={32} round />
+          </ViberShareButton>
+          </div>
+          <div className="mr-4">
+          <LinkedinShareButton url={shareUrl} className="Demo__some-network__share-button">
+            <LinkedinIcon size={32} round />
+          </LinkedinShareButton>
+          </div>
+        </div>
      </div>
    </div>
  );