Skip to content

Instantly share code, notes, and snippets.

@Garabed96 Garabed96/App.js
Created Feb 28, 2018

Embed
What would you like to do?
App.js for Leaderboard
import React from 'react';
import logo from './logo.svg';
import './index.scss'
import axios from 'axios';
import ReactDOM from 'react-dom';
/*User Story 1: I can see a table of the freeCodeCamp campers who've earned the most brownie points in the past 30 days.
User Story 2: I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.
User Story 3: I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total.
Top 100 campers for the last 30 days: https://fcctop100.herokuapp.com/api/fccusers/top/recent.
Top 100 campers of all time: https://fcctop100.herokuapp.com/api/fccusers/top/alltime.
*/
class Board extends React.Component {
constructor(props){
super(props);
this.state = {
isToggleOn: true,
recentList: [],
alltimeList: []
};
}
// So we may use setState to update component when data retrieved
componentDidMount() {
var urlRecent = "https://fcctop100.herokuapp.com/api/fccusers/top/recent/";
var urlAlltime = "https://fcctop100.herokuapp.com/api/fccusers/top/alltime/";
console.log("mounted");
Promise.all([
fetch(urlRecent)
.then((res) => res.json())
.then((data) =>{
this.setState({
recentList: data
});
}),
fetch(urlAlltime)
.then((res) => res.json())
.then((data) =>{
this.setState({
alltimeList: data
});
})
]);
}
addAlltime() {
function addAlltime(e) {
e.preventDefault();
}
{this.state.alltimeList.map(lists =>
<tr>
<td> {lists.username}: {lists.alltime} </td>
</tr>
)};
}
render() {
return(
<div className="all">
<button onClick={this.addAlltime}>Alltime</button>
<div className="container-fluid">
{/* <h1>Top 30 alltime</h1>
{this.state.alltimeList.map(lists =>
<tr>
<td> {lists.username}: {lists.alltime} {lists.recent} </td>
</tr>
)}; */}
<h1>Top 30 Recent</h1>
{this.state.recentList.map(lists =>
<tr>
<td> {lists.username}: {lists.alltime} {lists.recent} </td>
</tr>
)};
</div>
</div>
);
}
}
export default Board;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.