67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import './Leaderboard.css';
|
|
//const Leaderboard = ({hashmap}) => {
|
|
|
|
// var listItems = Object.keys(hashmap).map(playerName => {
|
|
// var rank = hashmap[playerName];
|
|
|
|
// return <li key={playerName}>
|
|
// {playerName}: played {rank.gamesPlayed}, won {rank.gamesWon}, draw {rank.gamesDraw}
|
|
// </li>
|
|
// });
|
|
|
|
// return <ul>{listItems}</ul>;
|
|
|
|
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 <span>Loading...</span>
|
|
|
|
const tableRows = Object.keys(data).map(playerName => {
|
|
var rank = data[playerName];
|
|
|
|
return (
|
|
<tr key={playerName}>
|
|
<td>{playerName}</td>
|
|
<td>{rank.gamesPlayed}</td>
|
|
<td>{rank.gamesWon}</td>
|
|
<td>{rank.gamesDraw}</td>
|
|
</tr>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="Leaderboard">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Played</th>
|
|
<th>Won</th>
|
|
<th>Draw</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{ tableRows }
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
export default Leaderboard;
|