From 024fdd9823ca6b2c8598c369a82e80c4e3ccae60 Mon Sep 17 00:00:00 2001
From: Ste Vadis <stevaidis@gmail.com>
Date: Tue, 12 Sep 2023 22:49:57 +0300
Subject: [PATCH] more code

---
 .env                  |  1 +
 package.json          |  2 +-
 src/App.js            | 11 ++++--
 src/index.css         |  6 ++-
 src/layout/header.jsx |  3 ++
 src/socket.jsx        | 10 ++++-
 src/ui/button.jsx     |  4 +-
 src/ui/icons.jsx      |  8 ++--
 src/ui/title.jsx      |  2 +-
 src/view/Answers.jsx  |  2 +-
 src/view/Create.jsx   |  3 +-
 src/view/Home.jsx     | 87 ++++++++++++++++++++++++++++++-------------
 src/view/Join.jsx     |  2 -
 src/view/Poll.jsx     | 19 ++++++----
 14 files changed, 109 insertions(+), 51 deletions(-)
 create mode 100644 .env

diff --git a/.env b/.env
new file mode 100644
index 0000000..4ace3ec
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+WDS_SOCKET_PORT=443
diff --git a/package.json b/package.json
index 46748cb..2b35d42 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.js b/src/App.js
index 6a2cd64..cae0fb0 100644
--- a/src/App.js
+++ b/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>
   )
diff --git a/src/index.css b/src/index.css
index 4bd8e6d..6eb15f4 100644
--- a/src/index.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/layout/header.jsx b/src/layout/header.jsx
index 0784ab1..7f00a8c 100644
--- a/src/layout/header.jsx
+++ b/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">
diff --git a/src/socket.jsx b/src/socket.jsx
index d334160..cc2e1b1 100644
--- a/src/socket.jsx
+++ b/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);
\ No newline at end of file
+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 92bb6d0..2692a31 100644
--- a/src/ui/button.jsx
+++ b/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(
diff --git a/src/ui/icons.jsx b/src/ui/icons.jsx
index a147d9e..5b08db2 100644
--- a/src/ui/icons.jsx
+++ b/src/ui/icons.jsx
@@ -85,9 +85,9 @@ export const IconCopy = () => <svg
 
 
 export const IconSignal = () => <svg
-    width="32"
-    height="32"
-    viewBox="0 0 18 20"
+    width="30"
+    height="30"
+    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>
\ No newline at end of file
+</svg>
diff --git a/src/ui/title.jsx b/src/ui/title.jsx
index 043d1a4..d3d1f36 100644
--- a/src/ui/title.jsx
+++ b/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>
diff --git a/src/view/Answers.jsx b/src/view/Answers.jsx
index a1832e3..b407988 100644
--- a/src/view/Answers.jsx
+++ b/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>
diff --git a/src/view/Create.jsx b/src/view/Create.jsx
index a6eb665..7d7ad0b 100644
--- a/src/view/Create.jsx
+++ b/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"
diff --git a/src/view/Home.jsx b/src/view/Home.jsx
index e1f0b2c..ddde243 100644
--- a/src/view/Home.jsx
+++ b/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 (
-    <div className="flex flex-col">
-      <Title variant={1} label="Lets make a poll real 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 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">
-          <li className="pl-2">Create the poll with only title and questions.</li>
-          <li className="pl-2">Join the poll with a nickname.</li>
-          <li className="pl-2">Share the poll url to votes.</li>
-        </ul>
-        <p>Surprice the voters, its free!</p>
+  const FRONT_URL="https://poll.vaidis.eu"
+
+  useEffect(() => {
+    if (Object.keys(storage).length > 0) {
+       socket.emit('info', storage);
+    }
+  },[])
+
+  if (list && Object.keys(list).length > 0) {
+    console.log("list:", list);
+    return (
+      <div>
+        <div className="mb-8">
+          <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"
-          label="Create new poll"
-          icon={<IconPlus />}
-          onClick={() => navigate('/create')}
-        />
+    )
+  }
+  else {
+    return (
+      <div className="flex flex-col">
+        <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
diff --git a/src/view/Join.jsx b/src/view/Join.jsx
index da975be..e208b0a 100644
--- a/src/view/Join.jsx
+++ b/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('');
diff --git a/src/view/Poll.jsx b/src/view/Poll.jsx
index aced403..37052fb 100644
--- a/src/view/Poll.jsx
+++ b/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>