Build Youtube in React 42: infinite scroll for trending videos
In the previous tutorial, we made our
side bar dynamic and our
VideoPreview component more
We will now make use our changes and implement a component that shows
Click on the image to see it in high resolution.
2 Adding a Trending component
Now that we are done with the preparations, let’s create our
Trending component. This component will reach out to
most popular videos endpoint so it makes sense to put it into
- Create a new directory inside
src/containersand call it
- Add a
Trending.scssfile in the directory you just created.
2.1. Adding markup for trending videos
Here’s how our trending component will work. We display our
SideBar element on the very left side. Next to it, we will display a list of
VideoPreview elements. The actual contents will go into the
.trending div is a grid container. We use a
grid container because then we can easily
center our elements
horizontally be setting
justify-content: center. Remember that we are using
display: fixed in our
To not overlap with our
side bar, we add a
margin on the left that is equal to the width of the
side bar. We use the
$sidebar-left-width variable from our imported
shared.scss file for that.
grid-row-gap property adds a little bit of spacing between the
VideoPreview elements we are about to generate. We also set a
padding-left so that our trending videos component looks similar to the one on
trending component is not really responsive yet. But we can do this later. Let’s first build it out. The
top padding is used to have a little bit of space between the
header and our component.
function, we have a
function. We expect to have a
this.props.videos array which contains all the elements we want to display. We map over the array and create a
VideoPreview element for each of them. Note that we are setting the
expanded flag to
true here to make use of the improvements we made in
2.2. Pulling in most popular videos from Redux state
Trending component is not yet connected to our
Redux store. We need to pull in the most popular videos. And we also need to
fetch them when the component is loaded.
You’ve seen this a thousand times by now. We create a
function to pull the needed state and action creators in.
We pull in two things in from our global state. First, we pull in the
most popular videos with our
selector. Fortunately we can recycle this
selector from our
Home feed. Next, we also need to know if the
Youtube client library was already loaded. If not, we cannot reach out the the
Youtube endpoint and need to wait for it to load.
In addition, we also
import our most popular videos action creator and bind it to the
2.3. Fetching most popular videos
Fetching the most popular videos is now a pice of cake. We just need to a little bit of logic in our
componentDidUpdate lifecycle functions.
When the component was mounted, we try to reach out to the endpoint. This will work if we already loaded the
Youtube client library. If this is not the case, we need to wait for the client library to load. Once it is loaded,
componentDidUpdate will be called. In case the library is now there, we reach out to the endpoint.
fetchTrendingVideos reaches out to the
most popular videos endpoint and fetches
20 elements and asks for their description as well.
2.4. Intermediary result
localhost:3000/feed/trending. You should see something like this:
That’s pretty nice, isn’t it. The only thing we’re still lacking is
2.5. Selectors for infinite scroll
Have a look at our
most popular videos action creator inside
The request action creator accepts three parameters. We can pass it a
next page token and it will fetch more videos.
So in terms of network requests, we already have everything in place. But we somehow need the
next page token for the most popular videos inside our
Let’s create a
selector for this. Remember that we co-locate our
selectors with the respective
reducer. So head over to
src/store/reducers/videos.js and add the following
selector just grabs the
mostPopular object inside
state.videos and returns the
Oh and there’s one more thing. If we load more videos, we want to display our
spinner. But how do we know if there are even more
videos available? We save the total amount of available trending videos inside our global state.
So all we need to do is to check how many videos we’ve loaded so far. If there are more videos available, we display the
spinner and just fetch them. Otherwise we don’t do anything.
So here’s a
selector to check if there are more trending videos available. Just put the following code under the other
2.6. Wiring up trending component with selectors
To make use of our
selectors, we first need to wire them up with our component. We do this
selectors we just created and make use of them in our
mapStateToProps function. Nice, now we have all the needed data in our component.
2.7. Wiring up trending component with selectors
We can again recycle our
InfiniteScroll component that has served us well so far. All we need to do is to wrap the our
.trending div inside an
fetchMoreVideos function dispatches the
MOST_POPULAR_REQUEST action and passes along our next page token. Like so, we make sure that we only fetch new videos. When we reach the bottom, we fetch
twelve new videos and insist that the endpoint returns us the
boolean that indicates if there are more trending videos available.
We make use of these two functions in our
3 Wrap Up
Wow, that’s nice, we now have a trending component with
infinite scroll 🤓.
How cool is that?
Now, there’s just one more thing we’ll do until we’re done with this tutorial series.
As always thanks for reading. You can find all the code on Github.Follow @productioncoder
Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.
If you are interested in more high-quality production-ready content, please enter your email below.