My version of FreeCodeCamp Leaderboard

Code Feedback
1

Take a look at my version of FreeCodeCamp Leaderboard:
http://codepen.io/fremdev/pen/QEAqOp/
Using React.js, AJAX requests with fetch(), stateless functions, Sass, Babel, Webpack. You can find full version of the project on GitHub: https://github.com/fremdev/leaderboard/

2

This isn’t working for me on an iPhone - I get the table headers, but no rows…

3

Thank you for pointing me this!
That’s true - because I’m using fetch() for AJAX requests and it hasn’t a support for all browsers yet. But in my full version(code on GitHub) I’m using fetch polyfill and it should work well for all browsers including Safari 6.1+

4

I suspected that…I just started using fetch today and had the same issue :slight_smile:

I don’t want to peek at your code as I haven’t finished it yet, but did you string a bunch of promises together in your fetch().then() chain and stick your react DOM render call in there, or did you handle it a different way?

That’s how I’ve done it so far, but I’m pretty dissatisfied with it…

5

I don’t understand well what do you mean as [quote=“JacksonBates, post:4, topic:22601”]
stick your react DOM render call in there
[/quote]
I use fetch() inside componentDidMount function for my Leaderboard component(which I use for handling state of my app)

6 
let APICampers = [];

fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
.then((response) => response.json())
.then((data) => APICampers = data)
.then(() => {
  for (let i = 0; i < APICampers.length; i++) {
    APICampers[i]["rank"] = i + 1;
  };
})
.then(() => {
  const app = document.getElementById('app');
  ReactDOM.render(<CamperTable campers={APICampers} />, app);
});

I haven’t heard of your method, I’ll look into it :slight_smile:

7

No, I do it another way - first .then as you(for parsing json) - and only one more .then for saving data inside state object using setState