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;