50 lines
1.2 KiB
JavaScript
50 lines
1.2 KiB
JavaScript
import './App.css';
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
BrowserRouter,
|
|
Routes,
|
|
Route,
|
|
} from "react-router-dom";
|
|
|
|
import Header from "./Header"
|
|
import Leaderboard from "./Leaderboard";
|
|
import GameProposal from "./GameProposal";
|
|
|
|
function App() {
|
|
const [games, setGames] = useState(null);
|
|
const [polling, setPolling] = useState(false);
|
|
|
|
const pollGames = useCallback(() => {
|
|
if (polling)
|
|
return;
|
|
|
|
setPolling(true);
|
|
fetch('/api/gamestate')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
setGames(data);
|
|
setPolling(false);
|
|
})
|
|
.catch(err => console.log(err.message));
|
|
}, [polling]);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(pollGames(), 35 * 1000); // <<-- poll new gamestates every 35 sec
|
|
return clearInterval(timer);
|
|
}, [pollGames])
|
|
|
|
return <div className="App">
|
|
<BrowserRouter>
|
|
<Header/>
|
|
<div className="Container">
|
|
<Routes>
|
|
<Route path="/leaderboard" element={<Leaderboard/>} />
|
|
<Route path="/gameproposal" element={<GameProposal games={games}/>} />
|
|
</Routes>
|
|
</div>
|
|
</BrowserRouter>
|
|
</div>
|
|
}
|
|
|
|
export default App;
|