{"size": 1868, "ext": "js", "max_stars_repo_path": "client/src/components/leaderboard/Leaderboard.js", "max_stars_repo_name": "pesto-students/batch-6-chess-multiplayer", "max_stars_repo_stars_event_min_datetime": "2019-05-14T17:32:35.000Z", "max_stars_repo_stars_event_max_datetime": "2019-07-27T10:23:19.000Z", "max_issues_repo_path": "client/src/components/leaderboard/Leaderboard.js", "max_issues_repo_name": "pesto-students/batch-6-chess-multiplayer", "max_issues_repo_issues_event_min_datetime": "2019-04-22T02:37:42.000Z", "max_issues_repo_issues_event_max_datetime": "2019-05-17T19:28:10.000Z", "max_forks_repo_path": "client/src/components/leaderboard/Leaderboard.js", "max_forks_repo_name": "pesto-students/batch-6-chess-multiplayer", "max_forks_repo_forks_event_min_datetime": "2019-05-01T18:43:10.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-21T06:17:02.000Z"}
{"max_stars_count": 3, "max_issues_count": 82, "max_forks_count": 4, "avg_line_length": 26.3098591549, "max_line_length": 61, "alphanum_fraction": 0.5615631692}
/* eslint-disable no-underscore-dangle */
import React, { Component } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import API from '../../apis/chessGameApi';
import './Leaderboard.css';

export default class Leaderboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
    };
  }

  componentDidMount() {
    API.getLeaderboard()
      .then((response) => {
        const { leaderboard = [] } = response;
        this.setState({ users: leaderboard });
      });
  }

  renderTableBody = users => (
    <TableBody>
      { users.map(user => (
        <TableRow key={user._id}>
          <TableCell>
            <Avatar src={user.picture} />
          </TableCell>
          <TableCell>
            {user.name}
          </TableCell>
          <TableCell align="right">
            {user.rating}
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  );

  render() {
    const { users } = this.state;
    return (
      <div id="leaderboard-container">
        <Typography variant="h3" gutterBottom align="center">
          Leaderboard
        </Typography>
        <Paper>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell />
                <TableCell>Name</TableCell>
                <TableCell align="right">Rating</TableCell>
              </TableRow>
            </TableHead>
            { this.renderTableBody(users) }
          </Table>
        </Paper>
      </div>
    );
  }
}
