Build Youtube in React 41: prepare side bar for trending videos
All right party people, there’s just two more things we’ll do before we’re officially done with this.
We would like to display the trending videos .
When the user clicks on
Trending in the
Home feed's sidebar, we want to show a list of all trending videos on
It should look somewhat like this. Click on the image to see it in high resolution.
In this tutorial, we will mainly work a dynamic sidebar and a more flexible
VideoPreview component. We will need the additional flexibility to implement our trending component.
2 Making the Youtube sidebar dynamic
side bar looks kind of nice but doesn’t contain any logic. So if you click on anything, nothing happens. We need to change this.
2.1. Navigation in the Youtube sidebar
First things first. Our
side bar consists of a bunch of
SideBarItem elements. We need to tell the items somehow where they should redirect the user to when clicked
And there’s another thing. A
SideBarItem should be highlighted, i.e. be displayed in red when we are on a specific
URL. For example, suppose we navigate to
feed/trending. Then we expect the
Trending side bar item to get red and all other items to remain greyish.
We need to do a little bit of work to accomplish this.
src/containers/SideBar/SideBar.js element like this:
We introduce a new prop called
path. This is supposed to denote the absoluve
URL, the item should redirect to when clicked.
/feed/trending suffix is nothing that I came up with but this is how the original
Youtube app shows trending videos. I thought, we go with that as well.
SideBarItem component doesn’t do anything useful with this information. We need to make it a little bit more intelligent.
2.2. Making SideBarItem dynamic
SideBarItem needs to be aware of the current
URL to control its appearance. That’s why we change our
function based component into a
The markup in the
render function is the exact same like we had before. However, we added a new
function that determines whether the item should be highlighted (rendered in red) or not.
On render, it checks the current
URL and checks whether the its
path string is part of the current
URL. If yes, it will
render the component in red by applying the
2.3. Intermediary result
If you go to the
Home feed and click on the
Trending in the side bar, the
URL should change from
Currently, this will still show the
Home feed, but we will change that in a second.
Click on the image to see it in high resolution.
3 Updating video preview component
Fortunately, we don’t need to come up with a completely new component that displays a single video in our
Trending component. We can just use our
VideoPreview component for that.
However, a few modifications will be necessary. First of all, we need to display the
video's description. Second, we want the
video thumbnail image to be a little bit bigger. Otherwise it looks weird. We will also do a few cosmetic modifications to the font and so on.
Bear in mind that we are already using the
VideoPreview component in other component such as our
Home feed or related videos. We don’t want the component to change its behaviour in this case. So let’s add a new attribute to
VideoPreview and call it
expanded. If we pass this attribute we expect
VideoPreview to alter its behaviour as mentioned in the previous paragraph.
3.1. Making VideoPreview more flexible
First, we need to check whether we get passed an
expanded prop and react accordingly.
We first check if we get an
expanded prop from our parent component.
If yes, we store the
video's description in a variable called
Note that the first
<div> inside the
div can now be assigned three classes. It is
Also note that we added a new class called .
view-and-time. Our description is directly placed underneath the
view count and is limited to two lines.
3.2. Video preview cosmetics
Here’s how we adapt our
If that is too unintuitive to put into your file, please check it out on Github.
So basically we say that if the
video preview’s orientation is
expanded, we want our first column of the
grid to be a little big bigger. Remember that we place the video image into the first row in the first column.
.view-and-time class is only there to add a
bottom margin. It’s just better for the eye, believe me.
.semi-bold class also changes its behaviour when we are in
expanded mode. We decrease the
font-weight to normal, but increase the
font size. This is just a cometic change.
4 Wrap Up
We will create the
Trending component in the next tutorial. Otherwise this post gets too long. We will make use of the changes we made in here to quickly implement the
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.