1
00:00:00,780 --> 00:00:05,360
An last video we spoke about how we have two awkward things still inside of our application.

2
00:00:05,440 --> 00:00:07,740
First when these are first visits our application.

3
00:00:07,750 --> 00:00:08,680
They see nothing.

4
00:00:08,800 --> 00:00:13,960
And then the other thing is that when they search for a video show it on the screen and then search

5
00:00:13,960 --> 00:00:17,230
for another term it updates the video list but not the video detail.

6
00:00:17,380 --> 00:00:23,050
So in this video we're going to use one little fix to address both these problems at the same time.

7
00:00:23,050 --> 00:00:27,190
All right so back inside my code editor I'm going to find the app component.

8
00:00:27,250 --> 00:00:32,860
Remember that right now inside of on terms submit we currently fetcher a list of videos and then we

9
00:00:32,860 --> 00:00:35,840
call set state to update our application.

10
00:00:36,010 --> 00:00:41,950
In this case the video set Stay right here is only going to change the list of videos on the right hand

11
00:00:41,950 --> 00:00:42,620
side.

12
00:00:42,850 --> 00:00:49,050
And so what would be really nice is if we somehow updated our selected video at the exact same time.

13
00:00:49,420 --> 00:00:54,670
So in other words when a user searches for a term we'll not only update our list of videos but we will

14
00:00:54,670 --> 00:01:00,240
also pick one of the videos out of that list and set it as our selected video.

15
00:01:00,280 --> 00:01:05,230
So the instant that a user searches for something boom we'll just show them a new video inside the video

16
00:01:05,230 --> 00:01:06,250
detail.

17
00:01:06,430 --> 00:01:11,560
So to do so I'm going to turn this into a multi line Set statements like so.

18
00:01:11,830 --> 00:01:13,220
Oops sorry about that.

19
00:01:13,420 --> 00:01:19,950
Riego will too on set statement like so and then on the second line still inside that object I'll say.

20
00:01:19,960 --> 00:01:23,260
Selected video is going to be a response.

21
00:01:23,280 --> 00:01:26,900
Data items at 0.

22
00:01:26,930 --> 00:01:32,360
So this essentially says when we do a search go ahead and take the first video and the resultset and

23
00:01:32,360 --> 00:01:38,520
just use it as our default video so that will ensure that as soon as the user does a search boom they're

24
00:01:38,540 --> 00:01:40,700
going to see something appear on the screen.

25
00:01:40,700 --> 00:01:42,600
Now let's test this out very quickly.

26
00:01:42,680 --> 00:01:45,150
I'll save the file flip back over.

27
00:01:45,150 --> 00:01:49,380
And now if I look at buildings we see a video audio magically appear.

28
00:01:49,670 --> 00:01:56,600
And likewise if I do a search for say children stories I see the new video appear here as well to indicate

29
00:01:56,630 --> 00:01:59,720
hey we recognize that you have search for some new video.

30
00:02:00,200 --> 00:02:01,220
OK that looks good.

31
00:02:01,220 --> 00:02:06,200
SNOW The last thing we need to do is make sure that we have some default search for this thing as opposed

32
00:02:06,200 --> 00:02:08,380
to showing the loading text at the top.

33
00:02:09,040 --> 00:02:11,980
So to handle that or if do is define a component.

34
00:02:11,980 --> 00:02:17,580
Did mt life cycle method inside of our component that component did mount method.

35
00:02:17,590 --> 00:02:23,560
We'll go ahead and attempt to make some default search when this app component first is rendered to

36
00:02:23,560 --> 00:02:24,280
the screen.

37
00:02:25,510 --> 00:02:31,480
So I'm going to define component did mount inside of your.

38
00:02:31,590 --> 00:02:37,260
So then any time we call this I'm going to manually call on term submit because that is the function

39
00:02:37,260 --> 00:02:42,780
currently that is handling all the logic around doing a search in updating the state of our component.

40
00:02:42,780 --> 00:02:49,800
So I can call this start on term submit and I can put some default search term inside of here whatever

41
00:02:49,800 --> 00:02:54,230
we put inside of your will be always shown to the user when the application first floats.

42
00:02:54,300 --> 00:02:59,340
So the filling in with the same term or fitting in with the same term that I've been using all throughout

43
00:02:59,340 --> 00:03:03,150
this application I'm going to use a default search term of buildings.

44
00:03:03,400 --> 00:03:07,740
Like I said that means that when the application first loads we're going to do a search for buildings

45
00:03:07,920 --> 00:03:09,610
and show the results on the screen.

46
00:03:09,910 --> 00:03:15,130
So now if I flip back over I can refresh the page and I see buildings appear.

47
00:03:15,540 --> 00:03:19,460
Now you will notice that we still see that text loading appear for just half a second.

48
00:03:19,530 --> 00:03:24,150
That is totally to be expected because remember it takes some amount of time to get a response from

49
00:03:24,150 --> 00:03:25,380
the YouTube API.

50
00:03:25,620 --> 00:03:31,290
So while we are waiting to see the response from the YouTube API we're still going to have for a very

51
00:03:31,290 --> 00:03:38,730
brief period of time selected video set to know which tells the video detail to just render the string

52
00:03:39,210 --> 00:03:40,380
loading on the screen.

53
00:03:40,380 --> 00:03:46,180
And that's where we see that for a very brief period of time OK so that's pretty much it.

54
00:03:46,210 --> 00:03:47,860
Now it can do a full test around this thing.

55
00:03:47,860 --> 00:03:56,780
I can search for children stories and it looks like everything updates I can start a video playing ok.

56
00:03:56,790 --> 00:03:58,100
I cannot.

57
00:03:58,130 --> 00:04:01,880
Some of these videos we cannot play if they are a embedded video.

58
00:04:01,880 --> 00:04:02,550
That's really fine.

59
00:04:02,550 --> 00:04:07,920
We can just like a different video here and we go and that's better.

60
00:04:07,930 --> 00:04:12,630
So I've got a video playing and now if I do a search for something else like buildings

61
00:04:15,790 --> 00:04:19,880
the video pauses and shows a different one and I could start that one up as well.

62
00:04:19,900 --> 00:04:20,360
Perfect.

63
00:04:20,380 --> 00:04:20,710
OK.

64
00:04:20,740 --> 00:04:22,950
That's pretty much the entire application.

65
00:04:23,170 --> 00:04:27,970
So like I said at the very start of this entire process yeah it ends up being pretty similar to the

66
00:04:28,120 --> 00:04:32,680
picture browser application or the splash one that we worked on before this but we definitely ran into

67
00:04:32,680 --> 00:04:37,300
a couple of unique little challenges that required us to just kind of think around a little bit.

68
00:04:37,480 --> 00:04:39,510
So I hope you enjoy putting this out together.

69
00:04:39,520 --> 00:04:43,690
We're not going to do a review on this out because it had a lot of similar topics to the last application

70
00:04:43,690 --> 00:04:44,350
worked on.

71
00:04:44,560 --> 00:04:48,850
So we're going to pause right here and then continue in the next section and move directly on to our

72
00:04:48,910 --> 00:04:50,470
next big topic.

73
00:04:50,470 --> 00:04:51,480
So I'll see you there.