So at the end of the last section we finished doing some styling on our application and I also realized 2
that I was running this at a higher magnification so yours probably looks a lot better than mine right 3
now. 4
I'm going to zoom back out to 100 percent. 5
And yet it looks a lot better. 6
So is probably closer to what you're seeing right now. 7
OK. 8
So our app is looking pretty good but we still don't have the ability to search for new videos. 9
So in this section we're going to hook up that search bar at the top to do that. 10
We're going to follow a similar pattern as we did with the video list where we're going to pass a callback 11
but this time down into the search bar the search bar is basically going to take a callback when we 12
passed the search bar is going to take a string a search term and make a new wide search. 13
And when the search is complete it will set the list of the set the State of the new list of videos 14
. 15
OK. 16
So let's get started here. 17
The first thing we're going to do is define our callback and we're going to do that by making a new 18
method on our app. 19
We'll call it video search and it's going to have one argument which will be a term this term right 20
here is going to be the search term. 21
So really you know a string whatever the user types into the input. 22
OK. 23
Next we're going to move this initial search right here down into the video search. 24
There's no sense in having duplicate code. 25
And this search right here is basically exactly what we need to get started. 26
So we're going to change the default search term from surfboards to term and then inside the constructor 27
we still want to do that initial search. 28
So I will say this video search therefore it's right. 29
So now when the component first is rendered the dog runs the constructor and we're still doing our video 30
search which is going to kick off the surface like so. 31
But now we've got this searching mechanism inside of this method right here which means we can pass 32
it down into search bar. 33
So we'll say we'll make this property name on search term change and we're going to pass it a function 34
where the term we'll call video search with the term. 35
So basically when search bar calls on search term change it will do so with a search term you know a 36
string and that will be sent right into this video search. 37
And that's where the term will pop up. 38
It'll do the YouTube search and everyone's happy. 39
OK. 40
So let's save this. 41
Then it's flip on over to search bar. 42
So our current handler for the input change is tucked away on state right here on the onchange writes 43
its own little function. 44
So I don't really want to do that anymore you know if we start to put some calling a call back in here 45
it's can start to look kind of ugly. 46
You might get a little bit nasty. 47
So let's let's split this event handler out to a separate method. 48
So we'll add a new method down here and we'll call it on input change 49
and we'll call it with the term. 50
So we'll say instead of setting the state down here we'll kill all of that and instead we'll say this 51
on input change with event target stock value. 52
So now whenever the input is changed onchange will call on input change with the with the new value 53
from the input itself. 54
So inside of here we really want to do two things. 55
We still want to set the state with the term and we also want to call the call back that we got from 56
index from app with this new search terms well. 57
So let's do the set state first will say this does set state and we'll use the abbreviated syntax again 58
so term and then we'll say this stop props and let's double check that handler name. 59
So we want to call this we want to call on search term change with the new search term. 60
So we'll say this stop prop's start on search term change with the new term. 61
Cool. 62
All right. 63
I'm going to save this. 64
And let's flip over to the browser refresh and let's see what happens and we start to type. 65
So let's say I know what's a good thing to search for. 66
Let's search for Cliff bars because I'm eating one right now. 67
Sweet it works. 68
You'll notice that whenever we type in here we kick off an entirely new search. 69
So if I say Cliff bars are good in every type or every keystroke that we enter. 70
A new search. 71
And then let's say I can come over here and say Clif Bars are good. 72
Or in the cliff bar. 73
I agree with this. 74
And then we can watch the video. 75
OK. 76
That you do is just ridiculous. 77
I just surfboards. 78
Let's just go back to surfboards. 79
OK. 80
Much better looks safer. 81
OK. 82
Here we go. 83
Cue baby bear right there. 84
Very safe. 85
We're happy here. 86
This is good. 87
OK. 88
So this is looking great. 89
We can search for new videos pops up on the right. 90
Everything is looking good. 91
Just one little problem when we start to type text in here. 92
The app really slows down. 93
I'm going to delete this right here. 94
And as I type out surfboards it just feels kind of laggy. 95
You know there's a good bit of lag in there if you're really great if we somehow throttled the frequency 96
with which we search. 97
So instead of every single time we press a button we do fire off a new search meaning we should only 98
fire off and do a search once every like say half a second. 99
I think would be a lot nicer. 100
So let's do that in the next section. 101
But before we get there let's do one more run through of exactly what's happening here with the search 102
term. 103
So I'm back inside of apparate here. 104
The first thing we did was we refactored the YouTube search into its own method and the method just 105
takes a single string. 106
A search term 107
we took this method video search and we passed down into search bar under the property on search term 108
change. 109
So all it's all search bar has to do is call on search Propst start on search change on search terms 110
change just real tongue twister there with the new search term and that will call our searching function 111
which will go ahead and fetch a new list of videos. 112
Then inside of search bar we refactor the onchange event here. 113
So whenever the Whenever the content of the input changed it now calls on input change with the new 114
input value and put change in turn has two functions or two you know two additional lines of code inside 115
of two purposes. 116
First it sets the state of this component. 117
Secondly it fires off the callback function on search term change. 118
One thing to note here is that it's probably a little bit superfluous for us to have like this callback 119
function and this callback function. 120
We probably don't need both of them probably could've just condensed down into one function. 121
But you know I like the old us just past them a single term and kind of be done with it. 122
It's a lot clearer than saying you know event that target value in here twice or or what have you. 123
So could do it either way but this one looks pretty nice right here. 124
OK. 125
So let's get back to it. 126
Inside the next section and start throttling the search term input