FCC Leaderboard

/*Downloaded from https://www.codeseek.co/0damian/fcc-leaderboard-xEbLJr */
body {
  background: #e5e5e5;
}
body table {
  width: 66.66666666%;
  margin: 24px auto;
  font-family: Roboto, sans-serif;
}
body table caption {
  background: #006400;
  color: #fff;
  font-weight: 100;
  padding: 12px 0;
}
body table caption img.logo {
  display: block;
  width: 240px;
  height: auto;
  margin: 0 24px;
}
body table tbody tr:nth-child(odd) {
  background: #f5f5f5;
}
body table th.points {
  text-align: center;
}
body table td {
  text-align: center;
}
body table td .avatar-img {
  display: inline-block;
  border-radius: 50%;
  width: 48px;
  height: auto;
  margin: 3px 12px 3px 0;
}
body .latest:hover, body .alltime:hover {
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  table {
    width: 90%;
  }
}

/*Downloaded from https://www.codeseek.co/0damian/fcc-leaderboard-xEbLJr */
var RankingContainer = React.createClass({
  displayName: 'RankingContainer',

  getInitialState: function getInitialState() {
    return {
      latestData: '[]',
      allTimeData: '[]',
      view: 'latest'
    };
  },
  componentDidMount: function componentDidMount() {
    this.getData(this.props.latestUrl).then(function (resp) {
      this.setState({
        latestData: JSON.stringify(resp.data)
      });
    }.bind(this)).catch(function (err) {
      console.log('Latest data error: ' + err);
    }.bind(this));
    this.getData(this.props.allTimeUrl).then(function (resp) {
      this.setState({
        allTimeData: JSON.stringify(resp.data)
      });
    }.bind(this)).catch(function (err) {
      console.log('All time data error: ' + err);
    }.bind(this));
  },
  getData: function getData(source) {
    return axios.get(source);
  },
  handleClick: function handleClick(e) {
    e.preventDefault();
    if (e.target.className == 'latest') {
      if (this.state.view != 'latest') {
        this.setState({
          view: 'latest'
        });
      }
    } else {
      if (this.state.view == 'latest') {
        this.setState({
          view: 'alltime'
        });
      }
    }
  },
  render: function render() {
    return React.createElement(
      'table',
      null,
      React.createElement(
        'caption',
        null,
        React.createElement('img', { src: 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt: 'FreeCodeCamp', className: 'logo' }),
        'Top 100'
      ),
      React.createElement(
        'thead',
        null,
        React.createElement(
          'tr',
          null,
          React.createElement(
            'th',
            { rowSpan: '2' },
            '#'
          ),
          React.createElement('th', { rowSpan: '2' }),
          React.createElement(
            'th',
            { rowSpan: '2' },
            'camper'
          ),
          React.createElement(
            'th',
            {
              colSpan: '2',
              className: 'points'
            },
            'points'
          )
        ),
        React.createElement(
          'tr',
          null,
          React.createElement(
            'th',
            {
              onClick: this.handleClick,
              className: 'latest' },
            'last 30 days\xA0',
            this.state.view == 'latest' ? String.fromCharCode(9660) : ''
          ),
          React.createElement(
            'th',
            {
              onClick: this.handleClick,
              className: 'alltime' },
            'all time\xA0',
            this.state.view == 'alltime' ? String.fromCharCode(9660) : ''
          )
        )
      ),
      React.createElement(TableBody, {
        data: this.state.view == 'latest' ? this.state.latestData : this.state.allTimeData
      })
    );
  }
});

var TableBody = React.createClass({
  displayName: 'TableBody',

  render: function render() {
    var count = 0;
    var body = JSON.parse(this.props.data).map(function (user) {
      count++;
      return React.createElement(
        'tr',
        null,
        React.createElement(
          'td',
          null,
          count
        ),
        React.createElement(
          'td',
          null,
          React.createElement('img', { src: user.img, alt: 'Avatar for ' + user.username, className: 'avatar-img' })
        ),
        React.createElement(
          'td',
          null,
          user.username
        ),
        React.createElement(
          'td',
          null,
          user.recent
        ),
        React.createElement(
          'td',
          null,
          user.alltime
        )
      );
    });
    return React.createElement(
      'tbody',
      null,
      body
    );
  }
});

ReactDOM.render(React.createElement(RankingContainer, {
  latestUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
  allTimeUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime'
}), document.getElementById('app'));