85 lines
2.5 KiB
JavaScript
85 lines
2.5 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import { Routes, Route } from "react-router-dom";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
import io from "socket.io-client"
|
|
import { socket } from './socket';
|
|
import { ConnectionState } from './ConnectionState';
|
|
import { ConnectionManager } from './ConnectionManager';
|
|
|
|
import Header from './layout/header';
|
|
import Footer from './layout/footer';
|
|
import Create from './view/Create';
|
|
import Poll from './view/Poll';
|
|
import Join from './view/Join';
|
|
import Home from './view/Home';
|
|
|
|
function App() {
|
|
|
|
const [data, setData] = useState();
|
|
const [poll, setPoll] = useState();
|
|
const [user, setUser] = useState();
|
|
const [isConnected, setIsConnected] = useState(socket.connected);
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
function onConnect() {
|
|
console.log('APP onConnect')
|
|
setIsConnected(true);
|
|
}
|
|
function onDisconnect() {
|
|
console.log('APP onDisconnect')
|
|
setIsConnected(false);
|
|
}
|
|
function onCreate(data) {
|
|
console.log('APP onCreate')
|
|
navigate(`/poll/${data}/join`)
|
|
}
|
|
function onRegister(data) {
|
|
console.log('APP onRegister data: ', data)
|
|
setUser(data.user)
|
|
localStorage.setItem(data.poll, data.token)
|
|
navigate(`/poll/${data.poll}`)
|
|
}
|
|
function onPoll(data) {
|
|
console.log('APP onPoll data: ', data)
|
|
setPoll(data)
|
|
}
|
|
|
|
socket.on('connect', onConnect);
|
|
socket.on('disconnect', onDisconnect);
|
|
socket.on('create', onCreate);
|
|
socket.on('register', onRegister);
|
|
socket.on('poll', onPoll);
|
|
|
|
return () => {
|
|
socket.off('connect', onConnect);
|
|
socket.off('disconnect', onDisconnect);
|
|
socket.off('create', onCreate);
|
|
socket.off('register', onRegister);
|
|
socket.off('poll', onPoll);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen place-content-center">
|
|
<Header />
|
|
<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="/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>
|
|
)
|
|
}
|
|
|
|
export default App;
|