import React, { useState, useEffect } from 'react';
import './Leaderboard.css';
//const Leaderboard = ({hashmap}) => {
// var listItems = Object.keys(hashmap).map(playerName => {
// var rank = hashmap[playerName];
// return
// {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
//
// });
// return ;
const Leaderboard = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/leaderboard')
.then((response) => response.json())
.then((data) => {
setData(data);
})
.catch((err) => {
console.log(err.message);
});
}, []);
if (data == null)
return Loading...
const tableRows = Object.keys(data).map(playerName => {
var rank = data[playerName];
return (
{playerName} |
{rank.gamesPlayed} |
{rank.gamesWon} |
{rank.gamesDraw} |
);
});
return (
Name |
Played |
Won |
Draw |
{ tableRows }
);
};
export default Leaderboard;