more code

src/App.js

@@ -15,7 +15,6 @@ import Join from './view/Join';
 import Home from './view/Home';
 
 function App() {
-
   const [data, setData] = useState();
   const [poll, setPoll] = useState();
   const [user, setUser] = useState();
@@ -34,7 +33,7 @@ function App() {
     }
     function onCreate(data) {
       console.log('APP onCreate')
-      navigate(`/poll/${data}/join`)
+      navigate(`/poll/${data}`)
     }
     function onRegister(data) {
       console.log('APP onRegister data: ', data)

src/view/Answers.jsx

@@ -61,7 +61,7 @@ const Answers = (props) => {
                       className={` text-white text-sm float-left py-1 px-2 mr-2 mb-2 rounded-md ${user.name === props.user ? 'bg-blue-500 bg-opacity-100' : 'bg-black bg-opacity-40'}`}
                     >
                       {user.name === props.user && <span className="mr-2">&#10026;</span>}
-                      {user.name}
+                      {poll.anonymous ? 'Me' : user.name}
                     </div>)
                 }
               })

src/view/Create.jsx

@@ -140,7 +140,7 @@ const Create = (props) => {
         <div className="mt-10 ml-4 w-full">
           <Checkbox
             id='anon'
-            label="Don't show voters names"
+            label="Hide voters names (Anonymous voting)"
             onChange={handleAnonymous}
           />
         </div>

src/view/Home.jsx

@@ -31,6 +31,7 @@ const Home = (props) => {
               <li className="my-6" key={index}><Link to={`${FRONT_URL}/poll/${item.id}`}>
                 &#9734; {item.title} 
               <span className="text-gray-500"> ({item.users})</span>
+              {item.anonymous && <span>anonymous</span>}
               </Link></li>
             )
           })

src/view/Poll.jsx

@@ -16,12 +16,29 @@ function Poll(props) {
 
   const [copied, setCopied] = useState(false);
 
+  const randomUser = (length) => {
+    let result = "";
+    const characters = "abcdefghijklmnopqrstuvwxyz123456789";
+    const charactersLength = characters.length;
+    let counter = 0;
+    while (counter < length) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+      counter += 1;
+    }
+    return result;
+  }
+
   useEffect(() => {
-    if (!token) {
+    if (!token && poll?.anonymous) {
+      const data = {poll:id, user:randomUser(24)};
+      socket.emit('join', data);
+    }
+    if (!token && !poll?.anonymous) {
       return navigate(`/poll/${id}/join`)
     }
+    if (token) {
       socket.emit('poll', token);
-    console.log('Poll token:', token)
+    }
   }, [id, token, navigate]);
 
   const onCopy = () => {
@@ -36,7 +53,7 @@ function Poll(props) {
       {poll &&
         <div className="mb-8">
           <Title variant={1} label={poll.title} />
-          <p className="text-white mt-6 text-sm">Hello <strong>{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} id={id} user={user} socket={socket} />
         </div>
       }