1 00:00:00,600 --> 00:00:05,790 So are just about ready to start doing some actual API searches by using our API key here from YouTube 2 00:00:06,620 --> 00:00:11,310 in the previous section we both signed up for the key and we also installed a small package to help 3 00:00:11,310 --> 00:00:17,010 us do the searching in this section we're going to start to flesh out that search process. 4 00:00:17,010 --> 00:00:21,320 So we need to make a call to the YouTube API to get some information. 5 00:00:21,780 --> 00:00:26,520 Once we get that information we need to spread that info throughout the entire app right like we need 6 00:00:26,520 --> 00:00:32,220 to search for a list of videos and then that return response that actual list of videos needs to flow 7 00:00:32,220 --> 00:00:37,680 throughout all of our components every single component needs to know about all these different videos 8 00:00:37,700 --> 00:00:38,190 . 9 00:00:38,670 --> 00:00:44,910 So the question becomes where should we fetch that list of videos what component in here should be actually 10 00:00:44,910 --> 00:00:47,430 responsible for copy that info. 11 00:00:47,430 --> 00:00:48,810 Maybe the search part. 12 00:00:48,830 --> 00:00:52,290 You know the search bar is the one that actually provides the search term. 13 00:00:52,290 --> 00:00:57,750 The thing is that the video detail in the video list also use the data as well so maybe you know they 14 00:00:57,750 --> 00:00:59,560 should be the one to make the search. 15 00:01:00,000 --> 00:01:05,790 Well re-act has a term to kind of address this overall topic that the name of that term is downwards 16 00:01:05,790 --> 00:01:05,810 . 17 00:01:05,820 --> 00:01:11,880 Data flow downstream flow means that only the most parent component in the application should be responsible 18 00:01:11,880 --> 00:01:19,950 for fetching data be it from a API or from you know a flux for flux framework or you know redux itself 19 00:01:19,980 --> 00:01:25,890 even We'll talk more about those advanced concepts later but for now just just know that you know we 20 00:01:25,890 --> 00:01:31,410 want the most parent component that's concerned with a piece of information to be responsible for fetching 21 00:01:31,410 --> 00:01:34,790 it indexes and most parent component we have. 22 00:01:34,980 --> 00:01:39,180 So all the other components that we're going to have you know video detail video list item and video 23 00:01:39,180 --> 00:01:45,390 list are going to be children of app and all these other components are going to need to make use of 24 00:01:45,390 --> 00:01:46,660 this fetch data. 25 00:01:46,800 --> 00:01:50,600 Therefore it makes sense that the components in index start yes. 26 00:01:50,610 --> 00:01:55,520 You know our actual app our top level component should be responsible for fetching the data. 27 00:01:56,040 --> 00:01:59,490 OK so we know where we want to fetch our data from. 28 00:01:59,490 --> 00:02:04,310 Let's let's actually get to it and fetch some data. 29 00:02:04,380 --> 00:02:07,490 So first off remember that this file is like a silo of sorts. 30 00:02:07,500 --> 00:02:13,020 So to get access to that search package that we downloaded we need to import it into this file. 31 00:02:13,290 --> 00:02:21,690 So at the top we'll add imports Whitey search which stands for you know a youtube search from YouTube 32 00:02:21,930 --> 00:02:24,920 API search. 33 00:02:26,100 --> 00:02:26,930 OK. 34 00:02:27,270 --> 00:02:29,290 So here's how this package works. 35 00:02:29,730 --> 00:02:30,740 We'll call it. 36 00:02:30,750 --> 00:02:36,120 And the first argument to it is going to be an object with a search term and the API key. 37 00:02:36,150 --> 00:02:38,390 So this is basically like a function right here. 38 00:02:38,970 --> 00:02:41,640 Let's give it a shot by doing a simple search. 39 00:02:41,940 --> 00:02:46,500 So a lot of newline here and this is just going to be you know a for example we're going to do this 40 00:02:46,500 --> 00:02:55,440 totally outside of the component right now and we'll say why to search and or pass an object where the 41 00:02:55,440 --> 00:03:03,930 key API key and the term of let's say surfboards. 42 00:03:03,930 --> 00:03:14,310 So we have an object with a key in a turn then we'll pass a second argument here a function that gets 43 00:03:14,310 --> 00:03:19,170 called with some response data and we'll just cancel that log. 44 00:03:19,380 --> 00:03:21,050 That data like so. 45 00:03:21,570 --> 00:03:22,090 OK. 46 00:03:22,200 --> 00:03:27,570 So if you're familiar with say Jay query Ajax the Ajax function or the get function from Jay Querrey 47 00:03:27,760 --> 00:03:30,910 is it looks pretty similar to it in some regard. 48 00:03:30,960 --> 00:03:36,060 We've basically passed some configuration options and then a callback function. 49 00:03:36,840 --> 00:03:39,890 So I gonna save this and flip over to Chrome 50 00:03:42,590 --> 00:03:47,240 and let's go ahead and refresh the page and you'll see we get a console log here. 51 00:03:47,700 --> 00:03:54,120 It's an array of objects and it looks like there's five of them and each of them appears to represent 52 00:03:54,180 --> 00:03:57,920 a single video from YouTube. 53 00:03:58,230 --> 00:04:05,220 So you can see that each object has like thumbnails which looks like a thumbnail the video. 54 00:04:05,220 --> 00:04:11,040 We have a title for the video and we also get stuff like the description in the video as well. 55 00:04:11,080 --> 00:04:16,140 So this looks perfect This looks like just the data that we need to put our search or search out together 56 00:04:16,160 --> 00:04:17,360 . 57 00:04:17,400 --> 00:04:19,090 Cool. 58 00:04:20,220 --> 00:04:20,770 OK. 59 00:04:20,850 --> 00:04:24,960 So now that we've got our data in a good place here let's continue in the next section and start making 60 00:04:24,960 --> 00:04:25,720 use of it.