1
00:00:01,350 --> 00:00:03,150
Instructor: Our application is now looking pretty good.

2
00:00:03,150 --> 00:00:05,190
We can toggle around to different routes

3
00:00:05,190 --> 00:00:08,130
and we can flip our Boolean recording whether

4
00:00:08,130 --> 00:00:11,520
or not we are signed in from true to false very easily.

5
00:00:11,520 --> 00:00:12,960
So now it's time to actually start working

6
00:00:12,960 --> 00:00:15,000
on our higher order component.

7
00:00:15,000 --> 00:00:17,520
Remember, the goal of this higher order component

8
00:00:17,520 --> 00:00:20,250
that we're gonna make is to restrict access

9
00:00:20,250 --> 00:00:23,580
to the post route if the user is not signed in.

10
00:00:23,580 --> 00:00:26,250
So if the user's not signed in and the user tries to go

11
00:00:26,250 --> 00:00:28,200
to this route, we're gonna redirect them back

12
00:00:28,200 --> 00:00:30,483
over to the home route automatically.

13
00:00:31,650 --> 00:00:33,630
Now to build this first higher order component,

14
00:00:33,630 --> 00:00:35,366
I put together a series of steps

15
00:00:35,366 --> 00:00:37,530
and these steps are gonna be reusable,

16
00:00:37,530 --> 00:00:40,440
so you can use these to build a higher order component

17
00:00:40,440 --> 00:00:43,620
on your own project at some point in the future as well.

18
00:00:43,620 --> 00:00:46,140
So let's take a look at these steps.

19
00:00:46,140 --> 00:00:47,220
Four steps in total,

20
00:00:47,220 --> 00:00:49,470
we're gonna start up here at the very top.

21
00:00:49,470 --> 00:00:51,150
So the first thing we're going to do to build

22
00:00:51,150 --> 00:00:54,090
our higher order component is take all the logic

23
00:00:54,090 --> 00:00:57,480
that we want to make reusable inside of our application

24
00:00:57,480 --> 00:01:01,290
and write it all into an existing component.

25
00:01:01,290 --> 00:01:03,210
So for you and me, we're trying to make a higher

26
00:01:03,210 --> 00:01:05,910
order component that limits the user's ability

27
00:01:05,910 --> 00:01:08,790
to access different routes inside of our application.

28
00:01:08,790 --> 00:01:11,800
So you and I are going to open up our post,

29
00:01:11,800 --> 00:01:13,020
what is it called?

30
00:01:13,020 --> 00:01:14,430
Our comment box component.

31
00:01:14,430 --> 00:01:15,263
That's it.

32
00:01:15,263 --> 00:01:17,130
We're gonna open up our comment box component

33
00:01:17,130 --> 00:01:20,280
and we're gonna add some logic to that thing to say

34
00:01:20,280 --> 00:01:22,590
if the user is not logged in, get outta here.

35
00:01:22,590 --> 00:01:24,810
You're gonna go back to the homepage.

36
00:01:24,810 --> 00:01:25,740
So that's step one.

37
00:01:25,740 --> 00:01:27,120
We're gonna put that reusable logic

38
00:01:27,120 --> 00:01:29,883
into an existing component inside of our application.

39
00:01:31,650 --> 00:01:34,410
In step two, we're gonna create the actual higher

40
00:01:34,410 --> 00:01:36,540
order component file itself.

41
00:01:36,540 --> 00:01:39,270
And inside that file we're going to add something

42
00:01:39,270 --> 00:01:42,570
called the higher order component scaffold.

43
00:01:42,570 --> 00:01:45,060
Now we'll talk about what that scaffold is, but essentially

44
00:01:45,060 --> 00:01:48,060
it's just some boiler plate code that you're going to see

45
00:01:48,060 --> 00:01:51,273
in just about every single higher order component out there.

46
00:01:52,650 --> 00:01:54,690
In step three, we're going to essentially

47
00:01:54,690 --> 00:01:56,610
merge together steps one and two.

48
00:01:56,610 --> 00:01:59,460
So in step three, we're gonna take all that reusable logic

49
00:01:59,460 --> 00:02:02,790
that we wrote in step one out of our original component

50
00:02:02,790 --> 00:02:05,540
and add it to the new file that we created in step two.

51
00:02:06,420 --> 00:02:07,950
And then in step four, and we'll talk

52
00:02:07,950 --> 00:02:09,600
about this step in great detail.

53
00:02:09,600 --> 00:02:12,060
Essentially we're gonna add a little bit of configuration

54
00:02:12,060 --> 00:02:14,730
to our child component and we'll go into great detail

55
00:02:14,730 --> 00:02:17,160
about exactly what that means.

56
00:02:17,160 --> 00:02:19,140
So that's our four step process.

57
00:02:19,140 --> 00:02:21,720
We're gonna get started right now with step number one.

58
00:02:21,720 --> 00:02:23,940
So we're gonna open up our comment box component

59
00:02:23,940 --> 00:02:26,040
and we're gonna add some logic to it to say

60
00:02:26,040 --> 00:02:28,650
if the user is not signed in, they need to get away

61
00:02:28,650 --> 00:02:31,530
from that page and go back to our root route.

62
00:02:31,530 --> 00:02:34,150
So I'll get started by opening up my code editor

63
00:02:35,520 --> 00:02:38,070
and I'll find my comment box component inside

64
00:02:38,070 --> 00:02:39,783
of my components directory.

65
00:02:40,950 --> 00:02:43,710
So inside of here to check to see if the user is signed in,

66
00:02:43,710 --> 00:02:47,790
we need to get access to our off piece of Redux State.

67
00:02:47,790 --> 00:02:49,230
We've already hooked up this component

68
00:02:49,230 --> 00:02:51,150
with connect to our Redux store,

69
00:02:51,150 --> 00:02:52,770
so all we have to do is down at the bottom,

70
00:02:52,770 --> 00:02:55,500
define a map state to props.

71
00:02:55,500 --> 00:02:56,950
So I'll go down to the bottom

72
00:02:58,080 --> 00:03:01,713
and I'll define my map state to props function.

73
00:03:04,830 --> 00:03:07,770
So inside of here we're gonna return a simple object

74
00:03:07,770 --> 00:03:09,180
with an auth property,

75
00:03:09,180 --> 00:03:12,453
and that's gonna come from state.auth.

76
00:03:13,560 --> 00:03:16,920
So just as we did back inside of our app component,

77
00:03:16,920 --> 00:03:18,810
we'll then take that map state to props

78
00:03:18,810 --> 00:03:20,970
and add it as the first argument to connect

79
00:03:20,970 --> 00:03:25,050
and so that will override our current null argument here.

80
00:03:25,050 --> 00:03:27,933
So mapStateToProps, like so.

81
00:03:29,910 --> 00:03:32,640
Now inside of the component itself,

82
00:03:32,640 --> 00:03:33,630
we're gonna check to see

83
00:03:33,630 --> 00:03:37,860
if the user is logged in anytime this component first mounts

84
00:03:37,860 --> 00:03:39,750
or first gets rendered to the screen,

85
00:03:39,750 --> 00:03:43,053
or anytime this component gets a new set of props.

86
00:03:44,040 --> 00:03:46,260
So to handle both those cases, the case

87
00:03:46,260 --> 00:03:48,090
in which the component just got mounted

88
00:03:48,090 --> 00:03:50,160
or just got rendered to the screen and the case

89
00:03:50,160 --> 00:03:53,130
in which it just got a new set of props from its parent,

90
00:03:53,130 --> 00:03:56,730
we're going to define two different lifecycle methods.

91
00:03:56,730 --> 00:03:58,290
So inside the component itself

92
00:03:58,290 --> 00:04:02,586
I'm gonna add a componentDidMount lifecycle method.

93
00:04:02,586 --> 00:04:06,120
So componentDidMount, this is gonna handle a case

94
00:04:06,120 --> 00:04:10,053
in which our component just got rendered.

95
00:04:11,940 --> 00:04:13,380
So inside of here we're gonna look

96
00:04:13,380 --> 00:04:14,970
at our current props subject,

97
00:04:14,970 --> 00:04:17,670
or more specifically that auth property.

98
00:04:17,670 --> 00:04:19,709
And we're gonna say if the user is not logged in,

99
00:04:19,709 --> 00:04:21,720
we're gonna navigate them away.

100
00:04:21,720 --> 00:04:24,030
And then we're gonna do that same exact thing

101
00:04:24,030 --> 00:04:29,030
inside of our componentDidUpdate lifecycle method as well.

102
00:04:30,210 --> 00:04:32,850
Component did update is another lifecycle method

103
00:04:32,850 --> 00:04:36,030
that gets called anytime our component box component

104
00:04:36,030 --> 00:04:38,310
receives a new set of props.

105
00:04:38,310 --> 00:04:40,590
And so I'll just add a comment on here really quickly.

106
00:04:40,590 --> 00:04:43,860
Our component just got updated.

107
00:04:43,860 --> 00:04:47,100
That's not the best comment, but I think you get the idea.

108
00:04:47,100 --> 00:04:48,090
So in both these cases,

109
00:04:48,090 --> 00:04:51,330
we're going to execute essentially identical logic.

110
00:04:51,330 --> 00:04:53,370
We want to look at our current set of props,

111
00:04:53,370 --> 00:04:55,140
we wanna look at that off property

112
00:04:55,140 --> 00:04:58,380
and if the user is not logged in, navigate them away.

113
00:04:58,380 --> 00:05:01,230
So since both these lifecycle methods right here

114
00:05:01,230 --> 00:05:04,650
are essentially going to execute the same exact logic,

115
00:05:04,650 --> 00:05:06,171
let's make a helper method

116
00:05:06,171 --> 00:05:07,860
and inside that helper method

117
00:05:07,860 --> 00:05:10,740
we'll put all this kind of authentication stuff,

118
00:05:10,740 --> 00:05:12,480
and then we can call that helper method from

119
00:05:12,480 --> 00:05:15,930
both componentDidMount and componentDidUpdate.

120
00:05:15,930 --> 00:05:18,730
So I'm gonna make a helper method called something like,

121
00:05:20,244 --> 00:05:21,827
shouldNavigateAway.

122
00:05:23,100 --> 00:05:24,780
We're gonna rename this very shortly,

123
00:05:24,780 --> 00:05:27,300
so we'll get a better name than that pretty soon.

124
00:05:27,300 --> 00:05:29,190
And then inside of here we're gonna say

125
00:05:29,190 --> 00:05:32,190
if the user is not logged in,

126
00:05:32,190 --> 00:05:34,383
so if not this.props.auth,

127
00:05:36,030 --> 00:05:38,130
we're gonna put a console log in here for right now

128
00:05:38,130 --> 00:05:42,693
and simply say, I need to leave, like so.

129
00:05:45,810 --> 00:05:48,926
Now when I saved, my code formatter kicked in

130
00:05:48,926 --> 00:05:49,759
and collapsed these lifecycle methods.

131
00:05:49,759 --> 00:05:50,910
That's why you saw this stuff jump.

132
00:05:50,910 --> 00:05:52,530
I'm gonna undo that really quickly.

133
00:05:52,530 --> 00:05:54,660
Now inside both these lifecycle methods,

134
00:05:54,660 --> 00:05:57,960
we're gonna call this new helper of, shouldNavigateAway.

135
00:05:57,960 --> 00:05:59,280
So inside of ComponentDidMount,

136
00:05:59,280 --> 00:06:01,500
I'll call this dot, oops.

137
00:06:01,500 --> 00:06:03,970
This.shouldNavigateAway

138
00:06:06,000 --> 00:06:07,410
and I'll do the same thing inside

139
00:06:07,410 --> 00:06:09,840
of ComponentDidUpdate as well.

140
00:06:09,840 --> 00:06:11,787
This.shouldNavigateAway.

141
00:06:13,650 --> 00:06:15,450
All right, so let's take a quick pause right here.

142
00:06:15,450 --> 00:06:16,980
We're gonna come back in the next section

143
00:06:16,980 --> 00:06:18,480
and we're gonna test this code out

144
00:06:18,480 --> 00:06:20,790
and make sure that it works the way we expect

145
00:06:20,790 --> 00:06:23,400
and detects whether or not the user is not signed

146
00:06:23,400 --> 00:06:26,550
in when they are looking at our comment box component.

147
00:06:26,550 --> 00:06:29,000
So quick break and I'll see you in just a minute.