import './App.css';
import React, { useState, useEffect } from 'react';

function App() {

  const [activeGames, setActiveGames] = useState(null);

  useEffect(() => {
    fetch('/api/activegames')
      .then((response) => response.json())
      .then((games) => {
        console.log(games.ActiveGames.length);
        console.log("games: " +games.ActiveGames);
        setActiveGames(games.ActiveGames);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>
          Here is list of your active games: {activeGames ? <span>{activeGames}</span> : <span>Loading...</span>}
        </p>
      </header>
    </div>
  );
}

export default App;