Build Youtube in React 40: displaying comments
Let’s continue where we left off and finish off the comments.
2 Displaying comments
2.1. Comments selector
We only need a way to pull in the comments for a specific video into our
WatchContent component. We will use a
selector for that. So head over to your
src/store/reducer/comments.js file and add the following code.
First, we create a helper
function. This helper function returns the
comment ids for a particular video if any. We use our little helper function later in our selector.
We iterate over all
comment ids and return the corresponding comment
selector returns an array of
comment objects that belong to a specific video.
2.2. Pulling in comments into WatchContent
Let’s use our selector to connect our
WatchContent component with our
We update our
function to pull comments of a particular video into our local state. The
selector we just created is just perfect for this. Next, we pass the array of comments objects down to the
Comments component. This is one of the components we need to update next.
But wait. There’s just one more thing. We currently pass a hard-coded number in the
amountComments prop. We should change that.
2.3. Selector for total amount of comments
Now here’s a little caveat. When we fetch a comment thread, the
pageInfo.totalResults field does not hold the total amount of
comments for a specific video. It just tells us the total amount of comment threads we just fetched in one blow. The information on how many comments a video has is stored in the
You can also see this in the API explorer.
So I suggest, we create a selector for this. We will create it in the
videos reducer, because that’s where our entire video logic lives.
Put the following code into
We can just recycle our
getVideoById selector we already have and return the video’s overall amount of comments.
2.4. Wiring up the total amount of video selector
Now that we have our new
selector, we can make use of it in the
We add a new field called
amountComments in our
mapStateToProps function. All we need to do is to pass the current
video id. Now instead of passing down a hard-coded number down to our
Comments component, we can now pass the correct number.
2.5. Making our Comments component dynamic
Currently we only have hard-coded elements in our
Comments component. Dynamically creating the
comments is super easy.
First of all, we check whether we get a
comments props. If not, we just
return an empty
<div>. Once we know that we have some comments, we iterate over them and create a
comment component for each element. After that, all the comments are rendered.
Now the only thing that’s left to do is to update the
Comment (note: singular) component. That’s an easy one as well. We already have the markup ready. We just need to display the actual data.
2.6. Intermediary result
Let’s try our magic out.
You should see something like this. Click on the image to see it in high resolution.
Ok, that’s kinda cool. But wait, we only show a few comments. It would be great if we could load more comments once we hit the end of the page. Fortunately implementing this is pretty easy. In fact, we already did it in our
Home feed. We will need a
next page token for this.
Well, we already have that, what a coincidence 😁. Having a well structured
Redux state pays off.
2.7. Fetching more comments action creator
Once we hit the end of the page, we want to reach out to the
Youtube endpoint and load more comments. We will need an action for that.
- Create a new file inside
src/store/actionsand call it
We will reach out to the
/commentThread endpoint again. So here’s our action creator.
We expect two parameters in our request. The first one is the
video id for which we want to fetch more comments. The second parameter is the
next page token so we can load additional comments and not just the first
20 or so.
2.8. Fetching comments sagas
Fortunately, we have already a created a
function that reaches out to the
/commentThread endpoint. We can just recycle it. To actually make the network request, we need a
watcher and a worker
Let’s put these sagas into a separate file to keep our project clean.
- Create a new file inside
src/store/sagasand call it
watchCommentThread saga, we listen to the
COMMENT_THREAD_REQUEST action. Once such an action is dispatched, we extract the
video id and the
next page token from its payload and
worker saga. This
worker saga is supposed to do the actual work.
worker saga uses our
buildCommentThreadRequest function to construct the appropriate request. We then use the
fetchEntity function to reach out to the network.
There’s just one more thing to do. We need to plug our new
watcher saga into our
root saga inside
2.9. Comment thread reducer
Now we only need to incorporate the new data into our state once we get it. You might be surprised how easy that is.
Remember that we’ve already done the hard work when we deal with the
WATCH_DETAILS_SUCCESS action. We can just recycle our
function. What a lucky coincidence, … not 😁
Dealing with our action just boils down to adding a new
case statement in our
2.10. Next page token selector
You already noticed that we can pass a
next page token as a
payload to our action. To really implement infinite scroll, our components needs to dispatch the
COMMENT_THREAD_REQUEST action and pass along the
next page token. We should create a
selector for this to not couple our components with our
We create a little helper function called
getComment. getComment will make use of our getSearchParam function to extract the
video id from the current
URL. It will then search for the corresponding object inside our
state.comments.byVideo object. Once we have that, we return the object’s
next page token if it is available. Pretty straight forward.
2.11. Infinite scroll for comments
Watch component is currently responsible for fetching all the data as as far as watching a
video is concerned. So we will wire up our
next page token selector with our
Watch component and fire the request when needed.
First, we pull in the
comment next page token into our component’s state. We do this by making use of our
getCommentNextPageToken function inside
Oh, and we also need to wire up the comment thread request action creator to our local state. Let’s do this in our
function makes dispatches the
COMMENT_THREAD_REQUEST action when we call it. This is only done if we have a
next page token available. Otherwise we would just fetch the first
n comments of a video again.
Finally, we pass the
fetchMoreComments function to our
WatchContent will call this
function whenever the user scrolls to the bottom. When this happens, our
Watch component makes sure we fetch new comments which are later displayed..
Note that we also pass down the
nextPageToken to our
WatchContent. You will later see why
2.12. Infinite scroll in WatchContent
We make use of our
InfiniteScroll component we already developed when we did the
We recycle our
InfiniteScroll component from our
Home feed and pass it the
function it should call when the bottom is reached. We also pass a
boolean flag that indicates whether a circular loader should be displayed at the bottom of the screen or not.
true if we have a
next page token. If not, it returns
false. Now technically speaking we don’t really need this
!! operation because if
nextPageToken contains something, it will be considered
true anyway. But I just did it to make clear, that we pass a
boolean here. So we only need to know whether we have a
next page token, not how that token looks like.
3 Wrap Up
Yes, yes yes. We’re done with our
Look at this, isn’t that nice. We now have infinite scroll in here.
Click on the image to see it in high resolution.
Now we only have two things left to finish this tutorial series off.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.