Build Youtube in React 38: fetching and displaying channel information
1 Overview
Let’s continue where we left off and fetch channel information when the user pastes the URL into the web browser directly.
In this case, we don’t know the channel id. All we know is the video id. So we can start fetching information on that particular videos and on related videos. But as soon as we have the video details at hand, we can actually fire a consecutive request to fetch information about the channel.
In fact, we can include this request in our fetchVideoDetails function.
2 Fetching channel information when navigating to the page directly
2.1. Updating fetchWatchDetails
First things first. How do we know when we need to delay the channel request to the fetchVideoDetails function?
Well we know it when the channelId we get passed in our fetchWatchDetails worker saga is null.
We need to pass this information on to our function that performs the consecutive requests. We will do this by just passing a boolean.
Just update the last line of code in the try block. In this line we are calling a function that performs consecutive requests.
2.2. Updating fetchVideoDetails worker saga
Now that we know whether we need to fetch the channel information in the consecutive request or not, we need to adapt our code.
If we need to fetch the channel information, there’s no other way but doing a little bit of parsing of the previous request.
We look for the request that contains the details about the video we are about fo display. Remember that the items array from the response of kind VIDEO_LIST_RESPONSE only contains one item. That is because we explicitly requested information on a video with a particular video id.
We now grab the first element in the items array and extract its channelId value from the snippet object.
Naaah 🧐 this is not ideal. We are parsing a previous request in our saga. But there’s currently no other way around it.
GraphQL would be nice in this case because then we would not have the hustle.
Ok, but this is the last time we parse a response in a sage for this tutorial. I promise. We only did it two times and only because we had no choice.
2.3. Updating channel reducer
We need to adapt our VIDEO_DETAILS_SUCCESS reducer to also parse the response of the channel request.
Well, how hard can it be 👨💻
Let’s first update our channels reducer to also react to the VIDEO_DETAILS_SUCCESS action.
Now, the only thing that we still need to do is write the reduceVideoDetails function.
You’ve seen this pattern a couple of times now. First, we pick the channel response from our responses array. After that, we grab the items array of our response and pick the first element. We know that the response will contain at most most element. That is because we explicitly asked for a channel with a specific id.
We then associate the channel with its id and merge it into our channels.byId state.
2.4. Verifying that our magic works
Head over to the Home feed and click an arbitrary video. You should now be redirected to the Watch component.
Now reload the page and have a look at your Redux dev tools. You should see that there is an entry in our global state about the channel.
Click on the image to see it in high resolution.
3 Displaying channel information
The data is there, we just need to display it.
3.1 Creating a channel selector
To decouple our components from our state, let’s create a channel selector that returns a channel for a specific id.
We will put it into the src/store/reducers/channels.js file.
3.2 Using our channel selector
To make use of our selector, we update our mapStateToProps function inside WatchContent.js
Now that we have pulled in the channel from our Redux state, we can pass it on to the video info box.
Update the props of the VideoInfoBox tag in WatchContent's render function like so:
3.3 Making VideoInfoBox dynamic
Let’s add a new function that updates the text of the red subscribe button with the correct amount of subscribers in our VideoInfoBox component
That was quite easy. We just added a new function inside the VideoInfoBox.js class and recycled our getShortNumberString function.
Pretty nice. Let’s make use of it in the component’s render function.
We’ve done a couple of things here. First, we added a new safety check. We check if we get a channel object passed as props. If not, we just render an empty <div>. There would be nothing to show anyways.
In our render function, we call our new getSubscriberButtonText function and save the channel's title and the thumbnail URL in a separate variable.
We then make use of these variables in our markup and display the correct information.
4 Wrap Up
Yes, yes, yes 😁.
Our stuff is working. Check out the Watch component now.
Click on the image to see it in high resolution.
You can find the entire code on Github.
The only thing we don’t in our Watch component yet, is the comments section. However, this will be pretty straight forward.
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.
Recent Comments