And once we have the get current user set up on a server, now let's do the same thing on the front
end.
And since this video might get long, I will actually split it up in two.
So in the first video, we'll set up the app context and then in the following we'll set up the reducer.
So here's the plan.
We want to set up these two actions.
And you'll see in a second why we don't need the error.
We'll set up the imports and app context as well as the reducer.
And the first thing we want to do is set up in the initial state user loading.
So this one will be a little bit different than is loading.
This one we will only use when we're fetching the current user.
So essentially the idea is following.
Every time we refresh the application will perform a request, get current user, which of course is
going to go to the route we just set up.
And essentially we want to get to things.
We want to get the user and location to things that we're already sending back from the server.
Correct.
And then we want to dispatch that.
We want to essentially set it up in a state.
Now, why do we want to do that?
Well, because we don't have any local storage anymore.
Correct.
And we do need to get that data when we refresh.
Yes.
When we log in and let's say we navigate that around our application, everything is still stored in
the state.
So everything is working.
But once we refresh that data, the user and location is not.
In the initial state.
Correct.
User is null.
And location is an empty string.
And we used to fix that.
With local stores.
Now, we don't have that anymore.
So we perform a request the moment we refresh the application which fetches that data.
And if everything is correct, then essentially what we do, we set up that user and.
We don't want that protected route to kick us out.
Remember, in the protected route, we're checking for the user.
And once we refresh, it will automatically run this code.
So that's why we need that user loading that is going to stop the protected us from logging us out will
just display the loading.
And then once we find out whether the cookie and the JWT is valid, then we display the user.
Hopefully this is clear again.
Hopefully.
I'm going to be able to repeat quite a few times.
So you definitely get it.
And as far as the error, why do we need essentially a action?
Well, think about it.
We have only two options when we perform this request.
Either we get back to essentially a valid user or it's going to be 401.
There are no other options.
Now, just let's say for the kicks we can add here logout user.
But in general, we'll log out this user already where in the interceptor.
Remember, in the app context, we already have interceptor that does that.
Correct.
So and here in the error you can simply log it if you want.
But in my case, I just went the long route where I'm going to check for response status.
And if it's for one that I'm simply returned because I already know that essentially the user has been
logged out where in the interceptor.
So let's start working on this one.
Now, in order to save a little bit of time or grab these two things, essentially the actions we want
to navigate there and we want to copy and paste, I believe my last one is change page.
So let me copy and paste.
Okay, Good.
Then we want to go to context.
And we want to import those two things.
So let me first just grab this one over here.
And then in the app context, copy and paste.
Or here as well.
And let's set it up as sex.
Okay, good.
And then we want to grab both of them in the reducer.
Okay, awesome.
And like I said, in the app context, we want to set up user loading.
That's the first thing we want to do.
And no, we don't want to use is loading, because keep in mind that we're using that is loading essentially
in different places in our application.
So if we'll add that one to the protected route, then we'll have that loading spinner essentially in
front of.
Every request, and that's not what we want to do.
So let's go here with user loading.
Again, this is very specific.
This only going to run when we refresh the application.
And yes, we want to set the default true, even though an reducer will still set it as true.
Why?
Because the code for dashboard, the protected route runs right away.
So if this is going to be false and then while you're fetching your set at equal to true, it doesn't
matter, you'll be already logged out.
Hopefully that is clear.
That's why it's very, very important.
Set up new loading and set it equal to true.
Yes, those are the two things we want to do.
Then let's keep on moving and we want to invoke this.
Essentially every time the application starts.
Now, when is that?
Well, when we have a use effect.
Correct.
Empty dependency, right.
That's what we need to do.
So first, let's just set up the function and let's right away invoke it and then we'll add the logic.
Let's go get current user.
This is going to be a sync function in here.
Let's set up.
The logic.
So let me add the curlies.
Eventually it's going to be there.
For now, I want to go with use effect and I simply want to invoke it again when well, when the application
starts.
So essentially, every time we refresh, that's our goal over here.
Let's go with get current user and let's invoke it again.
This happens pretty much in our case when we refresh the application, this is what we're going to run.
Now, as far as the logic, we want to dispatch first the begin.
So let's set up this patch, let's say type and then get current user begin.
Then let's go with that.
Try and catch.
And we want to go with counsel.
I know that there's going to be data, of course.
It is equal to a weight.
And we're going to go with all the fetch.
And what was the URL?
Or we need to go with forward slash auth and then forward slash get.
Current and user.
Now what are we sending back from the server?
We have const, user and location.
So we structure both of these things out of the data and then of course we'll pass it down.
To our reducers.
So let's go with this patch.
The type is going to be get user success in this case.
And we want to go with comma payload.
I'm sorry, not the package payload.
And that will be equal to an object.
And in here, we'll passing the user and location like so.
Okay, good.
And then, like I said, as far as the error, the heavy lifting is going to be done by the interceptor.
We already have that code that checks for the 401.
Because, again, we have only two options with this Route 200, which brings back all the user data
or 401.
That's it.
But I'll still go the long route where I'll say error, but you don't have to error.
Then response and then status you that is equal to 401.
Then I'll simply return over here.
I'll say return.
And if let's say for some I don't know.
We had reason we passed this.
I'll still go with the log out user.
Okay, good.
So that pretty much completes the app context.
And then.
In the following video, we want to set up the reducer logic.