Social Network for Pets

[atifg]

Hi

Social Network for Pets complete Project using React Components using classes.

Social Network For Pets

Cheers

[evanhahn]

Hi, author of this project. I hope you enjoyed it!

Your code is almost exactly the same as my solution, so well done! I’ve got almost no negative feedback because you did such a good job, but here are two points:

The first point: you’re not canceling the fetch in componentDidUpdate(). That means that there might be some strangeness with the data. For example, consider this sequence of events:

1. You start loading Kitty Cat’s profile. This request will take 30 seconds because of a weird problem with the computer’s wifi.
2. Before it’s finished loading, you start loading Doggy Dog’s profile. This request will finish much more quickly, in just 5 seconds.
3. Doggy Dog’s data will show up on the screen after 5 seconds, but then Kitty Cat’s will magically appear 25 seconds later!

Right before you call loadUserData() in componentDidUpdate(), you should make sure to cancel the fetch with cancelFetch(this.fetchID). That way, you “clean up” old requests.

The second point is much smaller, and is more of a nitpick. This line could be shortened:

const isLoading = this.state.userData === null ? true : false;

Because this.state.userData === null evaluates to a boolean, you could do something a little shorter:

const isLoading = this.state.userData === null;

Again, you did great, and I love your solution. I hope my minor comments don’t take away from the fact that your solution is nearly perfect!

[jla35753]

Not sure if anyone else was wondering about this, but after Step 6 I wasn’t able to see the sample value for bio while the profile was loading. All I saw was a grey box before the this.state.userData.bio populated. I wondered if there was an issue with my code, but since this.state.userData.bio populated correctly realized it must be something else. I dug around and found this happens because in styles.css there is a CSS selector for .Profile.loading p that sets the background to the same color as the font for .Profile.loading. If you comment out or delete the .Profile.loading p selector, you’ll be able to see your sample value!