So are just about ready to start doing some actual API searches by using our API key here from YouTube 2
in the previous section we both signed up for the key and we also installed a small package to help 3
us do the searching in this section we're going to start to flesh out that search process. 4
So we need to make a call to the YouTube API to get some information. 5
Once we get that information we need to spread that info throughout the entire app right like we need 6
to search for a list of videos and then that return response that actual list of videos needs to flow 7
throughout all of our components every single component needs to know about all these different videos 8
. 9
So the question becomes where should we fetch that list of videos what component in here should be actually 10
responsible for copy that info. 11
Maybe the search part. 12
You know the search bar is the one that actually provides the search term. 13
The thing is that the video detail in the video list also use the data as well so maybe you know they 14
should be the one to make the search. 15
Well re-act has a term to kind of address this overall topic that the name of that term is downwards 16
. 17
Data flow downstream flow means that only the most parent component in the application should be responsible 18
for fetching data be it from a API or from you know a flux for flux framework or you know redux itself 19
even We'll talk more about those advanced concepts later but for now just just know that you know we 20
want the most parent component that's concerned with a piece of information to be responsible for fetching 21
it indexes and most parent component we have. 22
So all the other components that we're going to have you know video detail video list item and video 23
list are going to be children of app and all these other components are going to need to make use of 24
this fetch data. 25
Therefore it makes sense that the components in index start yes. 26
You know our actual app our top level component should be responsible for fetching the data. 27
OK so we know where we want to fetch our data from. 28
Let's let's actually get to it and fetch some data. 29
So first off remember that this file is like a silo of sorts. 30
So to get access to that search package that we downloaded we need to import it into this file. 31
So at the top we'll add imports Whitey search which stands for you know a youtube search from YouTube 32
API search. 33
OK. 34
So here's how this package works. 35
We'll call it. 36
And the first argument to it is going to be an object with a search term and the API key. 37
So this is basically like a function right here. 38
Let's give it a shot by doing a simple search. 39
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
totally outside of the component right now and we'll say why to search and or pass an object where the 41
key API key and the term of let's say surfboards. 42
So we have an object with a key in a turn then we'll pass a second argument here a function that gets 43
called with some response data and we'll just cancel that log. 44
That data like so. 45
OK. 46
So if you're familiar with say Jay query Ajax the Ajax function or the get function from Jay Querrey 47
is it looks pretty similar to it in some regard. 48
We've basically passed some configuration options and then a callback function. 49
So I gonna save this and flip over to Chrome 50
and let's go ahead and refresh the page and you'll see we get a console log here. 51
It's an array of objects and it looks like there's five of them and each of them appears to represent 52
a single video from YouTube. 53
So you can see that each object has like thumbnails which looks like a thumbnail the video. 54
We have a title for the video and we also get stuff like the description in the video as well. 55
So this looks perfect This looks like just the data that we need to put our search or search out together 56
. 57
Cool. 58
OK. 59
So now that we've got our data in a good place here let's continue in the next section and start making 60
use of it.