1
00:00:01,050 --> 00:00:01,883
Instructor: In the last section,

2
00:00:01,883 --> 00:00:02,940
we finished up step one

3
00:00:02,940 --> 00:00:05,190
of creating a higher order component.

4
00:00:05,190 --> 00:00:06,870
So we've now written all of the logic

5
00:00:06,870 --> 00:00:10,050
that we want to be reusable into our CommentBox.

6
00:00:10,050 --> 00:00:10,883
Just to be clear,

7
00:00:10,883 --> 00:00:13,710
I wanna point out the code that we want to be reusable.

8
00:00:13,710 --> 00:00:14,880
So inside of CommentBox,

9
00:00:14,880 --> 00:00:19,140
we have componentDidMount, DidUpdate, shouldNavigateAway

10
00:00:19,140 --> 00:00:22,980
and we also have at the bottom mapStateToProps.

11
00:00:22,980 --> 00:00:25,320
Those four chunks of code are the pieces of code

12
00:00:25,320 --> 00:00:27,690
that we need to enforce a restriction

13
00:00:27,690 --> 00:00:29,070
around a user's ability

14
00:00:29,070 --> 00:00:31,290
to access different components inside of our app

15
00:00:31,290 --> 00:00:32,643
if they're not logged in.

16
00:00:33,480 --> 00:00:37,080
So if we have any other component inside of our application

17
00:00:37,080 --> 00:00:39,000
that a user should not be able to access

18
00:00:39,000 --> 00:00:40,260
if they're not logged in.

19
00:00:40,260 --> 00:00:43,770
Right now, we would have to copy paste all this stuff

20
00:00:43,770 --> 00:00:46,050
over to those other components.

21
00:00:46,050 --> 00:00:48,810
Now obviously we don't like to copy paste code around,

22
00:00:48,810 --> 00:00:50,730
we like to make abstractions

23
00:00:50,730 --> 00:00:53,010
and create reusable code wherever possible.

24
00:00:53,010 --> 00:00:55,497
So that's why we're gonna create our higher order component

25
00:00:55,497 --> 00:00:58,743
and so we don't have to copy paste this stuff around.

26
00:01:00,420 --> 00:01:02,520
All right, so I'm gonna flip back over to our diagram.

27
00:01:02,520 --> 00:01:03,930
So we're all done with step number one.

28
00:01:03,930 --> 00:01:05,910
We're now gonna move on to step number two.

29
00:01:05,910 --> 00:01:08,070
So in step number two, we're gonna create a file

30
00:01:08,070 --> 00:01:09,960
to house our higher order component

31
00:01:09,960 --> 00:01:12,960
and we're gonna add some boiler plate code to that.

32
00:01:12,960 --> 00:01:15,420
So I'm gonna flip back over to my code editor

33
00:01:15,420 --> 00:01:17,130
and inside my components directory,

34
00:01:17,130 --> 00:01:22,130
I'm gonna make a new file called requireAuth.js.

35
00:01:23,250 --> 00:01:24,180
Now really quickly here,

36
00:01:24,180 --> 00:01:27,750
you'll notice that I am calling the file with a lowercase r

37
00:01:27,750 --> 00:01:30,450
or I'm naming it with a lowercase leading character

38
00:01:30,450 --> 00:01:31,500
and that's very different

39
00:01:31,500 --> 00:01:33,660
from all the other component files I've created

40
00:01:33,660 --> 00:01:36,990
that have leading capital characters.

41
00:01:36,990 --> 00:01:39,240
So the idea here is that this is a convention

42
00:01:39,240 --> 00:01:40,980
for naming files.

43
00:01:40,980 --> 00:01:42,780
Whenever we use a lowercase r

44
00:01:42,780 --> 00:01:45,330
that indicates that the file is going to export

45
00:01:45,330 --> 00:01:47,490
by default a function,

46
00:01:47,490 --> 00:01:48,810
whereas with any file

47
00:01:48,810 --> 00:01:51,390
where we are naming it with a uppercase character

48
00:01:51,390 --> 00:01:54,630
that means we are exporting by default a class.

49
00:01:54,630 --> 00:01:56,760
Personally, I think it's a silly convention

50
00:01:56,760 --> 00:01:58,233
but that's what it is.

51
00:01:59,310 --> 00:02:00,900
So I'm gonna create this file

52
00:02:00,900 --> 00:02:02,670
and then we're gonna add our boiler plate

53
00:02:02,670 --> 00:02:04,983
or our scaffold code to this thing.

54
00:02:05,970 --> 00:02:07,860
There's gonna be some interesting code in here,

55
00:02:07,860 --> 00:02:09,180
some kind of strange stuff.

56
00:02:09,180 --> 00:02:10,620
So we're just gonna write our code out

57
00:02:10,620 --> 00:02:13,200
and then we'll talk about exactly what it's doing.

58
00:02:13,200 --> 00:02:16,590
I'll get started at the very top by importing React

59
00:02:16,590 --> 00:02:20,710
and the component base class from React

60
00:02:21,900 --> 00:02:22,950
and then I will create

61
00:02:22,950 --> 00:02:27,663
and export an arrow function, like so.

62
00:02:29,490 --> 00:02:30,960
The arrow function is gonna be called

63
00:02:30,960 --> 00:02:32,430
with a single argument,

64
00:02:32,430 --> 00:02:33,750
and we're gonna refer to this argument

65
00:02:33,750 --> 00:02:35,663
as the ChildComponent.

66
00:02:37,136 --> 00:02:38,280
All right, so at this point,

67
00:02:38,280 --> 00:02:40,710
everything might look kind of reasonable, right?

68
00:02:40,710 --> 00:02:44,310
We got an import statement, an export, an arrow function

69
00:02:44,310 --> 00:02:47,070
and even though this argument name is a little bit weird,

70
00:02:47,070 --> 00:02:48,480
whatever, it's an argument.

71
00:02:48,480 --> 00:02:51,570
So here's where things start to get a little bit strange.

72
00:02:51,570 --> 00:02:53,010
Inside the body of this function,

73
00:02:53,010 --> 00:02:55,590
I'm gonna define a new class

74
00:02:55,590 --> 00:02:57,460
with the name of ComposedComponent

75
00:02:59,160 --> 00:03:03,120
and that's going to extend my component based class.

76
00:03:03,120 --> 00:03:05,733
So component right here is coming from React.

77
00:03:07,260 --> 00:03:09,700
Inside this thing, I'm gonna add a render method

78
00:03:11,100 --> 00:03:14,133
that's going to return the ChildComponent.

79
00:03:16,080 --> 00:03:17,550
So I want you to notice right now,

80
00:03:17,550 --> 00:03:18,930
ChildComponent right here

81
00:03:18,930 --> 00:03:21,930
is the argument that got passed into the function.

82
00:03:21,930 --> 00:03:23,630
So ChildComponent, ChildComponent.

83
00:03:24,750 --> 00:03:27,690
Then outside the class, but still inside the function,

84
00:03:27,690 --> 00:03:30,600
I'm going to return the class we just created.

85
00:03:30,600 --> 00:03:35,600
So I will return ComposedComponent like so.

86
00:03:35,610 --> 00:03:37,950
All right, so this right here, this is the scaffold,

87
00:03:37,950 --> 00:03:39,330
this is the boiler plate.

88
00:03:39,330 --> 00:03:40,950
This is the starting code

89
00:03:40,950 --> 00:03:44,280
for creating a ton of different higher order components.

90
00:03:44,280 --> 00:03:46,680
Now, there is one slightly different way

91
00:03:46,680 --> 00:03:48,630
of writing out a higher order component,

92
00:03:48,630 --> 00:03:49,920
and the slightly different way

93
00:03:49,920 --> 00:03:52,320
is what that connect function uses

94
00:03:52,320 --> 00:03:54,360
but either way is totally appropriate.

95
00:03:54,360 --> 00:03:55,193
Just want you to know

96
00:03:55,193 --> 00:03:57,120
that if you go look at other higher order components,

97
00:03:57,120 --> 00:03:58,110
you might sometimes see

98
00:03:58,110 --> 00:04:01,920
a slightly different function signature up here at the top.

99
00:04:01,920 --> 00:04:03,210
Okay, so now that we got the code down,

100
00:04:03,210 --> 00:04:05,970
let's talk about what's going on with this.

101
00:04:05,970 --> 00:04:07,680
So the easiest way to give you a better idea

102
00:04:07,680 --> 00:04:09,780
of what's happening is to write out a little example

103
00:04:09,780 --> 00:04:11,330
at the bottom of the file here.

104
00:04:12,210 --> 00:04:15,750
So I want you to imagine for a second that we take this file

105
00:04:15,750 --> 00:04:19,649
and we import it into our CommentBox file.

106
00:04:19,649 --> 00:04:21,120
So the CommentBox file over there.

107
00:04:21,120 --> 00:04:26,120
So we're going to imagine we are in CommentBox.js.

108
00:04:26,520 --> 00:04:28,860
So we can imagine that inside that file,

109
00:04:28,860 --> 00:04:32,310
we might import the requireAuth higher order component.

110
00:04:32,310 --> 00:04:37,293
So I will import requireAuth from components/requireAuth.

111
00:04:38,790 --> 00:04:41,820
We'll then define that CommentBox

112
00:04:41,820 --> 00:04:45,060
and you know everything that goes on inside of it,

113
00:04:45,060 --> 00:04:46,680
and then here's the interesting part.

114
00:04:46,680 --> 00:04:48,150
At the bottom right now,

115
00:04:48,150 --> 00:04:52,920
we are doing our export default of CommentBox.

116
00:04:52,920 --> 00:04:54,570
I know the connect helper's in there as well

117
00:04:54,570 --> 00:04:57,150
but we'll just forget about that for a second.

118
00:04:57,150 --> 00:05:00,990
So in order to make use of this higher order component,

119
00:05:00,990 --> 00:05:03,290
we're going to take the higher order component

120
00:05:06,060 --> 00:05:08,283
and call the CommentBox with it.

121
00:05:09,690 --> 00:05:10,710
So this is an example

122
00:05:10,710 --> 00:05:13,020
of our higher order component and use right here.

123
00:05:13,020 --> 00:05:15,990
So let's talk about what this really achieves,

124
00:05:15,990 --> 00:05:17,460
what this code right here achieves

125
00:05:17,460 --> 00:05:19,890
along with this code right here.

126
00:05:19,890 --> 00:05:21,120
So the first thing to understand

127
00:05:21,120 --> 00:05:23,730
is that this import statement right here of requireAuth,

128
00:05:23,730 --> 00:05:25,560
this right here is a function.

129
00:05:25,560 --> 00:05:27,780
That's what we're exporting from this file.

130
00:05:27,780 --> 00:05:30,243
Here's the function, we are exporting a function.

131
00:05:31,260 --> 00:05:33,660
So then down at the bottom of CommentBox,

132
00:05:33,660 --> 00:05:37,410
we call that function with the CommentBox class.

133
00:05:37,410 --> 00:05:40,080
The CommentBox class that has its own functionality,

134
00:05:40,080 --> 00:05:42,840
its own methods, all that kinda good stuff.

135
00:05:42,840 --> 00:05:45,510
So we can kind of imagine that CommentBox right here

136
00:05:45,510 --> 00:05:48,873
shows up inside of this function as ChildComponent.

137
00:05:49,944 --> 00:05:51,090
So ChildComponent right here

138
00:05:51,090 --> 00:05:54,120
we can kind of imagine is CommentBox.

139
00:05:54,120 --> 00:05:56,910
I'm just gonna temporarily rename this.

140
00:05:56,910 --> 00:05:59,010
I really encourage you not to rename yours,

141
00:05:59,010 --> 00:06:00,750
just watch for a second.

142
00:06:00,750 --> 00:06:01,680
So we can kind of imagine

143
00:06:01,680 --> 00:06:04,410
that the argument shows up being that CommentBox

144
00:06:04,410 --> 00:06:05,460
and now inside of render,

145
00:06:05,460 --> 00:06:08,223
we'll rename that argument as well to CommentBox.

146
00:06:09,090 --> 00:06:10,260
So what do we have now?

147
00:06:10,260 --> 00:06:13,890
We now have our function being invoked right here.

148
00:06:13,890 --> 00:06:16,860
So we create a new class called ComposedComponent.

149
00:06:16,860 --> 00:06:21,840
All ComposedComponent does is render our CommentBox

150
00:06:21,840 --> 00:06:24,483
and then we return that ComposedComponent class.

151
00:06:25,890 --> 00:06:30,000
So now if someone imported the CommentBox file,

152
00:06:30,000 --> 00:06:32,550
so remember this right here is our imaginary CommentBox.

153
00:06:32,550 --> 00:06:36,750
If we are now imagine, we are in App.js,

154
00:06:36,750 --> 00:06:41,750
we might import CommentBox from components/Commentbox

155
00:06:43,980 --> 00:06:46,470
and what do we get when we do that import?

156
00:06:46,470 --> 00:06:47,940
This import right here.

157
00:06:47,940 --> 00:06:50,700
This variable is going to be the result

158
00:06:50,700 --> 00:06:54,240
of requireAuth with CommentBox.

159
00:06:54,240 --> 00:06:58,380
So when we import CommentBox into our App.js file,

160
00:06:58,380 --> 00:07:02,040
we're not just getting our CommentBox class,

161
00:07:02,040 --> 00:07:05,490
we're getting this composed class right here.

162
00:07:05,490 --> 00:07:09,330
That renders eventually the CommentBox component.

163
00:07:09,330 --> 00:07:10,230
So you can kind of imagine

164
00:07:10,230 --> 00:07:12,390
that this entire system right here

165
00:07:12,390 --> 00:07:13,380
really matches up

166
00:07:13,380 --> 00:07:15,420
with a diagram that we were looking at before

167
00:07:15,420 --> 00:07:18,270
that represented our connect function.

168
00:07:18,270 --> 00:07:20,580
So back over here, I put this little box right here

169
00:07:20,580 --> 00:07:23,640
to represent the connect higher order component.

170
00:07:23,640 --> 00:07:25,860
What these higher order components really do

171
00:07:25,860 --> 00:07:28,890
is kind of wrap or inject themselves

172
00:07:28,890 --> 00:07:31,533
right above the component that we're using them on.

173
00:07:32,370 --> 00:07:34,410
So when we import our CommentBox

174
00:07:34,410 --> 00:07:37,350
as it stands right now into the app,

175
00:07:37,350 --> 00:07:40,800
we are technically importing in that connect component

176
00:07:40,800 --> 00:07:42,960
or the connect higher order component

177
00:07:42,960 --> 00:07:47,280
and that thing inside of it wraps the CommentBox.

178
00:07:47,280 --> 00:07:48,570
So that's exactly what's going on

179
00:07:48,570 --> 00:07:49,970
with this example over here.

180
00:07:51,150 --> 00:07:53,370
If we imagine right here that we import

181
00:07:53,370 --> 00:07:57,240
inside of our App.js file, the CommentBox from CommentBox,

182
00:07:57,240 --> 00:08:00,420
we are getting the result of calling CommentBox

183
00:08:00,420 --> 00:08:02,696
or excuse me, of recalling requireAuth

184
00:08:02,696 --> 00:08:04,560
with the CommentBox component

185
00:08:04,560 --> 00:08:07,320
and that is going to be this right here,

186
00:08:07,320 --> 00:08:08,910
the ComposedComponent class

187
00:08:08,910 --> 00:08:11,610
with our CommentBox inside of it.

188
00:08:11,610 --> 00:08:13,890
So all I'm trying to communicate to you right now

189
00:08:13,890 --> 00:08:16,440
is that by creating this higher order component

190
00:08:16,440 --> 00:08:18,600
and wiring it up inside of our application,

191
00:08:18,600 --> 00:08:21,720
all we're doing with the code as it stands right now

192
00:08:21,720 --> 00:08:25,800
is injecting this extra component into our hierarchy.

193
00:08:25,800 --> 00:08:27,720
That's all that's happening right now.

194
00:08:27,720 --> 00:08:30,600
There's no code reuse, nothing fancy besides that.

195
00:08:30,600 --> 00:08:33,962
All we're doing is injecting another component in there.

196
00:08:34,919 --> 00:08:37,260
Now the trick behind the higher order components

197
00:08:37,260 --> 00:08:40,860
is that now that we have injected this component here,

198
00:08:40,860 --> 00:08:44,430
we can add some reusable functionality to it.

199
00:08:44,430 --> 00:08:46,740
So we're gonna add all of our reusable functionality

200
00:08:46,740 --> 00:08:49,950
to that higher order component, which is now kind of serving

201
00:08:49,950 --> 00:08:54,360
as like a little fake parent to our CommentBox.

202
00:08:54,360 --> 00:08:57,540
So that's what's gonna go on inside of our next step.

203
00:08:57,540 --> 00:08:58,500
Step number three,

204
00:08:58,500 --> 00:09:00,870
we're gonna move all that reusable logic

205
00:09:00,870 --> 00:09:03,060
into our higher order component.

206
00:09:03,060 --> 00:09:05,910
So in other words, we're gonna add all the reusable logic

207
00:09:05,910 --> 00:09:07,950
to this ComposedComponent

208
00:09:07,950 --> 00:09:10,710
and so the ComposedComponent right here is going to know

209
00:09:10,710 --> 00:09:13,560
about whether or not it should try to redirect the user.

210
00:09:13,560 --> 00:09:16,620
It's gonna know how to look at our state object

211
00:09:16,620 --> 00:09:17,910
and pull out that Auth property,

212
00:09:17,910 --> 00:09:21,780
and it's going to know how to access that history prop

213
00:09:21,780 --> 00:09:24,153
and forceably navigate our user around.

214
00:09:25,110 --> 00:09:26,876
All right, so that's my big spiel.

215
00:09:26,876 --> 00:09:29,700
That's basically in a nutshell

216
00:09:29,700 --> 00:09:31,770
what's going on with these higher order components.

217
00:09:31,770 --> 00:09:32,910
So I'm sure that at this point

218
00:09:32,910 --> 00:09:36,450
some stuff is still very unclear which is totally fine.

219
00:09:36,450 --> 00:09:38,970
So what we're gonna do is take a quick break right now

220
00:09:38,970 --> 00:09:41,160
and we're gonna move on to step number three

221
00:09:41,160 --> 00:09:43,230
where we move all this reusable logic

222
00:09:43,230 --> 00:09:45,210
over to the higher order component

223
00:09:45,210 --> 00:09:46,110
and at that point in time,

224
00:09:46,110 --> 00:09:48,960
I think this is going to start to really click.

225
00:09:48,960 --> 00:09:50,160
All right, now the last thing I'm gonna do

226
00:09:50,160 --> 00:09:51,990
is a little bit of cleanup inside this file.

227
00:09:51,990 --> 00:09:54,690
Like I said, this was all just very temporary stuff

228
00:09:54,690 --> 00:09:57,600
that I wanted to put in just to make a point.

229
00:09:57,600 --> 00:09:59,340
All right, there we go.

230
00:09:59,340 --> 00:10:00,660
So let's take a pause right here.

231
00:10:00,660 --> 00:10:01,860
We'll come back to the next section

232
00:10:01,860 --> 00:10:04,440
and we're going to move on to step number three.

233
00:10:04,440 --> 00:10:06,090
So I'll see you in just a minute.