1
00:00:01,064 --> 00:00:01,897
Narrator: In the last section,

2
00:00:01,897 --> 00:00:04,440
we got some header logic put together,

3
00:00:04,440 --> 00:00:06,240
but when we actually clicked the sign in button,

4
00:00:06,240 --> 00:00:08,700
it looks like nothing inside the header actually updated.

5
00:00:08,700 --> 00:00:09,930
And so I do have to confess,

6
00:00:09,930 --> 00:00:12,570
I made a small mistake here

7
00:00:12,570 --> 00:00:14,070
back inside of our header component.

8
00:00:14,070 --> 00:00:15,390
At the very bottom,

9
00:00:15,390 --> 00:00:18,300
I somehow neglected to actually add "mapStateToProps"

10
00:00:18,300 --> 00:00:19,290
to our connect helper.

11
00:00:19,290 --> 00:00:21,820
So our component never actually knew

12
00:00:23,730 --> 00:00:26,190
when the authentication piece of state was changing.

13
00:00:26,190 --> 00:00:28,380
So let's give this a shot in the browser now,

14
00:00:28,380 --> 00:00:31,623
I'm gonna flip back over, refresh the page,

15
00:00:32,520 --> 00:00:34,593
go back to the sign in route,

16
00:00:36,240 --> 00:00:39,480
and if I navigate over to test 1, 2, 3, or, excuse me,

17
00:00:39,480 --> 00:00:43,380
if I put in the email test 1, 2, 3, and I sign in,

18
00:00:43,380 --> 00:00:45,660
it looks like I successfully do see the text

19
00:00:45,660 --> 00:00:48,120
at the top, go to see, go to sign out.

20
00:00:48,120 --> 00:00:49,410
So this is looking pretty good.

21
00:00:49,410 --> 00:00:51,480
Seems like a very clear, very obvious

22
00:00:51,480 --> 00:00:53,130
next feature to work on, would be

23
00:00:53,130 --> 00:00:56,070
to make this sign up link right here actually work.

24
00:00:56,070 --> 00:00:58,200
And so before we actually implement this sign out

25
00:00:58,200 --> 00:00:59,033
I wanna mention that

26
00:00:59,033 --> 00:01:01,170
there's really two very different ways

27
00:01:01,170 --> 00:01:02,790
that we can implement this sign out link

28
00:01:02,790 --> 00:01:05,313
or the ability for our user to sign out.

29
00:01:06,720 --> 00:01:08,220
The two different ways we could do this

30
00:01:08,220 --> 00:01:13,220
is we can say have the header, give the link, the LI tag

31
00:01:13,530 --> 00:01:16,470
for the sign out button right here, and event handler,

32
00:01:16,470 --> 00:01:17,760
so when a user clicks this,

33
00:01:17,760 --> 00:01:21,240
it should just dispatch an action that signs the user out.

34
00:01:21,240 --> 00:01:23,950
One different way of handling sign out though

35
00:01:24,870 --> 00:01:28,410
is to treat the sign out link like an actual endpoint

36
00:01:28,410 --> 00:01:29,760
that the user can visit.

37
00:01:29,760 --> 00:01:33,990
So if a user visits the link or the path sign out,

38
00:01:33,990 --> 00:01:36,540
the user should automatically be signed out.

39
00:01:36,540 --> 00:01:37,530
We can also use this

40
00:01:37,530 --> 00:01:40,080
to give the user kind of a parting message,

41
00:01:40,080 --> 00:01:42,360
kind of like a, "Okay sorry you logged out.

42
00:01:42,360 --> 00:01:43,620
Hope you come back soon."

43
00:01:43,620 --> 00:01:44,790
Or maybe give them some type

44
00:01:44,790 --> 00:01:47,520
of like marketing message or something like that.

45
00:01:47,520 --> 00:01:50,250
So there is some variety

46
00:01:50,250 --> 00:01:52,650
or some benefit to giving a distinct page

47
00:01:52,650 --> 00:01:53,790
that the user navigates to

48
00:01:53,790 --> 00:01:56,820
when they want to sign out of our application.

49
00:01:56,820 --> 00:01:58,440
And so that's why we're gonna go this direction

50
00:01:58,440 --> 00:02:00,600
where when they navigate to sign out,

51
00:02:00,600 --> 00:02:01,980
it's not only gonna sign them out,

52
00:02:01,980 --> 00:02:04,200
it's also gonna show them some type of message

53
00:02:04,200 --> 00:02:05,043
when they leave.

54
00:02:06,180 --> 00:02:07,500
So to make sure that our users

55
00:02:07,500 --> 00:02:08,820
have something to navigate to,

56
00:02:08,820 --> 00:02:11,130
we're gonna need a sign out component,

57
00:02:11,130 --> 00:02:14,310
and we need to add that component to our router as well.

58
00:02:14,310 --> 00:02:16,650
So let's first make the component.

59
00:02:16,650 --> 00:02:20,280
I'm gonna create a new file inside of our off directory,

60
00:02:20,280 --> 00:02:23,547
and I'm gonna simply call it "signout.js".

61
00:02:25,380 --> 00:02:26,280
Now, I expect this to be

62
00:02:26,280 --> 00:02:28,650
a pretty darn straightforward component right here.

63
00:02:28,650 --> 00:02:31,440
So I think that we will make it a class-based component

64
00:02:31,440 --> 00:02:32,490
'cause we do need to actually

65
00:02:32,490 --> 00:02:34,920
sign out a user when they get to it.

66
00:02:34,920 --> 00:02:38,010
Nonetheless, it'll probably be pretty sparse.

67
00:02:38,010 --> 00:02:40,920
At the top, we'll import "react"

68
00:02:40,920 --> 00:02:44,430
and "component" from "react",

69
00:02:44,430 --> 00:02:48,090
and we're definitely going to need access to Redux State

70
00:02:48,090 --> 00:02:49,740
so that we can call it "action creator"

71
00:02:49,740 --> 00:02:53,880
that will actually log our user out of the application.

72
00:02:53,880 --> 00:02:55,470
And I'm going to assume we're gonna have

73
00:02:55,470 --> 00:02:56,940
some action to do that.

74
00:02:56,940 --> 00:02:58,863
So we'll pull in our actions as well.

75
00:03:02,730 --> 00:03:04,730
Then we can make our sign out component,

76
00:03:09,270 --> 00:03:10,680
and inside the render method for this,

77
00:03:10,680 --> 00:03:12,210
I'm just gonna very simply say

78
00:03:12,210 --> 00:03:14,847
to the user in a "div",

79
00:03:16,507 --> 00:03:19,290
"Sorry to see you go..."

80
00:03:19,290 --> 00:03:21,660
And so again, this would be a fantastic place to show

81
00:03:21,660 --> 00:03:24,270
say some type of marketing message to the user

82
00:03:24,270 --> 00:03:26,220
or perhaps some promotional campaign

83
00:03:26,220 --> 00:03:27,690
or any of a number of different things.

84
00:03:27,690 --> 00:03:29,730
Giving them a very distinct kind of landing page

85
00:03:29,730 --> 00:03:31,930
when they sign out is definitely beneficial.

86
00:03:33,630 --> 00:03:35,430
Now again, we don't have an action creator to

87
00:03:35,430 --> 00:03:37,650
actually call to sign the user out just yet,

88
00:03:37,650 --> 00:03:39,450
but we'll make one very shortly.

89
00:03:39,450 --> 00:03:42,630
So I'm just gonna finish wiring up this component first.

90
00:03:42,630 --> 00:03:46,420
At the bottom I'll export a connected version

91
00:03:49,170 --> 00:03:50,553
of this sign out component.

92
00:03:52,260 --> 00:03:55,200
And I'm gonna say, whenever a user visits this route,

93
00:03:55,200 --> 00:03:57,700
as soon as this component is about to be rendered,

94
00:04:00,030 --> 00:04:03,243
so a component will mount, I want to log this user out.

95
00:04:04,590 --> 00:04:07,890
Again, we haven't implemented this action just yet,

96
00:04:07,890 --> 00:04:10,170
but that's definitely what we're gonna work on next.

97
00:04:10,170 --> 00:04:12,360
So now whenever a user clicks on that button

98
00:04:12,360 --> 00:04:14,010
at the top that says, "sign out",

99
00:04:14,010 --> 00:04:16,260
they will come see this component right here.

100
00:04:16,260 --> 00:04:18,300
It'll say, "Hey, sorry to see you go."

101
00:04:18,300 --> 00:04:20,850
And we'll make sure that we forcibly log the user

102
00:04:20,850 --> 00:04:21,930
out of our application,

103
00:04:21,930 --> 00:04:24,690
which means we'll probably delete their JDBT token.

104
00:04:24,690 --> 00:04:28,230
And we'll probably also flip that piece of state

105
00:04:28,230 --> 00:04:30,390
that says whether or not the user is authenticated

106
00:04:30,390 --> 00:04:31,893
from true to false.

107
00:04:33,060 --> 00:04:34,830
Last thing that we need to do is make sure

108
00:04:34,830 --> 00:04:36,930
that we import this inside of our router

109
00:04:36,930 --> 00:04:38,490
and add a route for it.

110
00:04:38,490 --> 00:04:39,323
So we'll take care

111
00:04:39,323 --> 00:04:41,490
of the action creator in the next, next section.

112
00:04:41,490 --> 00:04:42,780
But for right now, let's make sure

113
00:04:42,780 --> 00:04:45,030
that we can actually visit this component

114
00:04:45,030 --> 00:04:48,633
inside of our application by adding a route for it.

115
00:04:49,950 --> 00:04:54,240
So in our top level "index.js", here's our router.

116
00:04:54,240 --> 00:04:55,630
I'm going to import

117
00:04:56,700 --> 00:05:01,700
our sign out component from "components/auth/signout"

118
00:05:03,630 --> 00:05:05,730
And then we'll add a route for it as well.

119
00:05:08,700 --> 00:05:10,380
Whenever someone visits sign out,

120
00:05:10,380 --> 00:05:13,863
show the component, sign out.

121
00:05:15,810 --> 00:05:17,220
Cool, this looks good.

122
00:05:17,220 --> 00:05:18,570
So we can't quite test this out

123
00:05:18,570 --> 00:05:19,710
in the browser just yet

124
00:05:19,710 --> 00:05:21,540
because we don't actually have an action creator

125
00:05:21,540 --> 00:05:22,710
called "sign out user".

126
00:05:22,710 --> 00:05:23,820
So we'll definitely get an error

127
00:05:23,820 --> 00:05:26,070
if we try to visit this component right now.

128
00:05:26,070 --> 00:05:28,650
Let's make the action creator in the next section

129
00:05:28,650 --> 00:05:30,360
and then give it a shot in the browser.

130
00:05:30,360 --> 00:05:31,460
So I'll see you there.