1
00:00:01,650 --> 00:00:06,320
I've got my application running inside the browser, just running it right now inside of our new videos,

2
00:00:06,330 --> 00:00:10,020
Dash Hoke's project, to make sure that the entire project still works as expected.

3
00:00:10,340 --> 00:00:13,320
But I can still do a search up here or say, forest.

4
00:00:14,370 --> 00:00:15,240
Look on results.

5
00:00:16,680 --> 00:00:17,480
Played the video.

6
00:00:18,350 --> 00:00:20,350
Yep, looks like everything still works as expected.

7
00:00:20,930 --> 00:00:21,160
OK.

8
00:00:21,880 --> 00:00:25,240
Remember, we really only have to make changes to the app component and the search bar.

9
00:00:25,840 --> 00:00:28,300
The search bar is definitely an easier component to tackle.

10
00:00:28,600 --> 00:00:29,950
So let's use that to get started.

11
00:00:30,860 --> 00:00:35,840
Back inside my editor, I've already opened up the search bar, James File inside the components directory.

12
00:00:36,440 --> 00:00:42,110
Now, really quick, make sure you are making changes to your new videos, Dash Hooks Project, not

13
00:00:42,110 --> 00:00:43,490
the old videos project.

14
00:00:43,970 --> 00:00:48,350
It would be great if you keep a record of the old videos project that use class components and the new

15
00:00:48,350 --> 00:00:49,370
one that's going to use hooks.

16
00:00:49,610 --> 00:00:51,680
Just you can compare and contrast the code on your own.

17
00:00:53,290 --> 00:00:58,090
And then inside of this component, we're going to take a quick glance at the contents of this class

18
00:00:58,120 --> 00:01:01,270
before we start to refactor it into a normal function component.

19
00:01:02,170 --> 00:01:06,010
So as I look at this, I noticed right away that we're making use of state inside of here.

20
00:01:06,550 --> 00:01:11,530
So as we refactor this into a function component, we'll definitely need to make use of the use state

21
00:01:11,570 --> 00:01:11,850
hook.

22
00:01:12,670 --> 00:01:17,230
However, search bar definitely does not make use of any life-cycle methods.

23
00:01:17,600 --> 00:01:22,210
And because of that, we probably do not need to make use of the use effect hook inside of here.

24
00:01:22,990 --> 00:01:28,120
Use effect is usually used inside of a function component to kind of emulate or simulate the use of

25
00:01:28,120 --> 00:01:29,680
a lifecycle method.

26
00:01:29,860 --> 00:01:34,000
So because we have no lifecycle methods, no need for any use effect took.

27
00:01:35,230 --> 00:01:35,470
All right.

28
00:01:35,590 --> 00:01:40,240
So then mind, we're going to import the only hook that we're probably gonna use inside of here, which

29
00:01:40,240 --> 00:01:41,230
is you state.

30
00:01:43,160 --> 00:01:48,050
Then at the top of the file, I'm going to declare a new function component called search bar.

31
00:01:49,870 --> 00:01:53,230
So we are going to go through our class of search bar line by line.

32
00:01:53,510 --> 00:01:58,210
And for every line of code, we're going to move it over into our function component and refactor it

33
00:01:58,270 --> 00:01:58,870
as we go.

34
00:01:59,730 --> 00:02:02,650
So we're gonna first begin with the state declaration right here.

35
00:02:03,370 --> 00:02:07,180
So we need to make sure that we declare a piece of state inside of our function component.

36
00:02:07,660 --> 00:02:08,290
All term.

37
00:02:08,840 --> 00:02:11,740
And we want to tab a default value of an empty string.

38
00:02:12,670 --> 00:02:17,620
So to do so inside of our function component, we'll put in term and set term.

39
00:02:19,180 --> 00:02:22,720
We'll call you state and provide a default value of empty string.

40
00:02:24,130 --> 00:02:27,470
And then going to delete that state declaration out of search bar.

41
00:02:27,530 --> 00:02:29,750
Just remember that I've taken care of that line of code.

42
00:02:31,620 --> 00:02:34,800
Next up, we're going to move over both of these event handlers.

43
00:02:35,900 --> 00:02:40,250
Whenever we move event handlers into a function like this, remember, we're going to declare them as

44
00:02:40,250 --> 00:02:42,500
functions inside the body of this function.

45
00:02:43,010 --> 00:02:45,260
So we cannot just cut and paste these.

46
00:02:46,140 --> 00:02:50,750
I can do that really quick thing and cut both them and paste them into our function component.

47
00:02:50,990 --> 00:02:52,610
We cannot just do that and leave it right there.

48
00:02:52,640 --> 00:02:57,920
We need to make sure that we adjust the syntax that it's properly syntax inside of a function.

49
00:02:58,830 --> 00:03:02,970
So to do so, all we will have to do in this case is make sure that we put in the Konsta keyword in

50
00:03:02,970 --> 00:03:05,310
front of both of those even handlers.

51
00:03:07,800 --> 00:03:11,670
Then inside those even handlers, I'm gonna make sure I update the code for both them.

52
00:03:12,420 --> 00:03:14,280
So in the case of en input change.

53
00:03:15,740 --> 00:03:17,600
We have a call inside there to set state.

54
00:03:18,020 --> 00:03:19,730
Well, of course, inside of a function component.

55
00:03:19,940 --> 00:03:25,280
We don't have any idea of this, let alone set state if we want to update state.

56
00:03:25,310 --> 00:03:30,080
We have to make use of the Seder that we got when we initialized a piece of state with the you state

57
00:03:30,080 --> 00:03:30,350
hook.

58
00:03:31,410 --> 00:03:34,940
So for on input change, we're going to delete that line inside of their.

59
00:03:35,920 --> 00:03:40,030
And replace it with set term event target.

60
00:03:46,600 --> 00:03:50,170
Next is our unformed simit, even handler, the inside of here.

61
00:03:50,200 --> 00:03:52,400
We still want to prevent default on the event.

62
00:03:53,140 --> 00:03:57,410
But now we are trying to call some prop function of unformed cement.

63
00:03:58,390 --> 00:04:01,240
Right away, you'll notice that we've got a little bit of a naming collision here.

64
00:04:01,600 --> 00:04:05,340
We need to receive a prop into this component called on form submit.

65
00:04:05,800 --> 00:04:07,030
So if we do that right away.

66
00:04:09,230 --> 00:04:14,480
Like, so we've now got a naming collision because we are receiving a prop called on form Simit.

67
00:04:14,900 --> 00:04:17,620
And we also are declaring a function called on foreign cement.

68
00:04:18,560 --> 00:04:21,680
We should probably change the name of this event handler right here.

69
00:04:21,740 --> 00:04:26,600
So it does not conflict with the name of the prop that is coming into our component, going to change

70
00:04:26,600 --> 00:04:30,110
the name of the event handler to on cement.

71
00:04:30,860 --> 00:04:32,930
Very simple, very straightforward little change.

72
00:04:35,520 --> 00:04:40,440
Then inside the body, that function, we can adjust the second line of code inside there.

73
00:04:40,890 --> 00:04:44,160
So, again, we don't have any idea of this inside of a function component.

74
00:04:44,580 --> 00:04:45,550
We should definitely remove it.

75
00:04:47,160 --> 00:04:51,630
Then I d structured out the on forms, submit function of the props object.

76
00:04:52,080 --> 00:04:54,270
We don't really need the reference to props right there.

77
00:04:54,330 --> 00:04:57,630
We can delete it and we are left with just on forms simit.

78
00:04:58,660 --> 00:05:04,210
Then finally, once again, no idea of this inside of a function component to get access to our term

79
00:05:04,210 --> 00:05:04,780
piece of state.

80
00:05:04,810 --> 00:05:11,140
We can simply refer to term that we will replace this dot state, dot term with just term.

81
00:05:13,210 --> 00:05:13,390
OK.

82
00:05:13,540 --> 00:05:17,260
Now, one last little change, we're going to go down to our render method.

83
00:05:19,380 --> 00:05:21,830
I'm going to cut the entire return block out of here.

84
00:05:22,370 --> 00:05:27,710
So from Rilly Return keyword all the way down to the closing parentheses of that J.S. X block.

85
00:05:28,280 --> 00:05:29,300
I'm going to cut all that.

86
00:05:31,840 --> 00:05:34,900
And then put it in at the very bottom of my function component.

87
00:05:35,420 --> 00:05:37,750
So here's the function component down the very bottom.

88
00:05:37,900 --> 00:05:39,850
I will paste in that return statement.

89
00:05:41,880 --> 00:05:46,080
Now, we will go through this J.S. X line by line and update all the different references inside of

90
00:05:46,080 --> 00:05:46,860
your accordingly.

91
00:05:48,170 --> 00:05:50,400
So looks like the very first one is the form element.

92
00:05:50,700 --> 00:05:56,670
We are providing an on cement prop so we change the name of that callback to simply on cement.

93
00:05:57,450 --> 00:06:03,150
We're going to take that function and provide it to that prop that will delete this dot on form submit

94
00:06:03,210 --> 00:06:05,070
and replace it with on cement.

95
00:06:08,070 --> 00:06:11,760
Next up at our input element, we are providing a value prop.

96
00:06:12,570 --> 00:06:14,720
There is no longer a this dot state dot term.

97
00:06:14,760 --> 00:06:16,950
There is only term by itself.

98
00:06:17,430 --> 00:06:18,230
Will update value.

99
00:06:19,820 --> 00:06:21,050
And then four on change.

100
00:06:21,320 --> 00:06:24,080
Remember, we just put together on input change right here.

101
00:06:25,790 --> 00:06:31,040
We'll provide a reference to that function by putting in just on input change.

102
00:06:33,440 --> 00:06:33,710
All right.

103
00:06:33,770 --> 00:06:34,310
So that's it.

104
00:06:35,370 --> 00:06:40,050
We just refactored from a class component to a function component by moving over all this code line

105
00:06:40,050 --> 00:06:40,530
by line.

106
00:06:41,190 --> 00:06:45,720
There's definitely one or two little three factors we could do inside of here just to improve the legibility

107
00:06:45,780 --> 00:06:47,580
of the search bar component function.

108
00:06:48,240 --> 00:06:54,270
For example, this Aulbach right here or this event handler of en input change is very, very short

109
00:06:54,780 --> 00:06:56,850
rather than declaring a separate function.

110
00:06:57,060 --> 00:07:04,320
We might decide to delete it and instead write that function in line or the on change handler of the

111
00:07:04,380 --> 00:07:06,000
input element.

112
00:07:06,690 --> 00:07:10,080
So if we wanted to do that, we'd put inside of your event.

113
00:07:11,370 --> 00:07:14,430
And then set term event target value.

114
00:07:15,340 --> 00:07:19,800
That is not strictly required, but it does help clean up our function component just a little bit and

115
00:07:19,800 --> 00:07:20,760
make it easier to read.

116
00:07:22,500 --> 00:07:28,370
So if you make that change again, you no longer need the on term change or on input change, whatever

117
00:07:28,370 --> 00:07:30,800
we had called it, event handler to cleared up your separately.

118
00:07:32,880 --> 00:07:36,660
All right, so now the last thing we're going to do is go down to the class component that no longer

119
00:07:36,660 --> 00:07:37,890
has any code inside of it.

120
00:07:38,430 --> 00:07:41,940
We can delete that thing entirely because we have completed our refactor.

121
00:07:43,880 --> 00:07:44,650
Let's save this.

122
00:07:45,520 --> 00:07:50,820
Go back over to our browser and we're just gonna make sure that everything works as expected still.

123
00:07:51,520 --> 00:07:53,830
So I'll do a search again for Forest.

124
00:07:54,760 --> 00:07:56,060
Yep, surge worked.

125
00:07:56,150 --> 00:07:58,310
I can still select a video and play it.

126
00:07:59,550 --> 00:08:00,790
Yes, that's one refactored down.

127
00:08:00,970 --> 00:08:05,560
Let's take a pause right here and then start to refactor our app component in just a moment as well.