stevaidis/poll-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more code

Browse Source
This commit is contained in:
Ste Vadis 2023-09-12 22:49:57 +03:00
parent 565e9c9804
commit 024fdd9823
14 changed files with 109 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env Normal file
View File

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

2
package.json
View File

@ -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"

11
src/App.js
View File

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

6
src/index.css
View File

@ -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;
}
}

3
src/layout/header.jsx
View File

@ -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">

10
src/socket.jsx
View File

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

4
src/ui/button.jsx
View File

@ -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(

8
src/ui/icons.jsx
View File

@ -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>
</svg>

2
src/ui/title.jsx
View File

@ -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>

2
src/view/Answers.jsx
View File

@ -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>

3
src/view/Create.jsx
View File

@ -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"

87
src/view/Home.jsx
View File

@ -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

2
src/view/Join.jsx
View File

@ -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('');

19
src/view/Poll.jsx
View File

@ -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>