1
00:00:00,810 --> 00:00:02,790
-: In the last section, we started adding some logic

2
00:00:02,790 --> 00:00:04,759
to our comment box component to decide whether

3
00:00:04,759 --> 00:00:07,710
or not the user needs to be forcibly navigated away

4
00:00:07,710 --> 00:00:09,300
from this page.

5
00:00:09,300 --> 00:00:11,010
We're now ready to test it out in the browser.

6
00:00:11,010 --> 00:00:12,810
So I'm gonna flip over to my browser

7
00:00:14,820 --> 00:00:17,643
and I'm gonna do a forcible refresh of the page.

8
00:00:19,507 --> 00:00:21,180
So when the page loads back up

9
00:00:21,180 --> 00:00:23,040
we are not going to be authenticated.

10
00:00:23,040 --> 00:00:25,200
So you'll notice right here the button says "sign in".

11
00:00:25,200 --> 00:00:27,480
So at present we are not authenticated

12
00:00:27,480 --> 00:00:30,840
but I am on the "/post" route.

13
00:00:30,840 --> 00:00:32,220
If I look down at my console,

14
00:00:32,220 --> 00:00:33,390
over here on the right hand side,

15
00:00:33,390 --> 00:00:36,690
you'll notice that the console log says "I need to leave".

16
00:00:36,690 --> 00:00:39,360
So right now we are, in fact, in a condition where

17
00:00:39,360 --> 00:00:42,513
we would want to navigate our user away from this page.

18
00:00:43,410 --> 00:00:48,210
If I navigate back over to the homepage, clear my console

19
00:00:48,210 --> 00:00:50,520
and then go back over to the "post" page

20
00:00:50,520 --> 00:00:52,500
it again says "I need to leave".

21
00:00:52,500 --> 00:00:55,140
Okay, so it seems like that's working out pretty well.

22
00:00:55,140 --> 00:00:55,973
Now let's try the keys

23
00:00:55,973 --> 00:00:59,280
in which we are authenticated or we are signed in.

24
00:00:59,280 --> 00:01:01,380
So I'm gonna go back over to the homepage.

25
00:01:02,310 --> 00:01:03,570
I'm gonna click "sign in".

26
00:01:03,570 --> 00:01:06,090
So I'm now considered to be authenticated.

27
00:01:06,090 --> 00:01:07,860
I'm gonna clear my console again very quickly

28
00:01:07,860 --> 00:01:10,560
just so we don't mistake any console logs over there.

29
00:01:10,560 --> 00:01:13,310
And then I will navigate back over to the "post" route.

30
00:01:14,160 --> 00:01:15,210
So when I go back over

31
00:01:15,210 --> 00:01:18,210
you'll notice I do not see a console log, which is expected.

32
00:01:18,210 --> 00:01:19,800
That's exactly what we want

33
00:01:19,800 --> 00:01:22,830
because we are in fact signed into the application.

34
00:01:22,830 --> 00:01:25,710
Now when we navigated over to this route,

35
00:01:25,710 --> 00:01:27,420
the lifecycle method that got called

36
00:01:27,420 --> 00:01:28,707
was "componentDidMount".

37
00:01:29,760 --> 00:01:32,580
So that's the the lifecycle method that gets called when

38
00:01:32,580 --> 00:01:35,520
our component is first rendered to the screen.

39
00:01:35,520 --> 00:01:36,450
You might be a little bit curious

40
00:01:36,450 --> 00:01:39,480
about why we put on the other lifecycle method here,

41
00:01:39,480 --> 00:01:42,780
the case in which our component just got updated.

42
00:01:42,780 --> 00:01:45,198
Well, this lifecycle method handles the case in which a user

43
00:01:45,198 --> 00:01:49,650
is looking at this component and then signs out.

44
00:01:49,650 --> 00:01:51,720
'Cause when we click on "sign out" right here

45
00:01:51,720 --> 00:01:54,720
that's going to cause our comment box component to

46
00:01:54,720 --> 00:01:59,160
be re-rendered with a new value for "this.props.auth".

47
00:01:59,160 --> 00:02:01,380
So that's the case in which "componentDidUpdate"

48
00:02:01,380 --> 00:02:02,313
will be called.

49
00:02:03,150 --> 00:02:05,280
So let's try clicking on "sign out" now,

50
00:02:05,280 --> 00:02:07,800
when I do, we again see that console log

51
00:02:07,800 --> 00:02:09,902
and this time that console log is originating

52
00:02:09,902 --> 00:02:13,200
from the "componentDidUpdate" method.

53
00:02:13,200 --> 00:02:15,720
So at this point we're essentially handling every case

54
00:02:15,720 --> 00:02:18,330
the case in which we are signed in and we come to this page

55
00:02:18,330 --> 00:02:20,280
the case in which we're signed out and all the

56
00:02:20,280 --> 00:02:22,263
different variations thereof.

57
00:02:23,400 --> 00:02:25,200
So all we have to do now is

58
00:02:25,200 --> 00:02:28,380
instead of doing that console log, right here,

59
00:02:28,380 --> 00:02:31,830
we need to instead forcibly navigate the user away.

60
00:02:31,830 --> 00:02:33,870
So to do that, we're going to be making use

61
00:02:33,870 --> 00:02:37,050
of the "React" router library.

62
00:02:37,050 --> 00:02:39,540
Anytime one of our components is rendered directly

63
00:02:39,540 --> 00:02:42,295
by the "React" router library, we automatically get access

64
00:02:42,295 --> 00:02:46,417
to the "this.props.history" object.

65
00:02:46,417 --> 00:02:49,320
"this.props.history" allows us to programmatically

66
00:02:49,320 --> 00:02:52,200
navigate around our application by using a method

67
00:02:52,200 --> 00:02:54,810
on it called ".push".

68
00:02:54,810 --> 00:02:56,910
So we call ".push" and we just put the route

69
00:02:56,910 --> 00:02:59,640
in here that we want to attempt to navigate to.

70
00:02:59,640 --> 00:03:01,110
So in this case, we want to go back

71
00:03:01,110 --> 00:03:03,543
to our "Root" route inside of our application.

72
00:03:04,380 --> 00:03:07,210
So I'll save this with this change right here

73
00:03:08,340 --> 00:03:10,140
and then I'll flip back over.

74
00:03:10,140 --> 00:03:11,390
I'm gonna go back over to the "Root" route

75
00:03:11,390 --> 00:03:15,063
of the application, after the reload kicks in.

76
00:03:16,681 --> 00:03:19,950
So I'm at my "Root" route right now, and if I try to click

77
00:03:19,950 --> 00:03:22,861
on "post a comment" while I am not signed in, you'll notice

78
00:03:22,861 --> 00:03:27,570
that the URL up here very briefly changes, very briefly.

79
00:03:27,570 --> 00:03:30,150
And then as soon as "React" realizes that we're

80
00:03:30,150 --> 00:03:32,822
about to load up that component and render it

81
00:03:32,822 --> 00:03:35,490
our "componentDidMount" lifecycle method right here

82
00:03:35,490 --> 00:03:37,747
gets called, and we are forcibly navigated

83
00:03:37,747 --> 00:03:39,453
away from that page.

84
00:03:41,910 --> 00:03:43,620
If we then click on "sign in'

85
00:03:43,620 --> 00:03:46,320
and try to go over, we're good to go.

86
00:03:46,320 --> 00:03:48,630
And then if we try to now "sign out"

87
00:03:48,630 --> 00:03:51,540
we get kicked back over to our "Root" route.

88
00:03:51,540 --> 00:03:54,030
All right, well, believe it or not, that's pretty much it.

89
00:03:54,030 --> 00:03:55,560
That's all the logic we really need

90
00:03:55,560 --> 00:03:57,540
around authentication for right now.

91
00:03:57,540 --> 00:03:59,700
So we have the ability to lock down access

92
00:03:59,700 --> 00:04:02,880
a hundred percent to the comment box component.

93
00:04:02,880 --> 00:04:04,050
So at this point in time

94
00:04:04,050 --> 00:04:06,570
we've really accomplished step one right here.

95
00:04:06,570 --> 00:04:08,070
We wrote all that logic

96
00:04:08,070 --> 00:04:09,900
that we want to eventually make repeatable,

97
00:04:09,900 --> 00:04:11,640
or reusable inside of our application,

98
00:04:11,640 --> 00:04:13,830
into a single component.

99
00:04:13,830 --> 00:04:16,019
So now we're gonna move on to step number two, where we

100
00:04:16,019 --> 00:04:18,654
create a file that's gonna house our higher order component

101
00:04:18,654 --> 00:04:20,910
and we're gonna add some "scaffold" code

102
00:04:20,910 --> 00:04:23,430
or some "boiler plate" code to that file.

103
00:04:23,430 --> 00:04:24,450
So let's pause right here

104
00:04:24,450 --> 00:04:26,843
and we'll take care of that in the next section.