1
00:00:00,270 --> 00:00:04,170
Beautiful, and the last thing that I want to set up is the Lagat functionality.

2
00:00:04,680 --> 00:00:07,590
So essentially, we can toggle the sidebar.

3
00:00:07,920 --> 00:00:09,510
We just can't see it yet.

4
00:00:09,930 --> 00:00:12,180
We can display the long on button.

5
00:00:12,690 --> 00:00:19,860
So now let's add the functionality where once we click, we actually set up the values in a state backed

6
00:00:19,860 --> 00:00:20,160
panel.

7
00:00:20,520 --> 00:00:21,240
That's number one.

8
00:00:21,660 --> 00:00:28,870
And then remember, we already have the functionality in place for the dashboard, where dashboard route

9
00:00:28,890 --> 00:00:29,880
is already protected.

10
00:00:30,570 --> 00:00:31,590
So the moment?

11
00:00:32,520 --> 00:00:34,590
We change the values in the state.

12
00:00:35,040 --> 00:00:41,460
Essentially, the moment I set my user back to no use, there will be kicked back to the London Bridge.

13
00:00:41,910 --> 00:00:42,780
How's that going to look like?

14
00:00:42,810 --> 00:00:50,220
Well, once her go here logout and non-war, we're back to the landing one and effectively the steps

15
00:00:50,220 --> 00:00:51,060
are going to be following.

16
00:00:51,330 --> 00:00:53,520
So let me go back to the read me.

17
00:00:54,030 --> 00:01:02,400
We will start over here and start in the actions where we'll set up the action import export yard area

18
00:01:02,730 --> 00:01:04,890
and learn in the app context.

19
00:01:05,220 --> 00:01:07,650
What we want to set up is the log out user.

20
00:01:08,130 --> 00:01:14,850
So first, we're going to dispatch the action and then also remember, at the moment we have functionality

21
00:01:14,850 --> 00:01:17,160
where we have the user to the local storage.

22
00:01:17,940 --> 00:01:20,880
Now we want to do is to remove that user.

23
00:01:21,270 --> 00:01:21,630
Correct.

24
00:01:22,020 --> 00:01:25,290
And we already set up the function, so you need to jog your memory.

25
00:01:25,530 --> 00:01:28,410
Please go back to the app context and you'll find it.

26
00:01:28,620 --> 00:01:32,040
And I just invoke it, and we're good to go then.

27
00:01:33,150 --> 00:01:41,790
We go with a log out user, so we pass this one into a value and that in the reducer, not only I want

28
00:01:41,790 --> 00:01:47,310
to set up the condition for logout user, I also want to get the initial state.

29
00:01:48,180 --> 00:01:53,820
And if you remember when we were setting up the app context, I said that we're going to be exporting

30
00:01:53,820 --> 00:01:56,310
initial state and I'll talk about it later.

31
00:01:56,790 --> 00:01:59,340
And later is now so enormous.

32
00:01:59,340 --> 00:02:00,900
Again, this is our export.

33
00:02:01,320 --> 00:02:08,340
And the reason why we're doing that is because in this case, when I log out the user, I don't want

34
00:02:08,340 --> 00:02:10,620
to return data that state.

35
00:02:11,310 --> 00:02:16,890
So I don't want to return all our current values and then just update few of them.

36
00:02:17,340 --> 00:02:23,340
Instead, what I want to do, I want to return an empty object and essentially grab here the initial

37
00:02:23,340 --> 00:02:23,730
state.

38
00:02:24,060 --> 00:02:25,290
Now what is my initial state?

39
00:02:25,620 --> 00:02:26,850
Is this one over here?

40
00:02:27,210 --> 00:02:32,760
And the reason why we're doing this is because I find it easier since we will be adding more value share.

41
00:02:33,300 --> 00:02:36,890
So there's going to be way more properties and then think about it.

42
00:02:36,900 --> 00:02:43,290
What is easier each and every time you add the property to hop over the producer and add it over here

43
00:02:43,560 --> 00:02:51,090
because you'll always want them back in the default state or you simply export initial state and then

44
00:02:51,090 --> 00:02:52,680
you set it up here as a return.

45
00:02:53,100 --> 00:02:54,870
And of course, the answer is the second one.

46
00:02:55,320 --> 00:03:01,290
Essentially, every time I'll be adding this property as default automatically, once I log out, it

47
00:03:01,290 --> 00:03:02,880
will be set back to the default.

48
00:03:03,150 --> 00:03:07,620
Now your another question probably is OK, but what about these ones?

49
00:03:08,100 --> 00:03:12,900
I mean, why are we specifically go user no token now and blah blah blah?

50
00:03:13,170 --> 00:03:15,120
Well, take a look at the app context.

51
00:03:15,300 --> 00:03:21,690
What is common for all of these properties now that are being set using what local storage?

52
00:03:21,960 --> 00:03:22,320
Correct.

53
00:03:22,770 --> 00:03:28,800
So this is the case where we do want to explicitly override that where yes, we remove those values

54
00:03:28,800 --> 00:03:29,700
from the local storage.

55
00:03:29,970 --> 00:03:35,550
But just because we remove them from the local storage doesn't mean that it will automatically update

56
00:03:35,550 --> 00:03:36,060
the state.

57
00:03:36,630 --> 00:03:41,670
So therefore explicitly, we need to go with here's there are no dokono and you can read the rest.

58
00:03:42,030 --> 00:03:47,700
Now, as far as the bar, we grabbed the log out user and we also get the user.

59
00:03:48,210 --> 00:03:53,310
And the reason why when I get the user, because remember in the button you dropped on toggle button,

60
00:03:53,790 --> 00:04:00,480
I want to display the name at the moment where hardcoded and technically you can go use your dot name,

61
00:04:00,840 --> 00:04:04,860
but it's actually my preference to always check for the user to go with.

62
00:04:05,100 --> 00:04:05,460
OK.

63
00:04:05,490 --> 00:04:09,060
If the user exists, then whether I have the username.

64
00:04:09,330 --> 00:04:13,050
Now, as far as I tested, in this case, it's going to work with the user name.

65
00:04:13,260 --> 00:04:20,820
But remember that in Josh's script, if we're accessing the property on the null, you'll get a big

66
00:04:20,820 --> 00:04:23,580
fat error and essentially your whole application will break.

67
00:04:23,850 --> 00:04:31,320
So again, as far as I tested, it's not going to be the case in here, but I still always prefer checking

68
00:04:31,680 --> 00:04:36,720
whether the actual object exists and only when I'm accessing the property.

69
00:04:37,020 --> 00:04:40,860
I guess it's just one of my many annoying habits and essentially.

70
00:04:41,940 --> 00:04:47,070
There are two options you can either go with an operator or there's also optional training.

71
00:04:47,310 --> 00:04:52,200
Now I'm not going to spend more time on this one, but I do want to mention that yes, in the JavaScript

72
00:04:52,200 --> 00:04:55,770
Nugget series, I do have a video where I cover all of that in detail.

73
00:04:56,040 --> 00:04:58,440
Just keep in mind that the functionality essentially is the same.

74
00:04:58,770 --> 00:05:02,550
I only get the name if the user exists.

75
00:05:02,970 --> 00:05:09,930
And then as far as the log out, well, I just pass in the log out user and to my button in the dropdown.

76
00:05:10,080 --> 00:05:12,240
So let's get cracking.

77
00:05:12,570 --> 00:05:16,800
And essentially, what we want to do is set up the action first.

78
00:05:17,260 --> 00:05:22,110
So let me go here with my two cursors and we're going to go with logout user, correct?

79
00:05:22,380 --> 00:05:30,870
So my girl and an underscore user, let's say that and we're looking for the app context, I guess.

80
00:05:31,170 --> 00:05:32,520
Let's start over there.

81
00:05:32,970 --> 00:05:37,350
So I'm going to go above and I'm going to be looking for to log out user.

82
00:05:37,350 --> 00:05:38,010
OK, good.

83
00:05:38,400 --> 00:05:39,360
Let's keep on scrolling.

84
00:05:39,360 --> 00:05:40,300
Keep on scrolling.

85
00:05:40,320 --> 00:05:42,270
Now I want to set up my function.

86
00:05:42,690 --> 00:05:51,060
So right after the toggle sidebar functionality, we want to go here with Konst, so serve our function,

87
00:05:51,060 --> 00:05:52,500
log out user.

88
00:05:52,800 --> 00:05:54,030
That's the function name.

89
00:05:54,390 --> 00:05:57,230
And as far as the functionality, let's just go with dispatch.

90
00:05:57,690 --> 00:06:01,230
Let's bastion type and then log out user.

91
00:06:01,380 --> 00:06:06,690
And then right after that, I also want to remove the user from the local storage.

92
00:06:07,200 --> 00:06:10,420
And if you need to jog your memory, scroll up over here.

93
00:06:10,420 --> 00:06:17,250
And so essentially, the functionality is the opposite to that of the add user to local storage.

94
00:06:17,490 --> 00:06:23,490
So essentially, we just use remove item instead when we want to set this up in the value, of course.

95
00:06:23,910 --> 00:06:30,280
So we're going to go here with log out user and then once a right away dive into the reducer.

96
00:06:30,750 --> 00:06:34,110
And before we do anything, we want to grab that initial step.

97
00:06:34,440 --> 00:06:37,470
Now that is already set up as a named export.

98
00:06:37,800 --> 00:06:44,520
So we just go here with import and initial state and that is coming from context, which is essentially

99
00:06:44,520 --> 00:06:51,000
right next door run all the way in the bottom right after the toggle sidebar and all that.

100
00:06:51,310 --> 00:06:56,640
We're just going to go with another action type here, and I'm going to be looking for my logout user

101
00:06:57,180 --> 00:06:59,190
and looking to double check that I import that.

102
00:06:59,640 --> 00:07:00,390
Looks like I did.

103
00:07:00,930 --> 00:07:08,400
So once I have this one in place, but then we want to go here and return and I'm looking for that object.

104
00:07:08,910 --> 00:07:15,090
And again, instead of going dot, dot, dot and state, essentially I want to go with my initial state.

105
00:07:15,300 --> 00:07:21,420
I want to go with my initial values and then we want to go with user token, user location, drop location.

106
00:07:21,810 --> 00:07:26,670
And essentially, I mean, in the read me have all of them as known.

107
00:07:26,670 --> 00:07:30,420
But if you take a look at the app context, I want here with empty string.

108
00:07:30,630 --> 00:07:32,460
Again, that's really up to you.

109
00:07:32,610 --> 00:07:37,110
So I think in my case, I'm going to go back to the empty string just so it's not confusing.

110
00:07:37,320 --> 00:07:39,390
And I'll also update the read me.

111
00:07:39,810 --> 00:07:41,250
So let's go here with user.

112
00:07:41,250 --> 00:07:41,750
No.

113
00:07:41,940 --> 00:07:51,000
The token is equal to no more than a job location, equal to an empty string and user location is also

114
00:07:51,000 --> 00:07:52,620
going to be equal to an empty string.

115
00:07:53,010 --> 00:07:54,360
Let's save these runs.

116
00:07:54,390 --> 00:07:56,820
Let me fix the read more quickly.

117
00:07:57,970 --> 00:08:01,030
So essentially, this is what you should already see in yours.

118
00:08:01,430 --> 00:08:04,660
And then we just want to complete everything in that part.

119
00:08:04,960 --> 00:08:07,030
So we're navigating their first.

120
00:08:07,030 --> 00:08:08,530
We're looking for two things.

121
00:08:08,650 --> 00:08:13,930
We want to log out the user, one of the user, and I also want to get the user.

122
00:08:14,200 --> 00:08:17,920
So those are two things that I want from my app context.

123
00:08:18,420 --> 00:08:21,610
Well, let's keep on scrolling and simply invoke it here.

124
00:08:22,060 --> 00:08:27,760
So in my button, in the dropdown, I'm going to go with log out user and where I have the button that

125
00:08:27,760 --> 00:08:28,570
displays it.

126
00:08:28,990 --> 00:08:30,220
Well, what do we do?

127
00:08:30,530 --> 00:08:36,110
We go here with user and then I'm going to go with optional training and I'm just going to say name.

128
00:08:36,130 --> 00:08:40,210
So if the user exists, awesome, grab me the name.

129
00:08:40,600 --> 00:08:47,350
So let me navigate back to my application refresh just so everything is up to date.

130
00:08:47,710 --> 00:08:56,050
And the moment I'm going to click on logout, not only I'll clean out the local storage, not only remove

131
00:08:56,260 --> 00:09:02,980
the virus in the state, but since we have the protected root setup, we also right away logout.

132
00:09:03,310 --> 00:09:09,610
So let me just showcase that I'll open up all of these files here and now notice the moment I log out.

133
00:09:09,940 --> 00:09:12,130
I set back everything to the default values.

134
00:09:12,460 --> 00:09:20,610
We kick back the user to a landing page because only the users who have logged in can access the dashboard.

135
00:09:20,620 --> 00:09:23,920
So if I go back here again, we're being kicked back.

136
00:09:24,760 --> 00:09:28,540
And that essentially also the local storage is empty.

137
00:09:28,750 --> 00:09:32,890
So that's how we can set up logger functionality in our application.