1
00:00:01,092 --> 00:00:01,925
Instructor: In this section,

2
00:00:01,925 --> 00:00:03,120
we're gonna start talking about the application

3
00:00:03,120 --> 00:00:04,650
we're going to build to get a better idea

4
00:00:04,650 --> 00:00:07,140
of how Higher-Order Components actually work.

5
00:00:07,140 --> 00:00:09,633
So, let's take a look at a couple of mockups.

6
00:00:10,620 --> 00:00:12,660
So, we're gonna take that comment app

7
00:00:12,660 --> 00:00:13,920
that we were just working on

8
00:00:13,920 --> 00:00:15,390
and writing all those tests around,

9
00:00:15,390 --> 00:00:17,820
and we're gonna do a refactor to it.

10
00:00:17,820 --> 00:00:21,540
We're gonna split the application into two separate pages

11
00:00:21,540 --> 00:00:22,920
and we're going to use React Router

12
00:00:22,920 --> 00:00:25,740
to navigate between those two pages.

13
00:00:25,740 --> 00:00:27,600
When a user first comes to our application

14
00:00:27,600 --> 00:00:30,630
and presumably lands at localhost:3000,

15
00:00:30,630 --> 00:00:31,463
we're gonna show them

16
00:00:31,463 --> 00:00:33,483
that Comment List component on the screen.

17
00:00:34,380 --> 00:00:37,740
A user can then click on the Post button right here

18
00:00:37,740 --> 00:00:41,640
and then go over to the second page of our application.

19
00:00:41,640 --> 00:00:43,080
So, when they click on that Post button,

20
00:00:43,080 --> 00:00:46,320
they're gonna go to localhost:3000/post

21
00:00:46,320 --> 00:00:48,990
and we're gonna show them that comment box form

22
00:00:48,990 --> 00:00:51,180
where they can enter in a new comment,

23
00:00:51,180 --> 00:00:54,300
and then eventually go back over to the comment list

24
00:00:54,300 --> 00:00:57,150
and see that comment appear on the screen.

25
00:00:57,150 --> 00:00:59,700
Now, here's where things get a little bit interesting.

26
00:00:59,700 --> 00:01:00,840
We're gonna add in the idea

27
00:01:00,840 --> 00:01:03,423
of authentication to this app as well.

28
00:01:04,500 --> 00:01:05,333
Just to be clear,

29
00:01:05,333 --> 00:01:07,350
the authentication that we're gonna build

30
00:01:07,350 --> 00:01:10,140
is not gonna be like fully-featured authentication

31
00:01:10,140 --> 00:01:12,570
backed by a database, and emails,

32
00:01:12,570 --> 00:01:14,700
and passwords or anything like that.

33
00:01:14,700 --> 00:01:18,300
We're gonna have a very simple authentication system

34
00:01:18,300 --> 00:01:20,130
without any type of email

35
00:01:20,130 --> 00:01:23,190
or password combinations or anything like that.

36
00:01:23,190 --> 00:01:24,690
Basically, if a user just clicks

37
00:01:24,690 --> 00:01:26,160
on the Sign In button right here,

38
00:01:26,160 --> 00:01:27,180
we're going to consider them

39
00:01:27,180 --> 00:01:29,460
to be magically logged into the app.

40
00:01:29,460 --> 00:01:30,293
That's it.

41
00:01:30,293 --> 00:01:33,300
So, no sign in form, no sign up, nothing like that.

42
00:01:33,300 --> 00:01:34,530
Just very simple.

43
00:01:34,530 --> 00:01:36,783
Click this button and poof, your signed in.

44
00:01:38,100 --> 00:01:40,410
Now, the purpose of authentication in here

45
00:01:40,410 --> 00:01:43,200
is to limit access to a user's ability

46
00:01:43,200 --> 00:01:45,750
to go over to this second screen.

47
00:01:45,750 --> 00:01:46,583
So, in other words,

48
00:01:46,583 --> 00:01:48,810
if you are not logged into the application,

49
00:01:48,810 --> 00:01:52,470
you should not be able to go to the comment box page.

50
00:01:52,470 --> 00:01:54,030
Let's put that in diagram format

51
00:01:54,030 --> 00:01:56,520
to get a better idea of what's going on.

52
00:01:56,520 --> 00:01:58,080
Okay, so here's the idea.

53
00:01:58,080 --> 00:02:01,380
If a user tries to go to that '/post' route

54
00:02:01,380 --> 00:02:03,900
to visit the comment box component,

55
00:02:03,900 --> 00:02:05,610
we're gonna ask ourselves a question.

56
00:02:05,610 --> 00:02:08,880
We're gonna say, "Is this user logged in?"

57
00:02:08,880 --> 00:02:11,340
If they are logged in, then hey, fantastic.

58
00:02:11,340 --> 00:02:15,510
We will allow that user to view the comment box form.

59
00:02:15,510 --> 00:02:18,060
Otherwise, if the user is not logged in,

60
00:02:18,060 --> 00:02:19,830
then we're going to redirect our user

61
00:02:19,830 --> 00:02:21,450
back to the homepage,

62
00:02:21,450 --> 00:02:24,153
which is the Comment List component.

63
00:02:25,659 --> 00:02:26,940
So, along this entire process,

64
00:02:26,940 --> 00:02:29,490
you might have not quite seen where Higher-Order Components

65
00:02:29,490 --> 00:02:30,720
are gonna come into play.

66
00:02:30,720 --> 00:02:32,130
So, lemme give you a better idea

67
00:02:32,130 --> 00:02:35,030
of where we're going to use a Higher-Order Component here.

68
00:02:35,880 --> 00:02:39,330
All right, so we're going to mostly reuse

69
00:02:39,330 --> 00:02:41,670
all the same code that we just put together inside

70
00:02:41,670 --> 00:02:43,500
of our commenting application.

71
00:02:43,500 --> 00:02:45,570
So, we're still gonna have the App component,

72
00:02:45,570 --> 00:02:47,363
we're gonna have the CommentList and the CommentBox.

73
00:02:49,467 --> 00:02:51,420
One of the largest new pieces of code

74
00:02:51,420 --> 00:02:54,570
that we're going to add is a Higher-Order Component

75
00:02:54,570 --> 00:02:56,583
that we're going to call requireAuth.

76
00:02:57,930 --> 00:03:00,600
requireAuth is going to be a react component

77
00:03:00,600 --> 00:03:03,180
or a Higher-Order Component

78
00:03:03,180 --> 00:03:06,420
that will only allow users to visit some route

79
00:03:06,420 --> 00:03:09,480
of our application if they are signed in.

80
00:03:09,480 --> 00:03:11,280
So, we're going to restrict access

81
00:03:11,280 --> 00:03:13,110
to the CommentBox component

82
00:03:13,110 --> 00:03:16,830
through the use of this requireAuth Higher-Order Component.

83
00:03:16,830 --> 00:03:17,670
That's the idea.

84
00:03:17,670 --> 00:03:20,460
That's where we're gonna use a Higher-Order Component.

85
00:03:20,460 --> 00:03:22,470
Now, you'll recall that just two seconds ago,

86
00:03:22,470 --> 00:03:24,600
I had said, "Oh yeah, we use Higher-Order Components

87
00:03:24,600 --> 00:03:26,700
to help us reuse code."

88
00:03:26,700 --> 00:03:27,533
So, in this case,

89
00:03:27,533 --> 00:03:28,366
it might look like

90
00:03:28,366 --> 00:03:31,710
we're not really going to ever be reusing the requireAuth

91
00:03:31,710 --> 00:03:32,670
Higher-order component

92
00:03:32,670 --> 00:03:34,410
because we only have one route

93
00:03:34,410 --> 00:03:36,930
that we want to restrict access to.

94
00:03:36,930 --> 00:03:38,070
But if we wanted to,

95
00:03:38,070 --> 00:03:40,326
we could very easily think of a situation

96
00:03:40,326 --> 00:03:43,710
where maybe we also had some other components,

97
00:03:43,710 --> 00:03:45,480
or other routes inside of our application

98
00:03:45,480 --> 00:03:48,300
like, let's say CommentEdit or ProfileShow

99
00:03:48,300 --> 00:03:50,370
that a user should only be able to visit

100
00:03:50,370 --> 00:03:52,080
if they are signed in.

101
00:03:52,080 --> 00:03:52,913
And so,

102
00:03:52,913 --> 00:03:55,200
if we had these other routes inside of our application,

103
00:03:55,200 --> 00:03:56,580
we would be able to reuse

104
00:03:56,580 --> 00:04:00,330
this requireAuth Higher-Order Component to restrict access

105
00:04:00,330 --> 00:04:03,060
to these other pages to only users

106
00:04:03,060 --> 00:04:04,860
who are signed into our application.

107
00:04:05,940 --> 00:04:07,230
So again, even though you and I

108
00:04:07,230 --> 00:04:10,260
are not necessarily going to be reusing our requireAuth

109
00:04:10,260 --> 00:04:12,840
Higher-Order Component inside of this app,

110
00:04:12,840 --> 00:04:15,390
we can very easily think of where we would reuse it

111
00:04:15,390 --> 00:04:17,730
in a larger application.

112
00:04:17,730 --> 00:04:19,829
Okay, so that's enough talking about this stuff.

113
00:04:19,829 --> 00:04:21,269
Let's continue in the next section

114
00:04:21,269 --> 00:04:22,200
and we're gonna start

115
00:04:22,200 --> 00:04:24,540
to put all this authentication stuff together

116
00:04:24,540 --> 00:04:25,800
and then very quickly move on

117
00:04:25,800 --> 00:04:28,170
to the Higher-Order Component as well.

118
00:04:28,170 --> 00:04:30,670
So, quick break and I'll see you in just a minute.