Okay.
And once we're done with app context, now let's work in the reducer where we want to handle get user
begin.
We want to handle get current user success and also we want to tweak the logout user.
So essentially, when it comes to get current users begin, we want to set up user loading.
True.
And if there is any alert, then we just go with false.
And of course, we copy the state values.
Then as far as the success, the copied state values, we set user loading equal to false.
And as far as the user, user location and job location, well, we have those values right now in a
payload, correct?
We're adding them over here.
Payload user and location.
And when it comes to the logo, we simply want to set up a user loading false.
We want to set up the user equals to null.
I believe we already have the user equals ethanol, but we definitely want to set up user loading to
false.
So let's start working on that.
Where already have the imports?
Okay, that's good.
So let's just.
Scroll all the way to the change page.
And let's add those conditions.
Let's say if an action type and if it is equal to get current user begin, then like I said, we want
to copy the state first.
So the other that by the way, we want to return that so that or that state.
One user loading.
And that is equal to true.
And yes, basically we're setting this twice.
We already have by default, and now we're setting it one more time show alert, and then we'll set
it equal to false.
That's the first thing.
Now, let's copy this.
And we just need to change some things around where the action is not going to be begin is actually
going to be success over here.
Then as far as the return, we want to go with State.
Okay.
That's good.
User loading is going to be false once we're successful.
And as far as the show alert, well, we can just remove it.
Now let's also set user the user location and job creation.
So a user is equal to action payload.
And a user.
And let's copy this two times.
And now we're just going to change the names over here.
So first of all, we want to change what we're actually getting.
So from the payload, we want to get the location and here we want to set it equal to a user location.
And also, we want to do that with a job location.
So a job location.
So we're pretty much done with the reducer.
Everything is working fine, but we do need to make some changes.
Or I'm sorry, logout the user.
How about you see how easy it is to skip something?
So let's see where we have the logout user.
I probably should have used the command f, but.
Yep, here it is.
So log out user.
We don't care about the token.
So we can remove that one.
The job location.
User location.
That should be in the initial state.
So that shouldn't change as well as actually, you know what?
The users also are going to be null.
So, I mean, we could remove it.
We can leave.
It doesn't really matter.
Let's go here and let's add that user loading and we want to set it equal to false.
Basically, that's what we want to do because by default it is true.
Keep that in mind.
So the value and the default state is true.
That's why we specifically need to go with user loading and false.
And that should do it.
I hope for the reducer.
And now let's go to that protected route.
So let's look for pages, protected route.
And we want to import two things.
We want to import loading.
And we want to import user loading from the state.
Again, the reason why we're doing that, because this runs automatically.
So we want to kind of stop this condition.
We want to display that loading while we're actually fetching the user.
And then if everything is correct, then we either kick the user out back to learning or we show the
children.
Hopefully that is clear.
So first let me get the user loading from the app context and then you probably have a question.
You're like, Well, what if I don't want just loading?
What if I want to set up some kind of page?
The answer is you can, let's say.
If the user is loading or you want to display more than just that little spinner in corner.
You can definitely set up a page.
But in my case I just went with loading.
What do you need to do?
Well, most likely you will set up a component, set up all the layout and all that, and then you could
import that instead of the loading.
So in my case, I'll simply go with import or, you know, I think I can cheat a little bit.
I think I can use the auto import.
So let me remove this.
I have user loading.
And basically, if we're loading, if we're still fetching that user or whether we want to do well,
we want to return some kind of loading spinner or loading page or loading something.
Right.
So I'm going to go here with loading and I'm just going to hope that it gets imported.
And of course, it doesn't.
Yeah.
No surprise there.
So let's go with loading.
And that is coming from and then we need to go one level up.
Components.
And then we're looking for the loading one over here.
Okay, let's save that.
And once we have added all of these changes, now let's go to the browser and test that out.
So essentially.
When we refresh.
We should be able to go back to the dashboard.
I mean, if the cookie is valid, Correct.
So I'm on a dashboard right now.
Or refresh.
We'll see that little loading spinner again.
That's what I'm talking about.
If you want to set up, let's say a layout where you have the loading in the center, you can definitely
do so.
I just didn't see the point.
That's why I just added that little loading spinner and yep, everything's correct.
So we run, get current user, we're successful, we get back 200 and then we write away on the stats.
Why?
Well, because we're in the stats page.
If I'm going to be on a job, then essentially I'll just check the user.
And then if everything's correct, I'll display that page again.
Think of the request for get current user as a replacement for local storage.
Again, we're not saving anything anymore in local storage.
Essentially, we all the time dynamically get the user data.
Every time we, let's say, log in or register or when we refresh, because again, it's not stored
anywhere apart from the state and then state every time it goes back to that initial state, every time
we refresh.
That's why we need to get that current user.
Now, let's set out what happens if, let's say the cookie has expired.
So let me go to the application.
Let me remove and check it out and I'll be logged out.
So if I go back to the network, notice I get this get current user, it's 401.
So we get that error back and therefore we right away log it out because that's what we have in our
interceptor.
We log out the user, we hide the user loading and all that, and we're good to go.
So in the next video, we will set up essentially a logic on landing page where we'll check for the
user.
This is something that people have been asking.
So I decided that this is a great time to add that feature.