function Leaderboard() {
  const api = useContext(ApiContext);
  const [topPlayers, setTopPlayers] = useState(
    localStorage.getItem("topPlayers") !== null
      ? JSON.parse(localStorage.getItem("topPlayers"))
      : null
  );

  // Fetch and save list of top players from API
  useEffect(() => {
    updateTopPlayers(api, setTopPlayers);
  }, [api]);

  return (
    <div>
      <h4>Leaderboard</h4>

      {topPlayers ? (
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Rank</th>
              <th style={{ "text-align": "center" }}>Δ</th>
              <th>Player</th>
              <th>Rating</th>
            </tr>
          </thead>
          <tbody>
            {topPlayers.map((player, index) => (
              <tr key={player.id}>
                <td>{player.ranking}</td>
                <td style={{ "text-align": "center" }}>
                  {ratingDeltaDisplay(player.ranking_delta)}
                </td>
                <td>{player.name}</td>
                <td>{Math.round(player.rating)}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      ) : (
        <div
          style={{
            display: "flex",
            marginRight: "4em",
            marginTop: "4em",
            marginBottom: "4em",
            justifyContent: "center"
          }}
        >
          <Spinner animation="border" />
        </div>
      )}
    </div>
  );
}
// Show a leaderboard (or spinner if the top players haven't loaded yet)
Show a leaderboard (or spinner if the top players haven't loaded yet)
Show a leaderboard ( or spinner if the top players haven ' t loaded yet )
function Leaderboard() {
  const api = useContext(ApiContext);
  const [topPlayers, setTopPlayers] = useState(
    localStorage.getItem("topPlayers") !== null
      ? JSON.parse(localStorage.getItem("topPlayers"))
      : null
  );
  useEffect(() => {
    updateTopPlayers(api, setTopPlayers);
  }, [api]);
  return (
    <div>
      <h4>Leaderboard</h4>
      {topPlayers ? (
        <Table striped bordered hover size="sm">
          <thead>
            <tr>
              <th>Rank</th>
              <th style={{ "text-align": "center" }}>Δ</th>
              <th>Player</th>
              <th>Rating</th>
            </tr>
          </thead>
          <tbody>
            {topPlayers.map((player, index) => (
              <tr key={player.id}>
                <td>{player.ranking}</td>
                <td style={{ "text-align": "center" }}>
                  {ratingDeltaDisplay(player.ranking_delta)}
                </td>
                <td>{player.name}</td>
                <td>{Math.round(player.rating)}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      ) : (
        <div
          style={{
            display: "flex",
            marginRight: "4em",
            marginTop: "4em",
            marginBottom: "4em",
            justifyContent: "center"
          }}
        >
          <Spinner animation="border" />
        </div>
      )}
    </div>
  );
}
function Leaderboard ( ) { const api = useContext ( ApiContext ) ; const [ topPlayers , setTopPlayers ] = useState ( localStorage . getItem ( "topPlayers" ) !== null ? JSON . parse ( localStorage . getItem ( "topPlayers" ) ) : null ) ; useEffect ( ( ) => { updateTopPlayers ( api , setTopPlayers ) ; } , [ api ] ) ; return ( < div > < h4 > Leaderboard < / h4 > { topPlayers ? ( < Table striped bordered hover size = "sm" > < thead > < tr > < th > Rank < / th > < th style = { { "text-align" : "center" } } > Δ< / t h> < th > Player < / th > < th > Rating < / th > < / tr > < / thead > < tbody > { topPlayers . map ( ( player , index ) => ( < tr key = { player . id } > < td > { player . ranking } < / td > < td style = { { "text-align" : "center" } } > { ratingDeltaDisplay ( player . ranking_delta ) } < / td > < td > { player . name } < / td > < td > { Math . round ( player . rating ) } < / td > < / tr > ) ) } < / tbody > < / Table > ) : ( < div style = { { display : "flex" , marginRight : "4em" , marginTop : "4em" , marginBottom : "4em" , justifyContent : "center" } } > < Spinner animation = "border" / > < / div > ) } < / div > ) ; }
Show a leaderboard (or spinner if the top players haven't loaded yet)
Show a leaderboard ( or spinner if the top players haven ' t loaded yet )
// Fetch and save list of top players from API