1
00:00:01,080 --> 00:00:02,640
‫To finish this section,

2
00:00:02,640 --> 00:00:06,480
‫let's now create another custom hook called UseKey

3
00:00:06,480 --> 00:00:08,850
‫which will abstract the functionality

4
00:00:08,850 --> 00:00:13,503
‫of attaching and removing an event handler for a key press.

5
00:00:14,970 --> 00:00:17,610
‫So, here, in the movie details component,

6
00:00:17,610 --> 00:00:21,450
‫we have that functionality that if we open a movie

7
00:00:21,450 --> 00:00:25,260
‫and then hit the escape key on our keyboard,

8
00:00:25,260 --> 00:00:27,300
‫then it'll close the movie.

9
00:00:27,300 --> 00:00:32,300
‫And so, we implemented that using a use effect hook.

10
00:00:32,790 --> 00:00:34,800
‫So, this one right here.

11
00:00:34,800 --> 00:00:37,530
‫And so, since this is using a React hook,

12
00:00:37,530 --> 00:00:40,950
‫we can abstract this into its own custom hook

13
00:00:40,950 --> 00:00:43,740
‫because actually we do something very similar

14
00:00:43,740 --> 00:00:47,040
‫to focus here on the search bar.

15
00:00:47,040 --> 00:00:50,730
‫So, again, when I'm here and I hit the enter key,

16
00:00:50,730 --> 00:00:53,220
‫then that will automatically focus this.

17
00:00:53,220 --> 00:00:57,630
‫And so, that is using basically some similar functionality.

18
00:00:57,630 --> 00:01:00,870
‫And so, it's a good idea to abstract this functionality

19
00:01:00,870 --> 00:01:05,870
‫into a custom hook and then reuse that in both these places.

20
00:01:05,940 --> 00:01:08,040
‫So, let's copy this code here.

21
00:01:08,040 --> 00:01:09,660
‫So, just copy

22
00:01:09,660 --> 00:01:14,493
‫and then let's create another file for another custom hook.

23
00:01:15,330 --> 00:01:18,783
‫So, this one is called useKey.js.

24
00:01:19,710 --> 00:01:22,680
‫And by the way, I forgot to mention earlier

25
00:01:22,680 --> 00:01:27,300
‫that I actually also created a copy called app version 3

26
00:01:27,300 --> 00:01:30,990
‫before we started extracting all the custom hooks.

27
00:01:30,990 --> 00:01:33,270
‫So, basically that we can keep our code

28
00:01:33,270 --> 00:01:36,723
‫before those custom hooks were implemented.

29
00:01:38,100 --> 00:01:38,933
‫Okay.

30
00:01:38,933 --> 00:01:41,070
‫But anyway, let's now export

31
00:01:41,070 --> 00:01:44,313
‫the function called use key.

32
00:01:46,380 --> 00:01:48,900
‫Okay, then let's just paste this here

33
00:01:48,900 --> 00:01:53,883
‫and import use effect from React.

34
00:01:55,020 --> 00:01:56,100
‫Okay.

35
00:01:56,100 --> 00:01:57,837
‫And so, now, what do we actually need

36
00:01:57,837 --> 00:02:01,830
‫as inputs to this custom hook?

37
00:02:01,830 --> 00:02:05,010
‫Well, this one is actually the easiest one of all

38
00:02:05,010 --> 00:02:08,340
‫because this one doesn't need to return anything.

39
00:02:08,340 --> 00:02:11,610
‫And all we need is to know what should happen.

40
00:02:11,610 --> 00:02:14,670
‫So, basically we need a callback function here

41
00:02:14,670 --> 00:02:18,300
‫and we also need the user of this custom hook

42
00:02:18,300 --> 00:02:20,490
‫to tell us on which key

43
00:02:20,490 --> 00:02:23,283
‫the effect here should actually be executed.

44
00:02:24,150 --> 00:02:27,720
‫So, not the effect but the callback that they will pass in.

45
00:02:27,720 --> 00:02:29,193
‫So, we want the key,

46
00:02:30,390 --> 00:02:32,190
‫for example, in this case here,

47
00:02:32,190 --> 00:02:34,383
‫that would be the escape key.

48
00:02:35,910 --> 00:02:37,770
‫So, here, instead of escape,

49
00:02:37,770 --> 00:02:40,470
‫we will have just a key

50
00:02:40,470 --> 00:02:44,670
‫and then we want some callback for an action.

51
00:02:44,670 --> 00:02:46,500
‫So, just like this.

52
00:02:46,500 --> 00:02:51,060
‫And then instead of calling of course, on close movie,

53
00:02:51,060 --> 00:02:56,060
‫we just call the action that the user passed in.

54
00:02:56,250 --> 00:02:58,023
‫Then here we also need the key.

55
00:02:59,700 --> 00:03:03,862
‫And so, again, never lie to React about your dependencies,

56
00:03:03,862 --> 00:03:07,380
‫and always make sure to include every single variable

57
00:03:07,380 --> 00:03:10,860
‫that is used here into your effect.

58
00:03:10,860 --> 00:03:12,240
‫Now, okay.

59
00:03:12,240 --> 00:03:16,560
‫Now, here we just need one small fix, so to say

60
00:03:16,560 --> 00:03:19,920
‫because the user might pass in this key

61
00:03:19,920 --> 00:03:21,270
‫like in different formats.

62
00:03:21,270 --> 00:03:23,190
‫So, they might write,

63
00:03:23,190 --> 00:03:28,140
‫escape like this, or maybe all in lower case,

64
00:03:28,140 --> 00:03:31,980
‫or maybe by mistake they write like this.

65
00:03:31,980 --> 00:03:33,540
‫And so, what we should do here

66
00:03:33,540 --> 00:03:37,860
‫is to just transform this key that they pass in

67
00:03:37,860 --> 00:03:39,333
‫to lowercase,

68
00:03:41,460 --> 00:03:44,910
‫and then also, the code that we get

69
00:03:44,910 --> 00:03:48,480
‫from the event to lowercase as well

70
00:03:48,480 --> 00:03:51,090
‫so that we can then correctly compare them.

71
00:03:51,090 --> 00:03:53,400
‫And that's a pretty normal thing to do

72
00:03:53,400 --> 00:03:54,963
‫when we compare strings.

73
00:03:55,890 --> 00:04:00,480
‫And so, this showed at this point already be working.

74
00:04:00,480 --> 00:04:05,357
‫So, let's come back here and then let's use usekey.

75
00:04:07,740 --> 00:04:12,450
‫So, again, make sure that the file was correctly imported,

76
00:04:12,450 --> 00:04:14,340
‫and if it didn't, then go ahead

77
00:04:14,340 --> 00:04:18,183
‫and do this line of code yourself now.

78
00:04:20,430 --> 00:04:23,490
‫And so, here, we now need to pass in the key.

79
00:04:23,490 --> 00:04:27,213
‫So, that's in this case, the escape key.

80
00:04:28,140 --> 00:04:33,030
‫So, we want to replace this effect right here.

81
00:04:33,030 --> 00:04:34,830
‫And so, that's again the escape key

82
00:04:34,830 --> 00:04:39,830
‫and the action will be on close movie.

83
00:04:39,960 --> 00:04:42,060
‫So, this function right here

84
00:04:42,060 --> 00:04:43,680
‫with the difference that of course,

85
00:04:43,680 --> 00:04:46,260
‫now we do not call the function,

86
00:04:46,260 --> 00:04:49,620
‫but instead, we will allow React to call this function

87
00:04:49,620 --> 00:04:51,150
‫at a later point.

88
00:04:51,150 --> 00:04:54,100
‫So, basically when this event happens

89
00:04:54,960 --> 00:04:57,273
‫and the key is the escape key.

90
00:04:58,680 --> 00:05:02,013
‫So, this whole functionality is now inside that function.

91
00:05:03,660 --> 00:05:06,603
‫And so, just to make sure, let's reload.

92
00:05:09,030 --> 00:05:14,030
‫Let's open up some movie, hit the escape key and nice.

93
00:05:14,670 --> 00:05:17,850
‫So, our custom hook is working,

94
00:05:17,850 --> 00:05:20,580
‫and so let's now immediately reuse it

95
00:05:20,580 --> 00:05:23,013
‫in this search component.

96
00:05:24,960 --> 00:05:27,139
‫So, where is that?

97
00:05:27,139 --> 00:05:29,320
‫And of course, if I were

98
00:05:29,320 --> 00:05:31,890
‫writing this application for myself,

99
00:05:31,890 --> 00:05:36,240
‫I would've long divided this file into multiple components.

100
00:05:36,240 --> 00:05:37,530
‫So, this is the last one

101
00:05:37,530 --> 00:05:41,190
‫we will have one big file with everything.

102
00:05:41,190 --> 00:05:45,093
‫But anyway, let's now again, use usekey here.

103
00:05:46,350 --> 00:05:48,900
‫And so, this time, the key that we are looking for

104
00:05:48,900 --> 00:05:52,380
‫is the enter key like this.

105
00:05:52,380 --> 00:05:54,630
‫But now, as for the callback function,

106
00:05:54,630 --> 00:05:57,570
‫this is actually a little bit more tricky

107
00:05:57,570 --> 00:06:02,570
‫because watch at what we have here as the callback function.

108
00:06:02,640 --> 00:06:05,569
‫So, we have all this where this part here, of course

109
00:06:05,569 --> 00:06:09,300
‫is already in the custom hook.

110
00:06:09,300 --> 00:06:11,940
‫So, where it compares the press key

111
00:06:11,940 --> 00:06:14,430
‫with the key that we're interested in here.

112
00:06:14,430 --> 00:06:16,110
‫So, basically, this action here

113
00:06:16,110 --> 00:06:18,963
‫is corresponding to this part.

114
00:06:19,950 --> 00:06:24,693
‫So, we could pass in a callback function like this

115
00:06:26,070 --> 00:06:29,010
‫only with these two pieces

116
00:06:29,010 --> 00:06:32,400
‫but then we would miss out on this part.

117
00:06:32,400 --> 00:06:34,740
‫So, we also need to include that there.

118
00:06:34,740 --> 00:06:38,160
‫So, this would then be like cutting it from here

119
00:06:38,160 --> 00:06:39,870
‫and pasting it here,

120
00:06:39,870 --> 00:06:43,770
‫which would not alter the functionality of this code at all.

121
00:06:43,770 --> 00:06:46,530
‫And so, let's do the same thing here.

122
00:06:46,530 --> 00:06:48,570
‫So, basically, what we have here

123
00:06:48,570 --> 00:06:51,243
‫should now be just the callback function here.

124
00:06:54,090 --> 00:06:55,290
‫All right.

125
00:06:55,290 --> 00:06:59,223
‫And so, then we can get rid of all this year once again.

126
00:07:00,270 --> 00:07:01,740
‫And also of this comment,

127
00:07:01,740 --> 00:07:06,300
‫since we also have this in that other file that I stored.

128
00:07:06,300 --> 00:07:09,060
‫And so, let's see if this works again.

129
00:07:09,060 --> 00:07:11,190
‫So, hitting the enter key.

130
00:07:11,190 --> 00:07:14,913
‫And yes, that works just as well.

131
00:07:15,840 --> 00:07:17,430
‫So, here, the callback function.

132
00:07:17,430 --> 00:07:21,150
‫So, this action, as we called it in our hook

133
00:07:21,150 --> 00:07:23,280
‫is a little bit different.

134
00:07:23,280 --> 00:07:25,170
‫So, a bit longer than before.

135
00:07:25,170 --> 00:07:27,630
‫But all it does is to just describe

136
00:07:27,630 --> 00:07:30,963
‫what we want to happen when the enter key is pressed.

137
00:07:32,250 --> 00:07:33,083
‫Nice.

138
00:07:33,083 --> 00:07:36,660
‫So, with this, we finished this part about custom hooks

139
00:07:36,660 --> 00:07:40,020
‫and actually we finished this entire application.

140
00:07:40,020 --> 00:07:42,180
‫So, we are done with this app.

141
00:07:42,180 --> 00:07:46,770
‫Let's just see why there are some problems here.

142
00:07:46,770 --> 00:07:47,943
‫Let's reload that.

143
00:07:50,100 --> 00:07:50,933
‫Okay.

144
00:07:50,933 --> 00:07:53,250
‫So, that was from something else.

145
00:07:53,250 --> 00:07:56,505
‫But anyway, we finished now this application

146
00:07:56,505 --> 00:07:58,740
‫and this section as well.

147
00:07:58,740 --> 00:08:00,420
‫And so, just like always,

148
00:08:00,420 --> 00:08:01,800
‫all there's left to do

149
00:08:01,800 --> 00:08:03,750
‫is one more coding challenge

150
00:08:03,750 --> 00:08:06,090
‫where you will now practice to build

151
00:08:06,090 --> 00:08:08,670
‫your own custom hook on your own.

152
00:08:08,670 --> 00:08:10,590
‫So, don't skip that video

153
00:08:10,590 --> 00:08:12,510
‫because it's pretty important

154
00:08:12,510 --> 00:08:14,371
‫that you start getting into the habit

155
00:08:14,371 --> 00:08:16,653
‫of writing these hooks on your own.