more code

.env

@@ -0,0 +1 @@
+WDS_SOCKET_PORT=443

package.json

@@ -16,7 +16,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "export PORT=80; react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.js

@@ -19,6 +19,7 @@ function App() {
   const [data, setData] = useState();
   const [poll, setPoll] = useState();
   const [user, setUser] = useState();
+  const [list, setList] = useState();
   const [isConnected, setIsConnected] = useState(socket.connected);
   const navigate = useNavigate();
 
@@ -45,12 +46,17 @@ function App() {
       console.log('APP onPoll data: ', data)
       setPoll(data)
     }
+    function onInfo(data) {
+      console.log('APP onInfo data: ', data)
+      setList(data)
+    }
 
     socket.on('connect', onConnect);
     socket.on('disconnect', onDisconnect);
     socket.on('create', onCreate);
     socket.on('register', onRegister);
     socket.on('poll', onPoll);
+    socket.on('info', onInfo);
 
     return () => {
       socket.off('connect', onConnect);
@@ -58,6 +64,7 @@ function App() {
       socket.off('create', onCreate);
       socket.off('register', onRegister);
       socket.off('poll', onPoll);
+      socket.off('info', onInfo);
     };
   }, []);
 
@@ -67,15 +74,13 @@ function App() {
       <div className="mx-4">
         <div className="max-w-md mt-8 mx-auto mr-2rounded-xl overflow-hidden md:max-w-2xl bg-black bg-opacity-50 shadow-lg py-6 px-6">
           <Routes>
-            <Route path="/" element={<Home />} />
+            <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/join" element={<Join socket={socket} />} />
           </Routes>
         </div>
       </div>
-      {/* <ConnectionState isConnected={isConnected} /> */}
-      {/* <ConnectionManager /> */}
       <Footer />
     </div>
   )

src/index.css

@@ -17,6 +17,10 @@
   }
 }
 
+html {
+  font-size: 14px;
+}
+
 body {
   background: linear-gradient(126deg, #0094a1, #b03ab6);
   background-size: 400% 400%;
@@ -193,4 +197,4 @@ input:checked + .toggle-bg:after {
 
 input:checked + .toggle-bg {
   @apply bg-blue-600 border-blue-600;
-}
+}

src/layout/header.jsx

@@ -8,6 +8,9 @@ const Header = () => {
     return (
         <div className="flex flex-grow justify-between bg-black bg-opacity-40 p-2">
             <div className="flex flex-row cursor-pointer" onClick={() => navigate('/')}>
+                <div className="mr-0">
+                    <IconSignal />
+                </div>
                 <div className="text-2xl font-bold text-white mt-1">Poll</div>
             </div>
             <div className="m-1">

src/socket.jsx

@@ -1,5 +1,11 @@
 import { io } from 'socket.io-client';
 
-const URL = 'http://192.168.1.14:4000';
+const options = {
+	rejectUnauthorized: false, // allow self-signed certs
+	requestCert: false,
+	secure: false
+};
 
-export const socket = io(URL);
+const URL = 'https://pollback.vaidis.eu';
+
+export const socket = io(URL, options);

src/ui/button.jsx

@@ -8,9 +8,9 @@ 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';
+  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 clsDisabled = 'text-slate-500 bg-black';
-  const clsBig = `p-4`
+  const clsBig = `p-5`
   const clsSmall = `py-1 px-3`
 
   const cls = classNames(

src/ui/icons.jsx

@@ -85,9 +85,9 @@ export const IconCopy = () => <svg
 
 
 export const IconSignal = () => <svg
-    width="32"
+    width="30"
-    height="32"
+    height="30"
-    viewBox="0 0 18 20"
+    viewBox="0 0 16 20"
     fill="white"
 >
     <path
@@ -122,4 +122,4 @@ export const IconPlus = () => <svg
 >
     <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z" />
     <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" />
-</svg>
+</svg>

src/ui/title.jsx

@@ -2,7 +2,7 @@ export const Title = ({ label, variant }) => {
   const Heading = `h${variant}`;
 
   return (
-  <Heading className="text-white font-medium leading-tight text-primary inline-block align-middle">
+  <Heading className="text-white text-2xl font-medium leading-tight text-primary inline-block align-middle">
     {variant === 1 && <span className="mr-4">&#9733;</span>}
     {label}
   </Heading>

src/view/Answers.jsx

@@ -44,7 +44,7 @@ const Answers = (props) => {
         <div key={index} className="flex flex-col my-8">
           <div className="flex flex-row">
             {countVotes(index)}
-            <button className="w-10/12 p-2 text-center align-middle bg-white rounded-r-lg drop-shadow-lg" onClick={() => onVote(index)} >
+            <button className="w-10/12 p-2 text-center text-black align-middle bg-white rounded-r-lg drop-shadow-lg" onClick={() => onVote(index)} >
               {answer}
             </button>
           </div>

src/view/Create.jsx

@@ -19,6 +19,7 @@ const Create = (props) => {
   });
 
   useEffect(() => {
+    // todo: validate for spaces only answer
     if (
       formData.answers.indexOf("") === -1 &&
       formData.answers.length > 1 &&
@@ -136,7 +137,7 @@ const Create = (props) => {
           </div>
         </div>
 
-        <div className="mt-4 ml-4 w-full">
+        <div className="mt-10 ml-4 w-full">
           <Checkbox
             id='anon'
             label="Don't show voters names"

src/view/Home.jsx

@@ -1,36 +1,73 @@
-import { useNavigate } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { useNavigate, Link} from "react-router-dom";
 
 import { Title } from "../ui/title";
 import { Button } from "../ui/button";
 import { IconPlus } from "../ui/icons";
 
-const Home = () => {
+const Home = (props) => {
+  const { list, socket } = props;
+  const storage = localStorage
   const navigate = useNavigate();
-  return (
+  const FRONT_URL="https://poll.vaidis.eu"
-    <div className="flex flex-col">
+
-      <Title variant={1} label="Lets make a poll real fast!" />
+  useEffect(() => {
-      <div className="text-white my-8">
+    if (Object.keys(storage).length > 0) {
-        <p><span className="mr-4">&#9734;</span>$0 cost.</p>
+       socket.emit('info', storage);
-        <p><span className="mr-4">&#9734;</span>No sign up. No personal data.</p>
+    }
-        <p><span className="mr-4">&#9734;</span>Anonymous voting option available!</p>
+  },[])
-        <p><span className="mr-4">&#9734;</span>Blazing fast poll creation with only 3 quick steps:</p>
+
-        <ul className="list-decimal my-8 pl-12">
+  if (list && Object.keys(list).length > 0) {
-          <li className="pl-2">Create the poll with only title and questions.</li>
+    console.log("list:", list);
-          <li className="pl-2">Join the poll with a nickname.</li>
+    return (
-          <li className="pl-2">Share the poll url to votes.</li>
+      <div>
-        </ul>
+        <div className="mb-8">
-        <p>Surprice the voters, its free!</p>
+          <Title variant={1} label="Your polls:" />
+        </div>
+        <ul className="text-white">
+        {
+          list && list.map((item, index) => {
+            return (
+              <li className="my-6" key={index}><Link to={`${FRONT_URL}/poll/${item.id}`}>
+                &#9734; {item.title} 
+              <span className="text-gray-500"> ({item.users})</span>
+              </Link></li>
+            )
+          })
+        }
+      </ul>
       </div>
-      <div className="w-15">
+    )
-        <Button
+  }
-          className="p-15"
+  else {
-          label="Create new poll"
+    return (
-          icon={<IconPlus />}
+      <div className="flex flex-col">
-          onClick={() => navigate('/create')}
+        <Title variant={1} label="Lets make a poll really fast!" />
-        />
+        <div className="text-white my-8">
+          <p><span className="mr-4">&#9734;</span>$0 cost.</p>
+          <p><span className="mr-4">&#9734;</span>No sign up. No personal data.</p>
+          <p><span className="mr-4">&#9734;</span>Anonymous voting available!</p>
+          <br/>
+          <p>Just 3 quick steps:</p>
+          <ul className="list-decimal my-8 pl-6">
+            <li className="pl-2"><strong>Create</strong> the poll only with title and questions.</li>
+            <li className="pl-2"><strong>Join</strong> the poll with a nickname.</li>
+            <li className="pl-2"><strong>Share</strong> the poll url to voters.</li>
+          </ul>
+          <p>Surprice the voters, its free!</p>
+        </div>
+        <div className="w-15">
+          <Button
+            className="p-25"
+            label="Create new poll"
+            icon={<IconPlus />}
+            onClick={() => navigate('/create')}
+            big={true}
+          />
+        </div>
       </div>
-    </div>
+    )
-  )
+  }
 }
 
 export default Home

src/view/Join.jsx

@@ -5,8 +5,6 @@ import { Title } from "../ui/title";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 
-const URL ="http://192.168.1.14:4001" 
-
 const Join = (props) => {
   const {socket} = props
   const [user, setUser] = useState('');

src/view/Poll.jsx

@@ -6,13 +6,16 @@ import { Title } from "../ui/title";
 import Answers from './Answers'
 
 function Poll(props) {
-  const { user, poll, socket } = props
-  const navigate = useNavigate();
-  const { id } = useParams();
-  const token = localStorage.getItem(id)
-  const [copied, setCopied] = useState(false);
   console.log('Poll props:', props)
-  const FRONT_URL = "http://192.168.1.14:3000"
+
+  const { user, poll, socket } = props
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const token = localStorage.getItem(id)
+  const FRONT_URL = "https://poll.vaidis.eu"
+
+  const [copied, setCopied] = useState(false);
+
   useEffect(() => {
     if (!token) {
       return navigate(`/poll/${id}/join`)
@@ -33,7 +36,7 @@ function Poll(props) {
       {poll &&
         <div className="mb-8">
           <Title variant={1} label={poll.title} />
-          <p className="text-white text-sm">Hello <strong>{user}</strong>, please choose the answer you like</p>
+          <p className="text-white mt-6 text-sm">Hello <strong>{user}</strong>, please choose the answer you like</p>
           <Answers poll={poll} id={id} user={user} socket={socket} />
         </div>
       }
@@ -45,7 +48,7 @@ function Poll(props) {
             {FRONT_URL}/poll/{id}
           </div>
           <div className="">
-            <CopyToClipboard onCopy={onCopy} text={`${URL}/poll/${id}`}>
+            <CopyToClipboard onCopy={onCopy} text={`${FRONT_URL}/poll/${id}`}>
               <i className="flex mr-2 gg-copy"></i>
             </CopyToClipboard>
           </div>