fixed

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>
             )
           })

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 (

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>
   );