1

00:00:00,630  -->  00:00:05,370
So at the end of the last section we finished doing some styling on our application and I also realized

2

00:00:05,370  -->  00:00:09,420
that I was running this at a higher magnification so yours probably looks a lot better than mine right

3

00:00:09,420  -->  00:00:10,120
now.

4

00:00:10,140  -->  00:00:12,980
I'm going to zoom back out to 100 percent.

5

00:00:13,030  -->  00:00:14,620
And yet it looks a lot better.

6

00:00:14,640  -->  00:00:17,130
So is probably closer to what you're seeing right now.

7

00:00:17,720  -->  00:00:18,270
OK.

8

00:00:18,300  -->  00:00:23,120
So our app is looking pretty good but we still don't have the ability to search for new videos.

9

00:00:23,130  -->  00:00:28,300
So in this section we're going to hook up that search bar at the top to do that.

10

00:00:28,320  -->  00:00:33,930
We're going to follow a similar pattern as we did with the video list where we're going to pass a callback

11

00:00:34,470  -->  00:00:41,100
but this time down into the search bar the search bar is basically going to take a callback when we

12

00:00:41,100  -->  00:00:47,280
passed the search bar is going to take a string a search term and make a new wide search.

13

00:00:47,430  -->  00:00:52,170
And when the search is complete it will set the list of the set the State of the new list of videos

14

00:00:52,180  -->  00:00:53,030
.

15

00:00:53,870  -->  00:00:54,550
OK.

16

00:00:54,780  -->  00:00:56,130
So let's get started here.

17

00:00:56,130  -->  00:01:00,660
The first thing we're going to do is define our callback and we're going to do that by making a new

18

00:01:00,660  -->  00:01:02,580
method on our app.

19

00:01:02,580  -->  00:01:09,120
We'll call it video search and it's going to have one argument which will be a term this term right

20

00:01:09,120  -->  00:01:10,500
here is going to be the search term.

21

00:01:10,500  -->  00:01:15,010
So really you know a string whatever the user types into the input.

22

00:01:16,330  -->  00:01:16,960
OK.

23

00:01:17,310  -->  00:01:25,600
Next we're going to move this initial search right here down into the video search.

24

00:01:25,650  -->  00:01:27,740
There's no sense in having duplicate code.

25

00:01:28,080  -->  00:01:32,390
And this search right here is basically exactly what we need to get started.

26

00:01:32,430  -->  00:01:38,850
So we're going to change the default search term from surfboards to term and then inside the constructor

27

00:01:38,910  -->  00:01:41,070
we still want to do that initial search.

28

00:01:41,220  -->  00:01:48,550
So I will say this video search therefore it's right.

29

00:01:48,750  -->  00:01:55,350
So now when the component first is rendered the dog runs the constructor and we're still doing our video

30

00:01:55,350  -->  00:01:58,200
search which is going to kick off the surface like so.

31

00:01:58,680  -->  00:02:04,380
But now we've got this searching mechanism inside of this method right here which means we can pass

32

00:02:04,380  -->  00:02:06,190
it down into search bar.

33

00:02:06,690  -->  00:02:16,110
So we'll say we'll make this property name on search term change and we're going to pass it a function

34

00:02:17,010  -->  00:02:23,620
where the term we'll call video search with the term.

35

00:02:24,720  -->  00:02:31,800
So basically when search bar calls on search term change it will do so with a search term you know a

36

00:02:31,800  -->  00:02:36,310
string and that will be sent right into this video search.

37

00:02:36,660  -->  00:02:38,330
And that's where the term will pop up.

38

00:02:38,340  -->  00:02:41,190
It'll do the YouTube search and everyone's happy.

39

00:02:41,700  -->  00:02:42,030
OK.

40

00:02:42,030  -->  00:02:43,800
So let's save this.

41

00:02:44,200  -->  00:02:47,320
Then it's flip on over to search bar.

42

00:02:48,390  -->  00:02:55,440
So our current handler for the input change is tucked away on state right here on the onchange writes

43

00:02:55,440  -->  00:02:56,900
its own little function.

44

00:02:57,480  -->  00:03:01,980
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

00:03:01,980  -->  00:03:03,700
it's can start to look kind of ugly.

46

00:03:03,810  -->  00:03:05,010
You might get a little bit nasty.

47

00:03:05,010  -->  00:03:09,430
So let's let's split this event handler out to a separate method.

48

00:03:09,690  -->  00:03:15,060
So we'll add a new method down here and we'll call it on input change

49

00:03:17,640  -->  00:03:21,000
and we'll call it with the term.

50

00:03:21,720  -->  00:03:29,130
So we'll say instead of setting the state down here we'll kill all of that and instead we'll say this

51

00:03:29,340  -->  00:03:35,240
on input change with event target stock value.

52

00:03:35,670  -->  00:03:44,940
So now whenever the input is changed onchange will call on input change with the with the new value

53

00:03:44,970  -->  00:03:47,330
from the input itself.

54

00:03:47,340  -->  00:03:50,160
So inside of here we really want to do two things.

55

00:03:50,160  -->  00:03:55,680
We still want to set the state with the term and we also want to call the call back that we got from

56

00:03:55,740  -->  00:03:59,150
index from app with this new search terms well.

57

00:03:59,160  -->  00:04:06,210
So let's do the set state first will say this does set state and we'll use the abbreviated syntax again

58

00:04:06,900  -->  00:04:13,240
so term and then we'll say this stop props and let's double check that handler name.

59

00:04:13,320  -->  00:04:19,100
So we want to call this we want to call on search term change with the new search term.

60

00:04:19,890  -->  00:04:25,170
So we'll say this stop prop's start on search term change with the new term.

61

00:04:25,250  -->  00:04:28,720
Cool.

62

00:04:29,010  -->  00:04:29,360
All right.

63

00:04:29,370  -->  00:04:31,660
I'm going to save this.

64

00:04:32,110  -->  00:04:38,260
And let's flip over to the browser refresh and let's see what happens and we start to type.

65

00:04:38,280  -->  00:04:41,730
So let's say I know what's a good thing to search for.

66

00:04:41,730  -->  00:04:45,360
Let's search for Cliff bars because I'm eating one right now.

67

00:04:45,360  -->  00:04:47,910
Sweet it works.

68

00:04:47,970  -->  00:04:52,480
You'll notice that whenever we type in here we kick off an entirely new search.

69

00:04:52,500  -->  00:04:58,710
So if I say Cliff bars are good in every type or every keystroke that we enter.

70

00:04:58,800  -->  00:04:59,840
A new search.

71

00:05:00,120  -->  00:05:03,530
And then let's say I can come over here and say Clif Bars are good.

72

00:05:03,590  -->  00:05:04,550
Or in the cliff bar.

73

00:05:04,560  -->  00:05:05,700
I agree with this.

74

00:05:06,270  -->  00:05:09,090
And then we can watch the video.

75

00:05:11,290  -->  00:05:11,850
OK.

76

00:05:11,970  -->  00:05:14,130
That you do is just ridiculous.

77

00:05:14,140  -->  00:05:16,420
I just surfboards.

78

00:05:16,530  -->  00:05:18,660
Let's just go back to surfboards.

79

00:05:19,560  -->  00:05:20,390
OK.

80

00:05:20,820  -->  00:05:22,860
Much better looks safer.

81

00:05:22,860  -->  00:05:23,130
OK.

82

00:05:23,130  -->  00:05:23,470
Here we go.

83

00:05:23,470  -->  00:05:24,890
Cue baby bear right there.

84

00:05:24,960  -->  00:05:25,560
Very safe.

85

00:05:25,560  -->  00:05:26,160
We're happy here.

86

00:05:26,160  -->  00:05:27,070
This is good.

87

00:05:27,480  -->  00:05:28,160
OK.

88

00:05:28,230  -->  00:05:29,580
So this is looking great.

89

00:05:29,580  -->  00:05:31,860
We can search for new videos pops up on the right.

90

00:05:31,860  -->  00:05:33,040
Everything is looking good.

91

00:05:33,060  -->  00:05:36,170
Just one little problem when we start to type text in here.

92

00:05:36,210  -->  00:05:38,240
The app really slows down.

93

00:05:38,340  -->  00:05:39,670
I'm going to delete this right here.

94

00:05:39,870  -->  00:05:43,830
And as I type out surfboards it just feels kind of laggy.

95

00:05:43,830  -->  00:05:49,290
You know there's a good bit of lag in there if you're really great if we somehow throttled the frequency

96

00:05:49,290  -->  00:05:50,590
with which we search.

97

00:05:50,610  -->  00:05:55,770
So instead of every single time we press a button we do fire off a new search meaning we should only

98

00:05:56,100  -->  00:05:59,290
fire off and do a search once every like say half a second.

99

00:05:59,340  -->  00:06:01,650
I think would be a lot nicer.

100

00:06:01,740  -->  00:06:03,220
So let's do that in the next section.

101

00:06:03,360  -->  00:06:08,250
But before we get there let's do one more run through of exactly what's happening here with the search

102

00:06:08,250  -->  00:06:09,130
term.

103

00:06:09,750  -->  00:06:11,740
So I'm back inside of apparate here.

104

00:06:11,760  -->  00:06:17,370
The first thing we did was we refactored the YouTube search into its own method and the method just

105

00:06:17,370  -->  00:06:18,480
takes a single string.

106

00:06:18,540  -->  00:06:19,200
A search term

107

00:06:22,320  -->  00:06:30,330
we took this method video search and we passed down into search bar under the property on search term

108

00:06:30,330  -->  00:06:31,410
change.

109

00:06:31,410  -->  00:06:39,600
So all it's all search bar has to do is call on search Propst start on search change on search terms

110

00:06:39,610  -->  00:06:45,510
change just real tongue twister there with the new search term and that will call our searching function

111

00:06:45,810  -->  00:06:50,190
which will go ahead and fetch a new list of videos.

112

00:06:50,190  -->  00:06:55,640
Then inside of search bar we refactor the onchange event here.

113

00:06:55,800  -->  00:07:02,940
So whenever the Whenever the content of the input changed it now calls on input change with the new

114

00:07:02,940  -->  00:07:10,380
input value and put change in turn has two functions or two you know two additional lines of code inside

115

00:07:10,380  -->  00:07:11,750
of two purposes.

116

00:07:12,060  -->  00:07:14,620
First it sets the state of this component.

117

00:07:14,760  -->  00:07:21,320
Secondly it fires off the callback function on search term change.

118

00:07:21,690  -->  00:07:27,150
One thing to note here is that it's probably a little bit superfluous for us to have like this callback

119

00:07:27,150  -->  00:07:28,880
function and this callback function.

120

00:07:28,890  -->  00:07:32,570
We probably don't need both of them probably could've just condensed down into one function.

121

00:07:32,580  -->  00:07:37,430
But you know I like the old us just past them a single term and kind of be done with it.

122

00:07:37,440  -->  00:07:42,210
It's a lot clearer than saying you know event that target value in here twice or or what have you.

123

00:07:42,210  -->  00:07:45,760
So could do it either way but this one looks pretty nice right here.

124

00:07:46,230  -->  00:07:46,740
OK.

125

00:07:46,740  -->  00:07:47,990
So let's get back to it.

126

00:07:48,060  -->  00:07:51,310
Inside the next section and start throttling the search term input