Chingu FCC Speedrun Challenge: Twitch.tv Client
This project took a bit more time than the previous ones, but was really fun to build and I got more practice with ES6 Promises.
The challenge was that you needed to make a separate request for each of the users. I used a loading icon, as well as a separate array for currently displayed users, and signifying when all the data has been received was a real challenge. We can’t populate the array of displayed users unless we have all the data, and likewise we need all the data before we can remove the loading icon and display the data. I ended up putting all of the requests into two separate arrays (one for the users and one for the streams), and then using Promise.all on the first array, then inside its callback Promise.all on the second array, and inside its callback I signified that all the required data has been received.
Here’s the code of how I handled it (inside Vue’s created method):
this.ready = false;var userRequests = [],
streamRequests = [];for (let username of this.usernames) {
userRequests.push(StreamService.getUserData(username));
}Promise.all(userRequests).then(users => {
for (let user of users) {
if (user.found) {
streamRequests.push(StreamService.getStream(user));
}
else {
this.userData.push(user);
}
} Promise.all(streamRequests).then(users => {
this.ready = true;
this.userData = this.userData.concat(users);
this.userData.sort((a, b) => a.found ? a.online ? -1 : 1 : 1);
this.showAll();
});
});
And here’s the showAll method (defined in Vue’s methods property) in case you’re wondering what it does:
showAll() {
this.displayedUsers = this.userData.slice();
this.showing = "all";
}That’s it for now! Thank you for reading.
