An last video we spoke about how we have two awkward things still inside of our application.
First when these are first visits our application.
They see nothing.
And then the other thing is that when they search for a video show it on the screen and then search
for another term it updates the video list but not the video detail.
So in this video we're going to use one little fix to address both these problems at the same time.
All right so back inside my code editor I'm going to find the app component.
Remember that right now inside of on terms submit we currently fetcher a list of videos and then we
call set state to update our application.
In this case the video set Stay right here is only going to change the list of videos on the right hand
side.
And so what would be really nice is if we somehow updated our selected video at the exact same time.
So in other words when a user searches for a term we'll not only update our list of videos but we will
also pick one of the videos out of that list and set it as our selected video.
So the instant that a user searches for something boom we'll just show them a new video inside the video
detail.
So to do so I'm going to turn this into a multi line Set statements like so.
Oops sorry about that.
Riego will too on set statement like so and then on the second line still inside that object I'll say.
Selected video is going to be a response.
Data items at 0.
So this essentially says when we do a search go ahead and take the first video and the resultset and
just use it as our default video so that will ensure that as soon as the user does a search boom they're
going to see something appear on the screen.
Now let's test this out very quickly.
I'll save the file flip back over.
And now if I look at buildings we see a video audio magically appear.
And likewise if I do a search for say children stories I see the new video appear here as well to indicate
hey we recognize that you have search for some new video.
OK that looks good.
SNOW The last thing we need to do is make sure that we have some default search for this thing as opposed
to showing the loading text at the top.
So to handle that or if do is define a component.
Did mt life cycle method inside of our component that component did mount method.
We'll go ahead and attempt to make some default search when this app component first is rendered to
the screen.
So I'm going to define component did mount inside of your.
So then any time we call this I'm going to manually call on term submit because that is the function
currently that is handling all the logic around doing a search in updating the state of our component.
So I can call this start on term submit and I can put some default search term inside of here whatever
we put inside of your will be always shown to the user when the application first floats.
So the filling in with the same term or fitting in with the same term that I've been using all throughout
this application I'm going to use a default search term of buildings.
Like I said that means that when the application first loads we're going to do a search for buildings
and show the results on the screen.
So now if I flip back over I can refresh the page and I see buildings appear.
Now you will notice that we still see that text loading appear for just half a second.
That is totally to be expected because remember it takes some amount of time to get a response from
the YouTube API.
So while we are waiting to see the response from the YouTube API we're still going to have for a very
brief period of time selected video set to know which tells the video detail to just render the string
loading on the screen.
And that's where we see that for a very brief period of time OK so that's pretty much it.
Now it can do a full test around this thing.
I can search for children stories and it looks like everything updates I can start a video playing ok.
I cannot.
Some of these videos we cannot play if they are a embedded video.
That's really fine.
We can just like a different video here and we go and that's better.
So I've got a video playing and now if I do a search for something else like buildings
the video pauses and shows a different one and I could start that one up as well.
Perfect.
OK.
That's pretty much the entire application.
So like I said at the very start of this entire process yeah it ends up being pretty similar to the
picture browser application or the splash one that we worked on before this but we definitely ran into
a couple of unique little challenges that required us to just kind of think around a little bit.
So I hope you enjoy putting this out together.
We're not going to do a review on this out because it had a lot of similar topics to the last application
worked on.
So we're going to pause right here and then continue in the next section and move directly on to our
next big topic.
So I'll see you there.