1
00:00:00,600 --> 00:00:01,859
Instructor: Our Higher-Order Component

2
00:00:01,859 --> 00:00:05,160
now knows whether or not the user is currently logged in.

3
00:00:05,160 --> 00:00:08,280
We achieve this by connecting our Higher-Order Component

4
00:00:08,280 --> 00:00:10,770
with the connect helper from React Redux.

5
00:00:10,770 --> 00:00:13,020
And then we were able to console.log

6
00:00:13,020 --> 00:00:15,000
whether or not the user was currently signed in

7
00:00:15,000 --> 00:00:16,500
to our application.

8
00:00:16,500 --> 00:00:18,810
And by clicking on our sign in and sign out button,

9
00:00:18,810 --> 00:00:21,120
we saw this console.log flip from true to false

10
00:00:21,120 --> 00:00:23,010
and true to false back and forth.

11
00:00:23,010 --> 00:00:24,810
So this really solves problem number one,

12
00:00:24,810 --> 00:00:27,480
figuring out whether or not the user is currently logged in

13
00:00:27,480 --> 00:00:29,670
within our Higher-Order Component.

14
00:00:29,670 --> 00:00:32,009
Now is challenge number two.

15
00:00:32,009 --> 00:00:33,930
Challenge number two is to figure out,

16
00:00:33,930 --> 00:00:37,260
hey, if this user is currently signed out

17
00:00:37,260 --> 00:00:39,750
and they're trying to access this protected component,

18
00:00:39,750 --> 00:00:41,370
this protected resource,

19
00:00:41,370 --> 00:00:44,190
we need to automatically kick them back to the home route.

20
00:00:44,190 --> 00:00:46,623
We need to just dump them somewhere else.

21
00:00:48,360 --> 00:00:51,300
So this is going to be a lot more of a React Router problem

22
00:00:51,300 --> 00:00:52,133
than anything else.

23
00:00:52,133 --> 00:00:55,230
We want to programmatically navigate the user.

24
00:00:55,230 --> 00:00:56,910
They're not gonna be clicking on any link

25
00:00:56,910 --> 00:00:58,470
that says like, hey, you're not allowed here,

26
00:00:58,470 --> 00:00:59,670
go somewhere else.

27
00:00:59,670 --> 00:01:03,420
We need to very forcibly kick them to another route.

28
00:01:03,420 --> 00:01:05,340
I'm gonna pull a diagram up on the screen

29
00:01:05,340 --> 00:01:06,840
that kind of displays

30
00:01:06,840 --> 00:01:10,233
what our application render tree currently looks like.

31
00:01:12,690 --> 00:01:14,130
So this is our current render tree

32
00:01:14,130 --> 00:01:17,340
with a couple other components missing, but that's okay.

33
00:01:17,340 --> 00:01:19,800
At the very top level, we're showing our router.

34
00:01:19,800 --> 00:01:22,050
Now of course our provider is above that,

35
00:01:22,050 --> 00:01:23,250
but, again, that's totally fine.

36
00:01:23,250 --> 00:01:24,360
Let's just imagine right now

37
00:01:24,360 --> 00:01:27,210
that we're only really concerned with React Router.

38
00:01:27,210 --> 00:01:29,280
So at the very top, we've got our router.

39
00:01:29,280 --> 00:01:30,750
We're just showing our app,

40
00:01:30,750 --> 00:01:31,583
and then the app

41
00:01:31,583 --> 00:01:35,493
is showing our authentication wrapped Resources component.

42
00:01:37,230 --> 00:01:38,340
So the key here is

43
00:01:38,340 --> 00:01:41,130
that we need to forcibly navigate to somewhere around.

44
00:01:41,130 --> 00:01:42,540
We need access to the router

45
00:01:42,540 --> 00:01:46,500
to programmatically navigate the user somewhere else.

46
00:01:46,500 --> 00:01:48,780
That's what we're trying to do here.

47
00:01:48,780 --> 00:01:50,400
So to get access to the router,

48
00:01:50,400 --> 00:01:52,230
we need like a direct reference to it.

49
00:01:52,230 --> 00:01:53,640
We need to say, "Hey, router,

50
00:01:53,640 --> 00:01:56,310
I want you to go do something in particular.

51
00:01:56,310 --> 00:01:57,930
To get access to this router,

52
00:01:57,930 --> 00:02:01,323
we're going to make use of a topic called context.

53
00:02:02,280 --> 00:02:04,710
Now, context is a topic in React

54
00:02:04,710 --> 00:02:07,230
that is very similar to props.

55
00:02:07,230 --> 00:02:10,199
Props are passed from component to component,

56
00:02:10,199 --> 00:02:11,760
from parent to child,

57
00:02:11,760 --> 00:02:13,530
so from router to app

58
00:02:13,530 --> 00:02:16,170
and then app to Authentication Higher-Order Component

59
00:02:16,170 --> 00:02:19,080
and really from the Authentication Higher-Order Component

60
00:02:19,080 --> 00:02:20,730
down to Resources.

61
00:02:20,730 --> 00:02:23,670
Context is something similar to props,

62
00:02:23,670 --> 00:02:26,430
but it spans the entire render tree.

63
00:02:26,430 --> 00:02:28,680
So our Resources component right here

64
00:02:28,680 --> 00:02:32,100
can make direct access to a context property

65
00:02:32,100 --> 00:02:35,160
that is defined by the router way up here at the top.

66
00:02:35,160 --> 00:02:38,790
So context really skips levels or skips components.

67
00:02:38,790 --> 00:02:41,190
So we're going to make use of context

68
00:02:41,190 --> 00:02:43,290
to get access to our router.

69
00:02:43,290 --> 00:02:44,520
Now, this entire process

70
00:02:44,520 --> 00:02:47,490
of basically telling our router to navigate somewhere

71
00:02:47,490 --> 00:02:48,990
is really a little, in my opinion,

72
00:02:48,990 --> 00:02:50,610
a little bit overly complex,

73
00:02:50,610 --> 00:02:53,220
but it's the decision that React Router has gone with

74
00:02:53,220 --> 00:02:55,260
for how you should navigate around on a page.

75
00:02:55,260 --> 00:02:58,200
So this is coming straight from React Router.

76
00:02:58,200 --> 00:03:01,500
If you don't like it, you, you can let them know.

77
00:03:01,500 --> 00:03:02,463
I certainly have.

78
00:03:03,450 --> 00:03:06,000
Anyways, our job here is to get access

79
00:03:06,000 --> 00:03:09,630
to our router on context.

80
00:03:09,630 --> 00:03:11,280
So let's give this a shot.

81
00:03:11,280 --> 00:03:13,560
The first thing I'm gonna do is remove our console.log

82
00:03:13,560 --> 00:03:14,430
in the render method.

83
00:03:14,430 --> 00:03:16,730
We don't really need this console.log anymore.

84
00:03:17,580 --> 00:03:19,320
Now getting access to context

85
00:03:19,320 --> 00:03:22,320
is just like getting access to props.

86
00:03:22,320 --> 00:03:25,380
We're just gonna say this.context.

87
00:03:25,380 --> 00:03:26,340
So let's give that a shot.

88
00:03:26,340 --> 00:03:30,570
We'll console.log this.context.

89
00:03:30,570 --> 00:03:33,660
I'm gonna save this, flip back over.

90
00:03:33,660 --> 00:03:35,133
Let's do a refresh,

91
00:03:36,000 --> 00:03:38,370
and you'll see that we get a little error in here.

92
00:03:38,370 --> 00:03:39,720
I think I got a typo somewhere.

93
00:03:39,720 --> 00:03:40,743
Let's check it out.

94
00:03:42,780 --> 00:03:44,580
Oops, I put it outside the render method.

95
00:03:44,580 --> 00:03:47,340
That's why I should not be talking

96
00:03:47,340 --> 00:03:49,350
and typing at the same time, my apologies.

97
00:03:49,350 --> 00:03:51,660
Okay, so we're back to normal.

98
00:03:51,660 --> 00:03:54,990
Let's refresh and, okay, so here's our console.log,

99
00:03:54,990 --> 00:03:56,490
but it's an empty object right now.

100
00:03:56,490 --> 00:03:58,740
But I just said that we're gonna get access

101
00:03:58,740 --> 00:04:02,370
to our router on context, but this object is clearly empty.

102
00:04:02,370 --> 00:04:05,400
So where does the router come from?

103
00:04:05,400 --> 00:04:08,100
So here's the real trick to context.

104
00:04:08,100 --> 00:04:11,130
Because context can be so easily abused

105
00:04:11,130 --> 00:04:12,810
inside of your application, right?

106
00:04:12,810 --> 00:04:14,040
We can say, "Oh, you know what?

107
00:04:14,040 --> 00:04:15,840
My very top level component

108
00:04:15,840 --> 00:04:17,550
is gonna provide all of its data

109
00:04:17,550 --> 00:04:20,160
to the entire application via context,

110
00:04:20,160 --> 00:04:22,560
because it's so easy to be abused like that

111
00:04:22,560 --> 00:04:24,993
over using props, which we should be using,

112
00:04:25,830 --> 00:04:30,630
React makes you define a property called context types

113
00:04:30,630 --> 00:04:34,350
on each of our React classes, each of our components.

114
00:04:34,350 --> 00:04:37,140
We can only access properties on context

115
00:04:37,140 --> 00:04:39,660
when we've kind of declared the need

116
00:04:39,660 --> 00:04:42,720
to have access to a particular property ahead of time.

117
00:04:42,720 --> 00:04:45,150
So let's see what that looks like.

118
00:04:45,150 --> 00:04:46,950
I'm gonna put a new line above render,

119
00:04:46,950 --> 00:04:48,650
definitely above render this time.

120
00:04:49,530 --> 00:04:50,550
And we're going to write

121
00:04:50,550 --> 00:04:51,900
what's gonna look a little bit weird.

122
00:04:51,900 --> 00:04:55,743
I'm gonna do static contextTypes = router,

123
00:04:59,880 --> 00:05:04,880
and then we're going to write React.PropTypes.object.

124
00:05:06,540 --> 00:05:08,640
All right, so all this code right here

125
00:05:08,640 --> 00:05:11,100
is definitely looking pretty strange.

126
00:05:11,100 --> 00:05:13,140
Inside of all of our React classes, you know,

127
00:05:13,140 --> 00:05:14,370
all of our component classes,

128
00:05:14,370 --> 00:05:16,620
we're used to seeing methods defined like this.

129
00:05:16,620 --> 00:05:18,150
We write the method name

130
00:05:18,150 --> 00:05:21,210
and then our parens and then our curly braces.

131
00:05:21,210 --> 00:05:22,440
So this is definitely breaking

132
00:05:22,440 --> 00:05:25,770
from that kind of methodology that we're very used to.

133
00:05:25,770 --> 00:05:28,170
Let's go ahead and talk about this different syntax

134
00:05:28,170 --> 00:05:29,583
inside of the next section.