Skip to content

Instantly share code, notes, and snippets.

@chemok78

chemok78/app.js

Created December 28, 2016 04:26
Show Gist options
  • Save chemok78/da9b78eb635c53775bf5d4591b9cccf4 to your computer and use it in GitHub Desktop.
Save chemok78/da9b78eb635c53775bf5d4591b9cccf4 to your computer and use it in GitHub Desktop.
Download ZIP
React JS Leaderboard
Raw
app.js
var TableHeader = React.createClass({
render: function() {
return (
<thead>
<tr>
<th className="text-center">#</th>
<th className="text-center">Profile Pic</th>
<th className="text-center">Camper Name</th>
<th onClick={() => this.props.onClickToggle("thirtydays")} className="text-center">Points in past 30 days {this.props.render === "thirtydays" ? <span className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> : null }</th>
<th onClick={() => this.props.onClickToggle("alltime")} className="text-center">All time points{this.props.render === "alltime" ? <span className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> : null }</th>
</tr>
</thead>
)
}
});
var TableBody = React.createClass({
render: function(){
return (
<tbody>
{this.props.tabledata.map(
function(person, index){
return (
<tr>
<td>{index + 1 }</td>
<td><img src={person.img} className="img-circle" width="30" height="30"/></td>
<td>{person.username}</td>
<td>{person.recent}</td>
<td>{person.alltime}</td>
</tr>
)
}
)}
</tbody>
)
}
});
var Leaderboard = React.createClass({
//Parent Component to hold state and render other components
getInitialState: function(){
return {
thirtydays: [ ],
alltime: [ ],
render: "alltime"
}
},
componentDidMount: function(){
var _this = this;
//save the instance of the component as _this variable
this.serverRequest =
axios
.all([
axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent'),
axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
])
.then(axios.spread(function(recent, alltime){
_this.setState({
thirtydays: recent.data,
alltime: alltime.data
});
}));
},
componentWillUnMount: function(){
this.serverRequest.abort();
},
handleClickToggle: function(period){
if (period === "alltime"){
this.state.render = "alltime";
this.forceUpdate();
} else {
this.state.render = "thirtydays";
this.forceUpdate();
}
},
render: function(){
var data = [];
if(this.state.render === "alltime"){
data = this.state.alltime
} else {
data = this.state.thirtydays
}
return (
<div>
<table className="table table-bordered text-center">
<TableHeader onClickToggle={this.handleClickToggle} render={this.state.render} />
<TableBody tabledata={data} />
</table>
</div>
)
}
}); //Leaderboard Component
ReactDOM.render(<Leaderboard />, document.getElementById('app'));
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<head>
<body>
<div class="container">
<h1 class="text-center">Camper LeaderBoard</h1>
<div id="app">
</div>
</body>
<html>
Raw
style.css
body{
font-family: 'Cabin', sans-serif;
color: white;
background: #d53369; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #d53369 , #cbad6d); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #d53369 , #cbad6d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container {
margin-top: 15px;
}
table {
margin-top:30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment