Hercules Labor 02

hercules-labor-02.markdown

Hercules Labor 02

A Pen by Brian Puschell on CodePen.

License.

index.html

<div id = "content">
</div>

script.babel

var jsonURL = 'http://fcctop100.herokuapp.com/api/fccusers/top/recent';
var Entry = React.createClass({
 render: function(){
   return (
     <tr key = {this.props.rank}>
       <td>{this.props.rank}</td>
       <td><a href={this.props.url}><img src={this.props.img} />{this.props.username}</a></td>
       <td>{this.props.recent}</td>
       <td>{this.props.alltime}</td>
       </tr>
   );
 } 
});
var LeaderboardTable = React.createClass({
  render: function(){
    var lbEntries = this.props.data.map(function(entry, i){
      var url = "http://www.freecodecamp.com/" + entry.username;
      return(<Entry rank = {i+1} 
               url = {url}
               img = {entry.img}
               username = {entry.username}
               recent = {entry.recent}
               alltime = {entry.alltime}/>);
    });
    return(
      <tbody className="lbBody">
        {lbEntries}
        </tbody>);
  }
});
var Leaderboard = React.createClass({
  getInitialState: function(){
   return{ data: []}; 
  },
  setAllTime: function(){
    jsonURL = 'http://fcctop100.herokuapp.com/api/fccusers/top/alltime';
    $('.glyphicon-menu-down').remove();
    $('#alltime').append('<span class="glyphicon glyphicon-menu-down"></span>');
    $.ajax({
      url: jsonURL,
      dataType:'json',
      success: function(data){
        this.setState({data: data});
      }.bind(this),
      error: function(e, message){
        console.log(message);
    }
    });
  },
  set30Days: function(){
    jsonURL = 'http://fcctop100.herokuapp.com/api/fccusers/top/recent';
    $('.glyphicon-menu-down').remove();
    $('#30days').append('<span class="glyphicon glyphicon-menu-down"></span>');
    $.ajax({
      url: jsonURL,
      dataType:'json',
      success: function(data){
        this.setState({data: data});
      }.bind(this),
      error: function(e, message){
        console.log(message);
    }
    });
  },
  componentDidMount: function(){
    
    $.ajax({
      url: jsonURL,
      dataType:'json',
      success: function(data){
        this.setState({data: data});
      }.bind(this),
      error: function(e, message){
        console.log(message);
    }
    });
  },
  render: function(){
    return(
    <div className="leaderboard">
        <table className = "table table-striped ">
          <caption><h1 className="text-center">Camper Leaderboard</h1></caption>
          <thead className = "text-center">
           <tr>
             <th>Rank</th>
             <th>Username</th>
             <th><button id="30days"  className="btn btn-link" onClick={this.set30Days}>Brownie Points Earned in Last 30 Days <span className="glyphicon glyphicon-menu-down"></span></button></th>
             <th> <button id="alltime" onClick={this.setAllTime} className="btn btn-link"> All Time Brownie Points Earned </button> </th>
          </tr>
          </thead>
          <LeaderboardTable data={this.state.data} />
        </table>
        </div>
    );
  }
});
ReactDOM.render(<Leaderboard />, document.getElementById('content'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.sass

@import url(https://fonts.googleapis.com/css?family=Raleway:500,100)

$bordersettings: 1px solid grey
$green: #114411
$light-grey: #BBBBBB
$font: 'Raleway', sans-serif

table, td
  font-family: $font
  margin: 0 auto
  border-left: $bordersettings
  border-right: $bordersettings
  border-collapse: collapse
  padding: 0px 30px
  th
    @extend table
    background: $light-grey
    border-bottom: $bordersettings
    vertical-align: middle
  caption
    background: $green
    border-radius: 5px
    border-bottom: $bordersettings
    font-family: $font
    font-weight: 100
h1
  font-weight: 100
img
  height: 60px
  vertical-align: middle
  

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />