1
00:00:00,710 --> 00:00:05,160
In the last section we put together some code to make a request to the YouTube API.

2
00:00:05,250 --> 00:00:07,500
We're now ready to make use of that inside of our apps.

3
00:00:07,560 --> 00:00:08,610
Yes file.

4
00:00:08,640 --> 00:00:15,390
Remember any time that someone hits enter or submits our search form we want to reach out to YouTube

5
00:00:15,420 --> 00:00:18,580
and try to find some results from their API.

6
00:00:18,600 --> 00:00:23,760
So the first thing we have to do is add a callback method to our class app that will be called any time

7
00:00:23,760 --> 00:00:26,630
that someone submits the search bar form.

8
00:00:26,640 --> 00:00:36,560
So inside of my class up I'll say about on search or say on term submits and I'll make sure I defined

9
00:00:36,560 --> 00:00:41,750
this as an arrow function like so and I'm going to assume that the thing is going to be called with

10
00:00:41,750 --> 00:00:44,390
some term search string.

11
00:00:44,410 --> 00:00:48,830
Now the reason I'm calling this on term Samit is that inside of our search bar remember we had called

12
00:00:48,830 --> 00:00:51,920
the state inside of your term term being short for search term.

13
00:00:51,920 --> 00:00:56,960
So I think that kind of makes sense just to carry that terminology through our application.

14
00:00:56,970 --> 00:01:03,610
So then on my search bar can phone right here I'm going to add this callback as a prop will say how

15
00:01:03,620 --> 00:01:06,250
about like on form submit.

16
00:01:06,360 --> 00:01:09,420
I want to call this start on term submit

17
00:01:12,500 --> 00:01:13,020
remember.

18
00:01:13,030 --> 00:01:19,130
And we add a prop or kind of a callback name to a component that you and I create we can use any prop

19
00:01:19,130 --> 00:01:20,610
name that you and I want to use.

20
00:01:20,660 --> 00:01:27,680
So we could have each just as easily called out on forms submit could have been Call me when it submitted

21
00:01:27,750 --> 00:01:28,900
know anything we want it to be.

22
00:01:28,910 --> 00:01:34,710
But I think that on unformed Smit makes a pretty good amount of sense.

23
00:01:34,790 --> 00:01:39,290
Does he know if I was making this application for myself I probably would have matched this to the name

24
00:01:39,320 --> 00:01:40,560
of the actual callback.

25
00:01:40,670 --> 00:01:45,200
So I probably would have called it something like On term Samit and made the two identical.

26
00:01:45,230 --> 00:01:50,450
The only reason I'm specifically showing a different product name right here is just so you recall that

27
00:01:50,720 --> 00:01:52,870
this and this do not have to be identical.

28
00:01:52,880 --> 00:01:57,470
That's the only reason I'm not making the same otherwise if this was my own project that was making

29
00:01:57,470 --> 00:01:58,580
for my own purpose.

30
00:01:58,580 --> 00:02:02,490
I would probably give them the same exact name.

31
00:02:02,510 --> 00:02:02,750
All right.

32
00:02:02,750 --> 00:02:07,820
So now back inside of my search bar I'm going to find my on for summit number.

33
00:02:07,820 --> 00:02:09,440
We've got to do right here.

34
00:02:09,620 --> 00:02:14,800
We want to make sure that we call that prop any time that these are Smyth's the form.

35
00:02:14,810 --> 00:02:18,920
So inside of your all say this stock props start on form submit

36
00:02:23,080 --> 00:02:28,960
and I'm going to call that with this state term so that our parent component is told what the current

37
00:02:28,960 --> 00:02:32,880
search term is.

38
00:02:32,880 --> 00:02:37,620
So now whenever we submit the form this function right or should be cold with the appropriate search

39
00:02:37,620 --> 00:02:40,290
term Just make sure that's the case on that.

40
00:02:40,290 --> 00:02:44,840
On a quick console log in console log out the term.

41
00:02:44,850 --> 00:02:46,750
All right so let's flip back over.

42
00:02:46,780 --> 00:02:51,630
I'll enter in some search term hit enter and I see the appropriate counsel lock.

43
00:02:51,660 --> 00:02:52,660
Perfect.

44
00:02:52,680 --> 00:02:59,280
So I think that we're now ready to go ahead and remove that console log import the YouTube API and use

45
00:02:59,280 --> 00:03:01,830
that to actually make a request to YouTube.

46
00:03:02,310 --> 00:03:11,350
So at the top I'm going to add a import statement for simply YouTube and I'll import that from up one

47
00:03:11,350 --> 00:03:13,480
directory so notice the two dots right there.

48
00:03:13,480 --> 00:03:20,060
That means go up into the Cercy folder then go into the API folder and find the file.

49
00:03:20,060 --> 00:03:24,650
YouTube.

50
00:03:24,710 --> 00:03:27,880
So then inside of your I can call the U2 function.

51
00:03:27,880 --> 00:03:31,440
Remember this is now a preconfigured instance of ASIO's.

52
00:03:31,570 --> 00:03:38,240
So I'll say YouTube does get a pass in the route or the path that I want to make a get request to.

53
00:03:38,320 --> 00:03:44,020
In this case I want to access the search and point and then now that we know what the search term is

54
00:03:44,380 --> 00:03:51,970
we can pass in the actual Paramo of Q to tell the YouTube API exactly what search term we want to use.

55
00:03:51,970 --> 00:03:59,380
So as the second argument all out in a parampara object that's going to have a property called Q.

56
00:03:59,480 --> 00:04:05,680
Remember this kid right here is called Q Specifically because that is what that YouTube API documentation

57
00:04:05,740 --> 00:04:07,040
told us to call it simply.

58
00:04:07,040 --> 00:04:10,360
Q Not Kohary 90 like that just Q by itself.

59
00:04:11,460 --> 00:04:17,230
And then our search string will be term like so which is the argument that had been passed into the

60
00:04:17,230 --> 00:04:19,950
on terms Samit function.

61
00:04:19,960 --> 00:04:22,830
Now this right here is a asynchronous API request.

62
00:04:22,930 --> 00:04:28,210
So in order to interact with it we have to use a promise or that async a wait syntax that we saw a little

63
00:04:28,210 --> 00:04:33,820
bit ago but before we worry about that too much let's just try to make a request with what you see right

64
00:04:33,820 --> 00:04:39,220
here and just ensure that we actually see our request come up in the network request log and that we

65
00:04:39,220 --> 00:04:42,220
can actually reach out to YouTube successfully.

66
00:04:42,350 --> 00:04:49,030
So I going to save this file and my search for a file and then I'll flip back over to my application.

67
00:04:49,210 --> 00:04:54,540
I'm going to open up my network request log.

68
00:04:54,630 --> 00:04:59,830
Network not elements and then I'm going to filter by a char and fetch requests.

69
00:05:00,360 --> 00:05:03,000
And then just make this a little bit easier to read.

70
00:05:03,030 --> 00:05:06,920
All click on clear to throw out that requests log.

71
00:05:06,930 --> 00:05:08,640
So now we can go ahead and do a search.

72
00:05:08,850 --> 00:05:11,230
Let's go ahead and do buildings.

73
00:05:11,550 --> 00:05:12,680
When I hit enter.

74
00:05:12,840 --> 00:05:15,180
You'll notice that a request right here pops up.

75
00:05:15,180 --> 00:05:18,850
I can hover over it and I'll see the entire query string on there.

76
00:05:18,870 --> 00:05:23,410
So you see I can't quite move my mouse to show you exactly but you can see at the end of that Eurail

77
00:05:23,460 --> 00:05:28,500
on the first line it says v3 search and then has the little question mark that indicates that we're

78
00:05:28,500 --> 00:05:30,230
about to add on a query string.

79
00:05:30,330 --> 00:05:37,140
So you can see part snippet Max results Phife our API key and then q equals buildings.

80
00:05:37,140 --> 00:05:41,780
So all those different query parameters got added onto the request.

81
00:05:41,850 --> 00:05:47,570
So now we can click on this go to the preview tab right here and it will show you the response we got

82
00:05:47,570 --> 00:05:48,320
from YouTube.

83
00:05:50,560 --> 00:05:50,890
All right.

84
00:05:50,890 --> 00:05:53,420
So inside of here is a item's property.

85
00:05:53,530 --> 00:05:56,250
There are five items zero through four.

86
00:05:56,320 --> 00:06:01,240
And if you click on any of those items and then expand this snippet property you'll see that it has

87
00:06:01,240 --> 00:06:04,440
some information about a very particular YouTube video.

88
00:06:04,720 --> 00:06:09,190
So in this case this video has a title of 17 best building demolitions ever.

89
00:06:09,190 --> 00:06:12,610
Boy that sounds like a amazing video.

90
00:06:12,630 --> 00:06:14,520
I'm going to watch that after this.

91
00:06:14,760 --> 00:06:21,150
And we've got some thumbnails on here that contains some links to images that we can show on the screen.

92
00:06:21,150 --> 00:06:23,750
Now we've also got a video I.D. as well.

93
00:06:23,760 --> 00:06:25,650
You'll notice back up here outside the snippet.

94
00:06:25,650 --> 00:06:31,560
Is this I.D. property inside of it is a video I.D. this video I.D. is how we're going to eventually

95
00:06:31,560 --> 00:06:33,600
get the video to play inside of our application.

96
00:06:33,600 --> 00:06:37,580
So that's going to eventually be pretty relevant for what we're trying to do.

97
00:06:37,580 --> 00:06:38,340
All right so that's it.

98
00:06:38,360 --> 00:06:41,710
We've now successfully made a request to the YouTube API.

99
00:06:41,800 --> 00:06:42,890
So let's take a pause here.

100
00:06:42,920 --> 00:06:47,870
When we come back the next section we're going to start to focus on taking that list of videos and rendering

101
00:06:47,870 --> 00:06:50,350
them as a list inside of our application.