1
00:00:00,960 --> 00:00:01,793
-: In the last section,

2
00:00:01,793 --> 00:00:03,480
we created our auth reducer.

3
00:00:03,480 --> 00:00:04,890
One thing we neglected to do,

4
00:00:04,890 --> 00:00:06,960
was to wire up this reducer

5
00:00:06,960 --> 00:00:08,880
inside of our combined reducers call,

6
00:00:08,880 --> 00:00:11,370
in the reducers index dot js file.

7
00:00:11,370 --> 00:00:13,500
So let's take care of that right now.

8
00:00:13,500 --> 00:00:14,610
At the top of the file,

9
00:00:14,610 --> 00:00:16,593
I will import auth reducer,

10
00:00:17,520 --> 00:00:20,310
from reducers auth,

11
00:00:20,310 --> 00:00:22,800
and then I will add that as a new reducer

12
00:00:22,800 --> 00:00:25,083
under the key auth, like so.

13
00:00:27,030 --> 00:00:28,473
Okay, that's pretty much it.

14
00:00:29,910 --> 00:00:32,220
Let's now flip back over to our app component,

15
00:00:32,220 --> 00:00:33,053
and inside there,

16
00:00:33,053 --> 00:00:33,900
we're going to immediately

17
00:00:33,900 --> 00:00:36,120
start to add in a button that's going to

18
00:00:36,120 --> 00:00:37,560
allow the user to sign in

19
00:00:37,560 --> 00:00:39,660
or sign out of our app.

20
00:00:39,660 --> 00:00:42,210
So back inside the app file,

21
00:00:42,210 --> 00:00:43,410
I'm going to first get started

22
00:00:43,410 --> 00:00:45,750
by refactoring this functional component,

23
00:00:45,750 --> 00:00:48,540
over to a class-based component, instead.

24
00:00:48,540 --> 00:00:49,950
I don't really expect this component

25
00:00:49,950 --> 00:00:52,620
to need to make use of any component level state,

26
00:00:52,620 --> 00:00:54,120
but I do expect that we're gonna have a

27
00:00:54,120 --> 00:00:56,070
couple of helper methods needed

28
00:00:56,070 --> 00:00:57,270
to kind of organize the code

29
00:00:57,270 --> 00:00:58,860
that we're gonna put inside of here.

30
00:00:58,860 --> 00:01:00,000
So that's the only reason

31
00:01:00,000 --> 00:01:02,400
I'm gonna turn this into a class-based component.

32
00:01:02,400 --> 00:01:03,720
Just to have easier access

33
00:01:03,720 --> 00:01:05,823
to a couple of helper methods.

34
00:01:06,840 --> 00:01:09,090
So I'm gonna replace the export default right here,

35
00:01:09,090 --> 00:01:14,090
with export default class app extends component.

36
00:01:16,440 --> 00:01:18,940
I'll make sure that I import component at the top,

37
00:01:20,820 --> 00:01:23,130
and then I will wrap the return statement right here,

38
00:01:23,130 --> 00:01:24,483
with a render method.

39
00:01:29,550 --> 00:01:30,383
Cool.

40
00:01:31,470 --> 00:01:33,150
So now I'm gonna add a helper method,

41
00:01:33,150 --> 00:01:34,410
which again, is why we created

42
00:01:34,410 --> 00:01:36,240
this thing in the first place,

43
00:01:36,240 --> 00:01:39,543
and I will call it something like render header.

44
00:01:40,590 --> 00:01:42,030
I think that's reasonable.

45
00:01:42,030 --> 00:01:43,530
So the goal of this method, right here,

46
00:01:43,530 --> 00:01:46,110
is to produce the jsx required

47
00:01:46,110 --> 00:01:47,820
to get this kind of header list

48
00:01:47,820 --> 00:01:49,020
of elements right here,

49
00:01:49,020 --> 00:01:51,450
the home link, the post link,

50
00:01:51,450 --> 00:01:54,390
and the sign in, and sign out buttons.

51
00:01:54,390 --> 00:01:56,310
Rather than doing a lot of styling here,

52
00:01:56,310 --> 00:01:58,710
because I don't really wanna focus on any styling,

53
00:01:58,710 --> 00:01:59,543
or anything like that,

54
00:01:59,543 --> 00:02:00,480
I really just wanna focus on

55
00:02:00,480 --> 00:02:02,370
the higher order component aspect

56
00:02:02,370 --> 00:02:03,480
of this application.

57
00:02:03,480 --> 00:02:05,370
We're just gonna use a simple UL

58
00:02:05,370 --> 00:02:07,410
with some LIs to get these links,

59
00:02:07,410 --> 00:02:10,139
and the button to show up on the screen.

60
00:02:10,139 --> 00:02:12,000
So inside of render header,

61
00:02:12,000 --> 00:02:17,000
I will return a UL, with three LI elements.

62
00:02:19,830 --> 00:02:22,383
So I'll make one and copy, paste it down.

63
00:02:23,910 --> 00:02:25,170
Now, the very first LI,

64
00:02:25,170 --> 00:02:27,090
should house a link tag that'll

65
00:02:27,090 --> 00:02:28,950
take user back to our home route

66
00:02:28,950 --> 00:02:30,963
of just local host 3000.

67
00:02:31,890 --> 00:02:33,360
So inside the first LI,

68
00:02:33,360 --> 00:02:36,150
I'm gonna put a link tag from react router.

69
00:02:36,150 --> 00:02:39,090
That's gonna take the user to slash,

70
00:02:39,090 --> 00:02:41,340
which is our root route,

71
00:02:41,340 --> 00:02:42,840
and I'll give that tag

72
00:02:42,840 --> 00:02:44,403
the name home, like so.

73
00:02:46,350 --> 00:02:47,760
As long as we're using the link tag,

74
00:02:47,760 --> 00:02:49,620
let's not forget to import it up here

75
00:02:49,620 --> 00:02:51,510
from react router dom, as well.

76
00:02:51,510 --> 00:02:53,550
So I'm gonna make sure I add an import,

77
00:02:53,550 --> 00:02:55,383
right here for the link tag.

78
00:02:57,030 --> 00:02:58,680
Now we can repeat that same process

79
00:02:58,680 --> 00:03:01,200
for the the post link as well.

80
00:03:01,200 --> 00:03:05,073
I'll make a new link, that goes to post,

81
00:03:06,630 --> 00:03:09,603
and I'll give it the text post a comment.

82
00:03:11,040 --> 00:03:13,560
And then finally, in this last LI, right here,

83
00:03:13,560 --> 00:03:15,420
we're gonna put our button that

84
00:03:15,420 --> 00:03:17,280
user can click on to sign in

85
00:03:17,280 --> 00:03:19,053
or sign out of the application.

86
00:03:20,070 --> 00:03:21,720
Now I think that the text

87
00:03:21,720 --> 00:03:24,810
and whatnot, that's going to occur around this button

88
00:03:24,810 --> 00:03:27,180
might require a little bit of logic.

89
00:03:27,180 --> 00:03:28,890
So rather than putting the button right here,

90
00:03:28,890 --> 00:03:31,020
I'm gonna make another helper method

91
00:03:31,020 --> 00:03:32,610
and you'll see why in just a second,

92
00:03:32,610 --> 00:03:34,560
as soon as we start to add some code

93
00:03:34,560 --> 00:03:38,250
to this thing, for the actual button implementation.

94
00:03:38,250 --> 00:03:40,590
So I'm going to add in my curly braces,

95
00:03:40,590 --> 00:03:44,193
and then reference this dot render button, like so.

96
00:03:45,540 --> 00:03:47,020
So then I can add in

97
00:03:48,420 --> 00:03:50,070
render button up here

98
00:03:50,070 --> 00:03:51,510
and we'll use this method.

99
00:03:51,510 --> 00:03:53,580
Oops, little bit of a typo there.

100
00:03:53,580 --> 00:03:55,290
We'll use this method to actually render

101
00:03:55,290 --> 00:03:57,720
that sign in and sign out button.

102
00:03:57,720 --> 00:03:59,310
Before we do, let's take a quick pause

103
00:03:59,310 --> 00:04:01,110
so this section doesn't run on too long.

104
00:04:01,110 --> 00:04:02,460
So quick break and we'll come back,

105
00:04:02,460 --> 00:04:04,863
and tackle this button in the next section.