Leaderboard

index.html

<div id="app"></app>

script.js

//main sources
//https://stackoverflow.com/questions/38742334/what-is-right-way-to-do-api-call-in-react-js
//https://codepen.io/aamulumi/pen/NAymbW

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    stuff: []
    };
  }

  componentDidMount() {
    this.getRecent();
  }

  getRecent() {
     fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
    .then((result) => {
      return result.json();
    }).then((jsonResult) => {
      this.setState({stuff: jsonResult});  
    })
  }
  
  getAllTime() {
    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
    .then((result) => {
      return result.json();
    }).then((jsonResult) => {
      this.setState({stuff: jsonResult});  
    })
  }

  render() {
    const persons = this.state.stuff.map((item, i) => (   
       <div> 
         <table>
           <tbody>
             <tr>
               <img src= { item.img } />
               <td>{ item.username }</td>
               <td>{ item.recent }</td>
               <td>{ item.alltime }</td>
             </tr> 
            </tbody>
         </table>
       </div>
    ));

    return (
      <div id="layout-content" className="layout-content-wrapper">
        <button onClick={() => this.getRecent()}>
          Last 30 Days
        </button>
        <button onClick={() => this.getAllTime()}>
         All Time
        </button>
        <table id="header">
          <tr>
            <th>Avatar</th>
            <th>Name</th>
            <th>Last 30 Days</th>
            <th>All Time</th>
          </tr>  
         </table>
       <div> 
       </div> 
        <div className="panel-list">{ persons }</div>
      </div>
    );
  }
}

ReactDOM.render(<UserList />, document.getElementById('app'));

style.scss

$font-stack: Roboto
  
body {
  text-align: center;
  font-family: $font-stack;
}
img {
  width: 50px;
}
table {
  table-layout:fixed;
  border: 1px solid #d4d4d4;
  margin: auto;
}
td {
  font-size: 18px;
  width: 150px;
  text-align: center;
}
th {
  width: 120px;
}
#header {
  border: none;
  padding: 5px;
}
button {
  margin: 20px;
  border-radius: 5px;
  height: 30px;
  width: 100px;
}