Build Youtube in React 42: infinite scroll for trending videos

1 Overview

In the previous tutorial, we made our side bar dynamic and our VideoPreview component more flexible.

We will now make use our changes and implement a component that shows trending videos.

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 Youtube's most popular videos endpoint so it makes sense to put it into src/containers.

1. Create a new directory inside src/containers and call it Trending
2. Add a Trending.js and Trending.scss file 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.

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 SideBar element.

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.

The 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 Youtube. The 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.

Besides our render function, we have a getVideoPreviews 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 VideoPreview earlier.

2.2. Pulling in most popular videos from Redux state

Our 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 mapStateToProps and mapDispatchToProps 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 getMostPopularVideos 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 fetchMostPopularVideos.

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 componentDidMount and 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.

The fetchTrendingVideos reaches out to the most popular videos endpoint and fetches 20 elements and asks for their description as well.

2.4. Intermediary result

Navigate to 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 infinite scroll.

2.5. Selectors for infinite scroll

Have a look at our most popular videos action creator inside src/store/actions/videos.js

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 Trending component.

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

This selector just grabs the mostPopular object inside state.videos and returns the nextPageToken property.

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 selector in src/store/reducers/videos.js.

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 mapStateToProps.

We just import the 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 InfiniteScroll element.

The 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 video's description

Our shouldShowLoader function returns a boolean that indicates if there are more trending videos available.

We make use of these two functions in our InfiniteScroll component.

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.