How to Upgrade Our App to Read Three Feeds

OK, I hope you took the time to attempt the task yourself, because it will really help identify which parts you knew well and which not so well. Anyway, I promised I'd walk you through the solution, so here goes!

The first thing to do is upgrade the initial state of our component so that we have three arrays for each of the view modes: one for commits, one for forks, and one for pulls. It also needs a value to distinguish which view mode is currently active. So, I modified my constructor to this:

src/pages/Detail.js

this.state = {
mode: 'commits',
commits: [],
forks: [],
pulls: []
};

The second thing to do is upgrade the componentWillMount() so that it makes three GitHub calls. For now – the MVP, as it were – we'll just duplicate the code three times. Don't worry, we'll clean this up soon.

Note: you will probably need to adjust the renderForks() method so that the link sits on the same line as the "forked to" otherwise React will not put any space between the words.

That isolates the rendering for each view type in its own method, which means we now just need to make render() choose which one to show. I'm using the mode key in the component state to decide which to show, and I'll let it have three values: "commits", "forks" and "pulls".

You can see three buttons at the end of that method that call three as-yet-undefined methods when they are clicked: showCommits(), showForks() and showPulls(). All these need to do is change the mode state key to have the component refresh with different data: