Leaderboard

index.pug

#freeCodeCamp
 

leaderboard.markdown

Leaderboard

A Pen by Karthik on CodePen.

License.

script.babel

/*var Leaderboard = React.createClass({
getInitialState: function(){
/*var recentCampers= []; 
var allTimeCampers= [];*/
//return {toggle30: 'true'};
/*return {recentCampers: [],
allTimeCampers: [],
toggle30: 'true'};
this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this);
this.toggle30= this.toggle30.bind(this);  */
/*    },
  
componentDidMount: function(){return axios.all([this.getTopRecentCampers(),this.getTopAlltimeCampers()]).then(function(arr){return {
recentCampers: arr[0].data,
allTimeCampers: arr[1].data};
console.log(this.state.recentCampers[0].username);     })},
/*
getTopRecentCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');},
  
getTopAlltimeCampers: function(){return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');},

toggleViewOne: function(){this.setState({toggle30: 'true'});},

toggleViewTwo: function(){this.setState({toggle30: 'false'});},  
  
 /* render: function(){return (<div>    
      <h6>Sort by:</h6> <button onClick={this.toggleViewOne} className="btn">Points in past 30 days &nbsp;<span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points &nbsp;<span className="fa fa-sort-desc"> </span> </button> <h1> freeCodeCamp  <span className="fa fa-free-code-camp"> </span> </h1> <hr></hr> <div className="table-responsive">  <table className="table"> <thead> <tr> <th> <td> # </td> <td> Camper name </td> <td> Points in last month </td> <td> All time points </td> </th> </tr> </thead> <tbody>
//</tbody> </table> </div> </div>);} */
/*  });
var Tbody = React.createClass({
render: function(){return (<tbody> {} </tbody>);}  
  
});*/
/*</tr> <tr> <td> gtew</td> </tr> <tr> <td> gffs</td> </tr>this.recentCampers= this.recentCampers.bind(this);
this.allTimeCampers.bind(this) */
/*
ReactDOM.render(<Leaderboard />,document.getElementById('freeCodeCamp'));
----------------------------------------------------------------------------                                                                            */

var Leaderboard = React.createClass({
  getInitialState: function() {
    return {
      recentCampers: [],
      allTimeCampers: [],
      toggle: 'recentCampers'
    };
  },

  componentWillMount: function() {
    return this.getRequest();
  },

  getRequest: function() {
    return axios.all([this.getTopRecentCampers(), this.getTopAlltimeCampers()]).then(function(arr) {
      this.setState({
        recentCampers: arr[0].data,
        allTimeCampers: arr[1].data
      });
      /*var recent= [];
      recent= this.state.recentCampers;
      for (var i=0;i>=100;i++){return recent[i];};
      //console.log(this.state.recentCampers[0].username);*/
    }.bind(this));
  },

  getTopRecentCampers: function() {
    return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent');
  },

  getTopAlltimeCampers: function() {
    return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime');
  },

  toggleViewOne: function() {
    this.setState({
      toggle: 'recentCampers'
    })
  },

  toggleViewTwo: function() {
    this.setState({
      toggle: 'allTimeCampers'
    })
  },

  render: function() {
    return (<div>    {/*(<h1>{this.state.toggle30} </h1>*/}
      <h6>Sort by:</h6> <button onClick={this.toggleViewOne} className="btn">Points in past 30 days &nbsp;<span className="fa fa-sort-desc"> </span></button> <button onClick={this.toggleViewTwo} className="btn"> All time points &nbsp;<span className="fa fa-sort-desc"> </span> </button> <h1> freeCodeCamp  <span className="fa fa-free-code-camp"> </span> </h1> <hr></hr> <div className="table-responsive">  <table className="table"> <thead> <tr> <th> <td style={{width: '80px'}} className="text-center"> # </td> <td style={{width: '600px'}}> Camper name </td> <td style={{width: '400px'}} className="text-center"> Points in last month </td> <td style={{width: '400px'}} className="text-center"> All time points </td> </th> </tr> </thead> <tbody>  <Map data={this.state[this.state.toggle]} />
</tbody> </table> </div> </div>);
  }
});
//{<Tbody data={this.state}
/*                           
 --------------------------------------------------------------------------                                                                        */
var Map = React.createClass({
  render: function() {
    var rows = this.props.data.map(function(row, index) {
      return <Tbody rank={index + 1} data={row} />;
    });

    return (
      <tbody id="stripe">
        {rows}
      </tbody>
    );
  }
});
/*                           
 --------------------------------------------------------------------------                                                                        */
var Tbody = React.createClass({
  render: function() {
    /*var recent= this.props.recent.username;
    var a = recent.map(function(user){
      return (
        <a target='_blank' href={'http://freecodecamp.com/' + user}>
        </a>
      );
    });
    return <tr>{a}</tr>;*/
    return (<div> {/*<h1>{this.props.data.username}</h1>*/}<tr>
      <td style={{width: '80px'}} className="text-center">{this.props.rank + '.'}</td>
      <td style={{width: '600px'}}>
        <a target='_blank' href={'http://freecodecamp.com/' + this.props.data.username}><img src={this.props.data.img} /> &nbsp; <span>{this.props.data.username}</span></a>
      </td>
      <td id="recent" className="text-center">{this.props.data.recent}</td>
      <td id="all" className="text-center">{this.props.data.alltime}</td>
    </tr> </div>);
    //console.log(JSON.stringify(this.props));*/
  }
});
/*                           
 --------------------------------------------------------------------------                                                                        */
ReactDOM.render(<Leaderboard />, document.getElementById('freeCodeCamp'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.8.1/axios.min.js"></script>

style.sass

*
 margin: 0
 padding: 0
 box-sizing: border-box

body
 background-image: linear-gradient(161deg, #006401 0%, #FCFFEE 100%)
 background-attachment: fixed
 color: rgba(80,45,23,10)
 margin-left: 20px
 margin-right: 20px

button
 margin: 5px
 background-image: -webkit-linear-gradient(#006401, #FCFFEE)
 background-attachment: fixed
 color: #FCFFEE
 box-shadow: inset -1px -3px  10px 1px #515151
 margin-bottom: 20px

button
 &:active
  transform: translate(0, 3px)
  box-shadow: none
  text-decoration: none
  outline: none
 &:hover,&:active,&:visited
  text-decoration: none
  outline: none

h6
 margin-left: 10px
 margin-top: 15px
 margin-bottom: 5px  

h1
 color: rgba(245, 245, 245, 0.5)
 margin-left: 5px

.fa-free-code-camp
 font-size: 1em
 color: rgba(245,245,245,0.7)
 
table,td
 border: 1px solid grey
 table-layout: fixed
 
tbody>div:nth-child(even)
 background-color: rgba(0,100,1,0.5)

tbody>div:nth-child(odd)
 background-color: rgba(0,100,1,0.3)

img
 border-radius: 100%
 height: 60px

a
 text-decoration: none
 color: rgba(80,45,23,10)

#all
 max-width: 280px
 min-width: 280px

#recent
 max-width: 280px
 min-width: 280px

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />