1
00:00:01,450 --> 00:00:04,120
We've now identified our inputs and outputs to our hook.

2
00:00:04,210 --> 00:00:06,930
So let's go back over to our editor and start building out this customer.

3
00:00:08,050 --> 00:00:14,680
Our entire goal here is to extract all the videos related code into some reusable hook looking function.

4
00:00:15,610 --> 00:00:20,740
We're going to always place all of our custom hooks inside of a separate folder inside of our SIRC directory.

5
00:00:21,160 --> 00:00:25,060
So inside that SIRC folder, I'll make a new directory called Hooke's.

6
00:00:26,200 --> 00:00:30,450
And then inside, they're going to make a new file called Use Videos Dodgiest.

7
00:00:31,600 --> 00:00:36,100
This is not strictly required, but usually are custom hooks are going to have names that follow the

8
00:00:36,100 --> 00:00:38,710
convention set by the primitive hooks in react.

9
00:00:39,160 --> 00:00:41,680
So think of the terms you state and use effect.

10
00:00:42,010 --> 00:00:44,890
We will build our custom hooks and give them very similar names.

11
00:00:45,400 --> 00:00:50,920
So in this case, I'm giving this one a name of use videos because it's going to be a hook that is essentially

12
00:00:50,920 --> 00:00:53,920
about searching for and making use of a list of videos.

13
00:00:55,690 --> 00:01:00,490
Then inside of here, we're going to import all the different primitive hooks that we're going to probably

14
00:01:00,490 --> 00:01:02,240
need inside of our custom hook.

15
00:01:02,890 --> 00:01:05,350
So in our case, we probably are going to need.

16
00:01:07,160 --> 00:01:12,920
The use of fact primitive hook, Andy, use state primitive hook that the very top I will import.

17
00:01:12,980 --> 00:01:15,500
Use state and use effect.

18
00:01:18,180 --> 00:01:22,350
Are usable code is also going to have some stuff around searching for a list of videos.

19
00:01:22,420 --> 00:01:25,920
So I'm also going to import the YouTube API inside of here as well.

20
00:01:29,330 --> 00:01:31,160
We're then going to define a function.

21
00:01:35,920 --> 00:01:37,360
And export it at the bottom.

22
00:01:39,470 --> 00:01:43,240
So our goal is for our app component to be able to call this function.

23
00:01:44,050 --> 00:01:45,220
It's going to provide to it.

24
00:01:45,370 --> 00:01:46,540
Our list of inputs.

25
00:01:46,600 --> 00:01:49,420
And in our case, remember, our input is that default term.

26
00:01:50,110 --> 00:01:56,350
And it's going to return our list of outputs, which us is the list of videos and a function that can

27
00:01:56,350 --> 00:01:58,150
be used to search for videos.

28
00:01:59,210 --> 00:02:04,700
We're then going to import this function into our APT J as file and call that function from inside the

29
00:02:04,700 --> 00:02:06,230
body of our app component.

30
00:02:06,980 --> 00:02:12,290
So at this point, it pretty much turns it turns into just taking all the videos related code and cutting

31
00:02:12,350 --> 00:02:14,360
and pasting it over into our hook.

32
00:02:15,130 --> 00:02:20,390
So we're gonna find all the lines of code related to patching and maintaining that list of videos and

33
00:02:20,390 --> 00:02:24,080
just directly cut and paste them over to this Hoak function.

34
00:02:25,480 --> 00:02:26,200
So let's do this.

35
00:02:26,250 --> 00:02:26,880
Line by line.

36
00:02:27,810 --> 00:02:29,340
First off, you state right here.

37
00:02:29,760 --> 00:02:29,900
Yep.

38
00:02:29,940 --> 00:02:31,890
Without a doubt this is related to our hook.

39
00:02:32,040 --> 00:02:36,000
So we're going to cut it and put it into use videos at the very top.

40
00:02:38,100 --> 00:02:39,780
Next up, the U.S. fact function.

41
00:02:40,150 --> 00:02:42,690
Yep, definitely related to our hook and videos.

42
00:02:42,760 --> 00:02:43,620
So we're gonna cut that.

43
00:02:44,920 --> 00:02:47,350
And move it into our function.

44
00:02:49,730 --> 00:02:55,910
And then on turn simit, this really is the function that is related to searching for videos at present.

45
00:02:55,970 --> 00:02:58,850
It contains a line of code around the currently selected video.

46
00:02:59,540 --> 00:03:03,260
We're going to just cut that out and put it right there for just a moment.

47
00:03:03,930 --> 00:03:06,680
We're going to eventually come back and kind of reconcile this line of code.

48
00:03:06,890 --> 00:03:12,560
But right now, we're going to take just on term submit with just code inside of it related to searching

49
00:03:12,560 --> 00:03:13,490
for a list of videos.

50
00:03:14,330 --> 00:03:16,010
We're going to cut that entire thing.

51
00:03:17,010 --> 00:03:18,750
And then also move it over to our hook.

52
00:03:20,780 --> 00:03:25,660
It's we've now moved all the code related to managing this one resource into our custom hook.

53
00:03:26,210 --> 00:03:30,620
So we're now going to wire up our different inputs to this thing and the different outputs as well.

54
00:03:31,400 --> 00:03:35,960
Remember, in our case, our input was that default search term.

55
00:03:37,040 --> 00:03:42,410
Now, at present, having a hardcoded default search term of buildings works totally fine inside of

56
00:03:42,410 --> 00:03:43,070
our application.

57
00:03:43,610 --> 00:03:48,080
But remember, we are trying to build some reusable code here, and this reusable code might need to

58
00:03:48,080 --> 00:03:49,760
be used between different components.

59
00:03:50,330 --> 00:03:56,000
The app component might want to have a very different default search term than the analytics component.

60
00:03:56,360 --> 00:04:00,800
And that's why we're going to try to make this DPL search term a little bit more customizable.

61
00:04:00,920 --> 00:04:03,200
That's why I'm saying that it is technically an input.

62
00:04:03,680 --> 00:04:07,340
We don't really want to have it be a hardcoded string in the long term.

63
00:04:08,320 --> 00:04:14,070
So I'm going to assume that the default search term will be provided as an argument to use videos.

64
00:04:14,430 --> 00:04:18,540
So I'm going to provide an argument right here of default search term.

65
00:04:19,750 --> 00:04:25,150
We will then take that default search term and provide it to on term simit instead of the hardcoded

66
00:04:25,210 --> 00:04:25,780
buildings.

67
00:04:28,420 --> 00:04:28,620
OK.

68
00:04:29,170 --> 00:04:34,220
So we have now wired up our input, we're now going to make sure that we return all the outputs from

69
00:04:34,220 --> 00:04:41,090
our hook to our outputs are our list of videos and a function that can be used to search for a new list

70
00:04:41,090 --> 00:04:41,690
of videos.

71
00:04:42,350 --> 00:04:43,550
So the very bottom of our hook.

72
00:04:44,410 --> 00:04:50,500
We can return these two things in one of two ways, we can either follow the convention of you states,

73
00:04:50,550 --> 00:04:52,030
which is to return an array.

74
00:04:52,420 --> 00:04:56,360
No use state returns and a raid that has our piece of state and a setter inside of it.

75
00:04:56,830 --> 00:04:59,680
If we want to, we could follow that same convention instead of here.

76
00:04:59,950 --> 00:05:05,530
We could put in our list of videos and a function that can be used to change that list of videos, more

77
00:05:05,530 --> 00:05:06,190
or less.

78
00:05:06,370 --> 00:05:06,580
Right.

79
00:05:06,610 --> 00:05:09,310
This doesn't necessarily directly change list of videos.

80
00:05:09,310 --> 00:05:14,410
It is used to do a search, but more or less, it is a function that can be used to modify that data.

81
00:05:15,350 --> 00:05:20,450
So if we want to, we can follow the same convention as the you state hook or alternatively we can do

82
00:05:20,450 --> 00:05:23,150
what is a little bit more common in the JavaScript community.

83
00:05:23,540 --> 00:05:25,670
And that would be to return an object.

84
00:05:26,970 --> 00:05:29,730
That has properties of videos and on turn cement.

85
00:05:30,210 --> 00:05:31,290
This is totally up to you.

86
00:05:31,530 --> 00:05:34,530
There's no requirements in how you return values from a custom hook.

87
00:05:34,860 --> 00:05:39,450
You can either follow the convention of react, which is to return a raise that has stuff inside them.

88
00:05:39,810 --> 00:05:43,500
Or you can do the more common JavaScript convention, which is to return an object.

89
00:05:44,310 --> 00:05:48,600
In this case, I'm going to follow the REAC Convention, which is to return an array.

90
00:05:50,570 --> 00:05:54,080
Now, as I look at this code, the other thing I want to mention very quickly is that the name of this

91
00:05:54,080 --> 00:06:00,230
function on term simit, not the best name in the world on term Simit, made a lot of sense inside of

92
00:06:00,230 --> 00:06:03,320
our abdon jazz component because it was a callback that we wanted to run.

93
00:06:03,620 --> 00:06:05,030
Anytime a term was submitted.

94
00:06:05,540 --> 00:06:07,100
But now that we're looking at a custom hook.

95
00:06:07,490 --> 00:06:11,720
Well, I don't know on term simit, not quite as useful a function name.

96
00:06:12,410 --> 00:06:17,660
The one very small improvement we might make here would be to rename this function to simply search

97
00:06:18,150 --> 00:06:19,610
is that's what this function really does.

98
00:06:19,640 --> 00:06:21,620
It searches for a list of videos.

99
00:06:23,810 --> 00:06:24,010
OK.

100
00:06:24,080 --> 00:06:26,870
So believe it or not, that is our custom hook up.

101
00:06:26,900 --> 00:06:30,440
One last thing we do need to update that unturn summit to search as well.

102
00:06:31,160 --> 00:06:32,660
So this now is our custom hook.

103
00:06:32,870 --> 00:06:35,540
We can make use of use videos in any component.

104
00:06:36,010 --> 00:06:41,630
And as long as we provide a default search term, we will always get back a list of videos and a function

105
00:06:41,630 --> 00:06:44,030
that we can use to update that list of videos as well.

106
00:06:45,200 --> 00:06:46,100
We've built a custom home.

107
00:06:46,160 --> 00:06:50,780
We'll take a very brief pause and then wired this thing back up inside of our APT JS file in just a

108
00:06:50,780 --> 00:06:51,050
moment.