Nice work, our initial functionality works really, really well.
We can register the user, we can set up everything in a state, but the problem is going to be that
if the user refreshes the page, we won't persist those values.
And why is that going to be the problem?
Because eventually in a dashboard, we'll check for that user.
And if the user does not exist well, then don't just log the person out.
In order to fix that, we need to process this in local storage.
So it may just showcase the problem first.
So I'm going to go here with Susan Van and I will be equal to Susan at gmail.com.
And then let's batten dummy values.
Let's register.
We are good to go.
Notice we have everything.
We're back in the dashboard page.
But if I refresh more, do you know I don't have anything anymore here?
User no.
Token No.
And the same goes for location now.
In order to set everything up in the app, context address will create a function add user to local
storage, which is going to be looking for three things Can we be looking for user token and location?
Why am I asking for these three things?
Because that's what I know I have in the response, correct?
And then in order to add something to what was storage, we go with local storage, said Item.
And then user is going to be the only one where we need to string a five because remember, we can only
store strings and we're getting back the object now when it comes to token location.
Well, both of them are pretty much strengths.
So we can right away go to the item and then token.
Now I'll right away also set up remove from local storage because as you can see, functionality is
pretty much the same on this case.
We are removing that and we'll use this one more on, for example, we logout.
And not in registered user.
Right after we successfully get the response back.
So in the tribe, look, I want to invoke my function again.
I have the object model for three things over here and at the very, very end, we also want to pull
them out at the initial setup.
So once we start up the application, once we refresh the page, I want to go to local storage and look
for all of these three things.
I'm an initial state now.
I'll check for user and if the user exists over here, then I'll have to pass it.
Because remember again, we start as a string, but we want to use it as an object.
If it doesn't exist, we go with no.
And here token is equal to token and then user location or empty string.
So.
Let's start setting everything up where I'm going to go to map context online right after my register
or not to do it above.
So here and we're going to go with Konst and I'm looking for that ad user to local online storage.
Now, or pass in the object here.
So let's say here, user token and then location, and I'll try not to repeat myself how I know that
I'll have all of those three values.
And then let's just say with a local storage and then set item online user.
And like I just said, here's an object, so we need to go with JSON string or for a minimal processing
the user.
And then I have two more.
I have local storage, then set item.
And in this case, I'm looking for token token over here and I'm going to name my value token.
And as far as the actual value that will be equal to the token.
Let's copy and paste.
And here we're looking for location and the item name will be also location value in order to speed
everything up.
We're going to go with Konst and then a remove user from the local storage and in the function body.
We want to go here with local storage and then we go with a remove item and then we just want to pass
all three of them.
So token user and location.
So let's set them up one by one.
This is going to be equal to user and nine and we're going to have the location as well when we want
to use this function.
The first add user to the local storage and where we have the registered user right after we dispatch,
we also want to invoke it.
Right.
So let's say here, add users to the local storage and let's passing the user your token as well as
the location.
And then lastly, since I want to set up my user the moment application loads, let's scroll up.
Let's grab all of those things from the local storage on initial load.
And I'm going to do that right above the initial state, just so it's clear when is that happening?
And here I'm going to go with token and then that one is equal to the local storage and not get item.
And in here, I want to pass in the token.
So copy and paste and here we just need to change these rules around.
That's it.
So I'll have two of them.
I'll say I'm looking for user and the last one is going to be here, the location.
So let's do the same thing.
Let's set up a location.
And now in the initial state.
What do we want to do?
Well, I want to check for my user property and then set up deterring operator.
So if the user exists, then let's go with pass and then pass the user, so we'll get back our object.
If not, it's going to be equal to no more than token will be equal to a token.
And then when it comes to these to the user location of the job location, I want to check for my location
and set it equal to an empty string.
If there is no value in the local storage, but you know what I think is going to make a little bit
more sense if I go use their location, at least to me.
So I will say here user location, and if it doesn't exist, then we'll go with empty string.
So this should do it.
So let's quickly test that out.
I'm going to go to the big browser window.
I'll make sure that there's nothing in the local storage because I mean, it might save it to right
away online and let me navigate to a register.
I want to register.
Let's go with Anna.
So, Anna, at Gmail dot com.
I'm learning here on how to set up a password and if everything is correct.
Not only I have the honor in my components, but I also have in local storage.
And what that means is that when I refresh, I also should see that in my state and hours over here,
I still have all the values.
And with this in place now, I can focus on the log in user functionality.