1
00:00:00,450 --> 00:00:00,700
Okay.

2
00:00:00,750 --> 00:00:07,530
And once we're done with app context, now let's work in the reducer where we want to handle get user

3
00:00:07,530 --> 00:00:08,130
begin.

4
00:00:08,400 --> 00:00:15,540
We want to handle get current user success and also we want to tweak the logout user.

5
00:00:16,740 --> 00:00:22,050
So essentially, when it comes to get current users begin, we want to set up user loading.

6
00:00:22,080 --> 00:00:22,650
True.

7
00:00:23,040 --> 00:00:26,200
And if there is any alert, then we just go with false.

8
00:00:26,220 --> 00:00:28,530
And of course, we copy the state values.

9
00:00:29,130 --> 00:00:35,790
Then as far as the success, the copied state values, we set user loading equal to false.

10
00:00:36,620 --> 00:00:42,590
And as far as the user, user location and job location, well, we have those values right now in a

11
00:00:42,590 --> 00:00:44,000
payload, correct?

12
00:00:44,740 --> 00:00:46,330
We're adding them over here.

13
00:00:47,300 --> 00:00:49,520
Payload user and location.

14
00:00:49,880 --> 00:00:55,670
And when it comes to the logo, we simply want to set up a user loading false.

15
00:00:56,450 --> 00:00:59,570
We want to set up the user equals to null.

16
00:00:59,630 --> 00:01:04,760
I believe we already have the user equals ethanol, but we definitely want to set up user loading to

17
00:01:04,760 --> 00:01:05,390
false.

18
00:01:06,200 --> 00:01:08,480
So let's start working on that.

19
00:01:08,840 --> 00:01:09,960
Where already have the imports?

20
00:01:09,990 --> 00:01:11,210
Okay, that's good.

21
00:01:11,570 --> 00:01:12,740
So let's just.

22
00:01:13,550 --> 00:01:17,050
Scroll all the way to the change page.

23
00:01:17,060 --> 00:01:19,790
And let's add those conditions.

24
00:01:19,790 --> 00:01:29,750
Let's say if an action type and if it is equal to get current user begin, then like I said, we want

25
00:01:29,750 --> 00:01:30,890
to copy the state first.

26
00:01:30,890 --> 00:01:35,750
So the other that by the way, we want to return that so that or that state.

27
00:01:36,550 --> 00:01:38,620
One user loading.

28
00:01:39,850 --> 00:01:41,200
And that is equal to true.

29
00:01:41,200 --> 00:01:44,010
And yes, basically we're setting this twice.

30
00:01:44,020 --> 00:01:49,720
We already have by default, and now we're setting it one more time show alert, and then we'll set

31
00:01:49,720 --> 00:01:51,190
it equal to false.

32
00:01:51,730 --> 00:01:53,150
That's the first thing.

33
00:01:53,170 --> 00:01:54,880
Now, let's copy this.

34
00:01:55,540 --> 00:02:00,670
And we just need to change some things around where the action is not going to be begin is actually

35
00:02:00,670 --> 00:02:02,560
going to be success over here.

36
00:02:03,040 --> 00:02:05,700
Then as far as the return, we want to go with State.

37
00:02:05,710 --> 00:02:05,890
Okay.

38
00:02:05,920 --> 00:02:06,670
That's good.

39
00:02:07,090 --> 00:02:10,750
User loading is going to be false once we're successful.

40
00:02:11,110 --> 00:02:14,110
And as far as the show alert, well, we can just remove it.

41
00:02:15,670 --> 00:02:21,190
Now let's also set user the user location and job creation.

42
00:02:21,190 --> 00:02:25,060
So a user is equal to action payload.

43
00:02:25,850 --> 00:02:26,900
And a user.

44
00:02:27,140 --> 00:02:29,000
And let's copy this two times.

45
00:02:29,000 --> 00:02:31,220
And now we're just going to change the names over here.

46
00:02:31,340 --> 00:02:36,770
So first of all, we want to change what we're actually getting.

47
00:02:36,770 --> 00:02:44,780
So from the payload, we want to get the location and here we want to set it equal to a user location.

48
00:02:45,350 --> 00:02:48,980
And also, we want to do that with a job location.

49
00:02:48,980 --> 00:02:51,050
So a job location.

50
00:02:51,830 --> 00:02:54,050
So we're pretty much done with the reducer.

51
00:02:54,080 --> 00:02:57,290
Everything is working fine, but we do need to make some changes.

52
00:02:57,290 --> 00:02:59,300
Or I'm sorry, logout the user.

53
00:02:59,780 --> 00:03:03,740
How about you see how easy it is to skip something?

54
00:03:03,740 --> 00:03:06,410
So let's see where we have the logout user.

55
00:03:06,410 --> 00:03:10,190
I probably should have used the command f, but.

56
00:03:11,710 --> 00:03:12,660
Yep, here it is.

57
00:03:12,670 --> 00:03:13,800
So log out user.

58
00:03:13,810 --> 00:03:16,060
We don't care about the token.

59
00:03:17,250 --> 00:03:18,960
So we can remove that one.

60
00:03:19,140 --> 00:03:20,220
The job location.

61
00:03:20,220 --> 00:03:21,270
User location.

62
00:03:22,430 --> 00:03:24,430
That should be in the initial state.

63
00:03:24,940 --> 00:03:27,760
So that shouldn't change as well as actually, you know what?

64
00:03:28,060 --> 00:03:31,150
The users also are going to be null.

65
00:03:31,270 --> 00:03:33,880
So, I mean, we could remove it.

66
00:03:33,880 --> 00:03:34,420
We can leave.

67
00:03:34,420 --> 00:03:35,710
It doesn't really matter.

68
00:03:36,190 --> 00:03:43,390
Let's go here and let's add that user loading and we want to set it equal to false.

69
00:03:43,570 --> 00:03:47,800
Basically, that's what we want to do because by default it is true.

70
00:03:48,460 --> 00:03:49,470
Keep that in mind.

71
00:03:49,480 --> 00:03:52,110
So the value and the default state is true.

72
00:03:52,120 --> 00:03:57,250
That's why we specifically need to go with user loading and false.

73
00:03:57,560 --> 00:03:58,540
And that should do it.

74
00:03:58,540 --> 00:04:00,400
I hope for the reducer.

75
00:04:01,240 --> 00:04:03,850
And now let's go to that protected route.

76
00:04:04,420 --> 00:04:07,090
So let's look for pages, protected route.

77
00:04:07,360 --> 00:04:10,020
And we want to import two things.

78
00:04:10,030 --> 00:04:11,890
We want to import loading.

79
00:04:12,680 --> 00:04:16,279
And we want to import user loading from the state.

80
00:04:17,089 --> 00:04:21,589
Again, the reason why we're doing that, because this runs automatically.

81
00:04:21,890 --> 00:04:25,130
So we want to kind of stop this condition.

82
00:04:26,300 --> 00:04:30,140
We want to display that loading while we're actually fetching the user.

83
00:04:30,140 --> 00:04:38,270
And then if everything is correct, then we either kick the user out back to learning or we show the

84
00:04:38,270 --> 00:04:38,660
children.

85
00:04:38,660 --> 00:04:39,840
Hopefully that is clear.

86
00:04:39,860 --> 00:04:46,940
So first let me get the user loading from the app context and then you probably have a question.

87
00:04:46,940 --> 00:04:50,520
You're like, Well, what if I don't want just loading?

88
00:04:50,540 --> 00:04:52,610
What if I want to set up some kind of page?

89
00:04:52,910 --> 00:04:55,610
The answer is you can, let's say.

90
00:04:56,420 --> 00:05:00,740
If the user is loading or you want to display more than just that little spinner in corner.

91
00:05:01,010 --> 00:05:02,660
You can definitely set up a page.

92
00:05:02,660 --> 00:05:05,040
But in my case I just went with loading.

93
00:05:05,060 --> 00:05:05,960
What do you need to do?

94
00:05:05,990 --> 00:05:12,260
Well, most likely you will set up a component, set up all the layout and all that, and then you could

95
00:05:12,260 --> 00:05:14,510
import that instead of the loading.

96
00:05:14,570 --> 00:05:19,640
So in my case, I'll simply go with import or, you know, I think I can cheat a little bit.

97
00:05:19,670 --> 00:05:21,620
I think I can use the auto import.

98
00:05:21,890 --> 00:05:23,420
So let me remove this.

99
00:05:23,510 --> 00:05:24,920
I have user loading.

100
00:05:25,680 --> 00:05:30,450
And basically, if we're loading, if we're still fetching that user or whether we want to do well,

101
00:05:30,450 --> 00:05:35,580
we want to return some kind of loading spinner or loading page or loading something.

102
00:05:35,580 --> 00:05:36,040
Right.

103
00:05:36,060 --> 00:05:41,310
So I'm going to go here with loading and I'm just going to hope that it gets imported.

104
00:05:41,310 --> 00:05:42,420
And of course, it doesn't.

105
00:05:42,810 --> 00:05:43,200
Yeah.

106
00:05:44,300 --> 00:05:45,260
No surprise there.

107
00:05:45,260 --> 00:05:46,820
So let's go with loading.

108
00:05:47,390 --> 00:05:50,750
And that is coming from and then we need to go one level up.

109
00:05:51,570 --> 00:05:52,350
Components.

110
00:05:52,350 --> 00:05:56,250
And then we're looking for the loading one over here.

111
00:05:56,370 --> 00:05:57,400
Okay, let's save that.

112
00:05:57,420 --> 00:06:02,850
And once we have added all of these changes, now let's go to the browser and test that out.

113
00:06:03,210 --> 00:06:04,350
So essentially.

114
00:06:05,040 --> 00:06:06,480
When we refresh.

115
00:06:07,320 --> 00:06:11,130
We should be able to go back to the dashboard.

116
00:06:11,980 --> 00:06:15,250
I mean, if the cookie is valid, Correct.

117
00:06:15,340 --> 00:06:17,380
So I'm on a dashboard right now.

118
00:06:18,130 --> 00:06:19,120
Or refresh.

119
00:06:19,240 --> 00:06:21,590
We'll see that little loading spinner again.

120
00:06:21,610 --> 00:06:22,690
That's what I'm talking about.

121
00:06:22,720 --> 00:06:27,520
If you want to set up, let's say a layout where you have the loading in the center, you can definitely

122
00:06:27,520 --> 00:06:28,150
do so.

123
00:06:28,540 --> 00:06:29,580
I just didn't see the point.

124
00:06:29,590 --> 00:06:33,370
That's why I just added that little loading spinner and yep, everything's correct.

125
00:06:33,370 --> 00:06:40,330
So we run, get current user, we're successful, we get back 200 and then we write away on the stats.

126
00:06:40,360 --> 00:06:40,640
Why?

127
00:06:40,660 --> 00:06:42,070
Well, because we're in the stats page.

128
00:06:42,070 --> 00:06:46,420
If I'm going to be on a job, then essentially I'll just check the user.

129
00:06:47,110 --> 00:06:50,300
And then if everything's correct, I'll display that page again.

130
00:06:50,320 --> 00:06:56,700
Think of the request for get current user as a replacement for local storage.

131
00:06:56,710 --> 00:07:00,820
Again, we're not saving anything anymore in local storage.

132
00:07:01,030 --> 00:07:05,350
Essentially, we all the time dynamically get the user data.

133
00:07:06,130 --> 00:07:12,010
Every time we, let's say, log in or register or when we refresh, because again, it's not stored

134
00:07:12,010 --> 00:07:19,270
anywhere apart from the state and then state every time it goes back to that initial state, every time

135
00:07:19,270 --> 00:07:19,780
we refresh.

136
00:07:19,780 --> 00:07:22,810
That's why we need to get that current user.

137
00:07:22,840 --> 00:07:28,420
Now, let's set out what happens if, let's say the cookie has expired.

138
00:07:28,420 --> 00:07:29,920
So let me go to the application.

139
00:07:30,040 --> 00:07:33,970
Let me remove and check it out and I'll be logged out.

140
00:07:34,060 --> 00:07:40,180
So if I go back to the network, notice I get this get current user, it's 401.

141
00:07:40,180 --> 00:07:46,480
So we get that error back and therefore we right away log it out because that's what we have in our

142
00:07:46,480 --> 00:07:47,320
interceptor.

143
00:07:47,500 --> 00:07:52,780
We log out the user, we hide the user loading and all that, and we're good to go.

144
00:07:53,260 --> 00:08:00,430
So in the next video, we will set up essentially a logic on landing page where we'll check for the

145
00:08:00,430 --> 00:08:00,970
user.

146
00:08:01,000 --> 00:08:02,980
This is something that people have been asking.

147
00:08:02,980 --> 00:08:07,540
So I decided that this is a great time to add that feature.