Beautiful, and the last thing that I want to set up is the Lagat functionality.
So essentially, we can toggle the sidebar.
We just can't see it yet.
We can display the long on button.
So now let's add the functionality where once we click, we actually set up the values in a state backed
panel.
That's number one.
And then remember, we already have the functionality in place for the dashboard, where dashboard route
is already protected.
So the moment?
We change the values in the state.
Essentially, the moment I set my user back to no use, there will be kicked back to the London Bridge.
How's that going to look like?
Well, once her go here logout and non-war, we're back to the landing one and effectively the steps
are going to be following.
So let me go back to the read me.
We will start over here and start in the actions where we'll set up the action import export yard area
and learn in the app context.
What we want to set up is the log out user.
So first, we're going to dispatch the action and then also remember, at the moment we have functionality
where we have the user to the local storage.
Now we want to do is to remove that user.
Correct.
And we already set up the function, so you need to jog your memory.
Please go back to the app context and you'll find it.
And I just invoke it, and we're good to go then.
We go with a log out user, so we pass this one into a value and that in the reducer, not only I want
to set up the condition for logout user, I also want to get the initial state.
And if you remember when we were setting up the app context, I said that we're going to be exporting
initial state and I'll talk about it later.
And later is now so enormous.
Again, this is our export.
And the reason why we're doing that is because in this case, when I log out the user, I don't want
to return data that state.
So I don't want to return all our current values and then just update few of them.
Instead, what I want to do, I want to return an empty object and essentially grab here the initial
state.
Now what is my initial state?
Is this one over here?
And the reason why we're doing this is because I find it easier since we will be adding more value share.
So there's going to be way more properties and then think about it.
What is easier each and every time you add the property to hop over the producer and add it over here
because you'll always want them back in the default state or you simply export initial state and then
you set it up here as a return.
And of course, the answer is the second one.
Essentially, every time I'll be adding this property as default automatically, once I log out, it
will be set back to the default.
Now your another question probably is OK, but what about these ones?
I mean, why are we specifically go user no token now and blah blah blah?
Well, take a look at the app context.
What is common for all of these properties now that are being set using what local storage?
Correct.
So this is the case where we do want to explicitly override that where yes, we remove those values
from the local storage.
But just because we remove them from the local storage doesn't mean that it will automatically update
the state.
So therefore explicitly, we need to go with here's there are no dokono and you can read the rest.
Now, as far as the bar, we grabbed the log out user and we also get the user.
And the reason why when I get the user, because remember in the button you dropped on toggle button,
I want to display the name at the moment where hardcoded and technically you can go use your dot name,
but it's actually my preference to always check for the user to go with.
OK.
If the user exists, then whether I have the username.
Now, as far as I tested, in this case, it's going to work with the user name.
But remember that in Josh's script, if we're accessing the property on the null, you'll get a big
fat error and essentially your whole application will break.
So again, as far as I tested, it's not going to be the case in here, but I still always prefer checking
whether the actual object exists and only when I'm accessing the property.
I guess it's just one of my many annoying habits and essentially.
There are two options you can either go with an operator or there's also optional training.
Now I'm not going to spend more time on this one, but I do want to mention that yes, in the JavaScript
Nugget series, I do have a video where I cover all of that in detail.
Just keep in mind that the functionality essentially is the same.
I only get the name if the user exists.
And then as far as the log out, well, I just pass in the log out user and to my button in the dropdown.
So let's get cracking.
And essentially, what we want to do is set up the action first.
So let me go here with my two cursors and we're going to go with logout user, correct?
So my girl and an underscore user, let's say that and we're looking for the app context, I guess.
Let's start over there.
So I'm going to go above and I'm going to be looking for to log out user.
OK, good.
Let's keep on scrolling.
Keep on scrolling.
Now I want to set up my function.
So right after the toggle sidebar functionality, we want to go here with Konst, so serve our function,
log out user.
That's the function name.
And as far as the functionality, let's just go with dispatch.
Let's bastion type and then log out user.
And then right after that, I also want to remove the user from the local storage.
And if you need to jog your memory, scroll up over here.
And so essentially, the functionality is the opposite to that of the add user to local storage.
So essentially, we just use remove item instead when we want to set this up in the value, of course.
So we're going to go here with log out user and then once a right away dive into the reducer.
And before we do anything, we want to grab that initial step.
Now that is already set up as a named export.
So we just go here with import and initial state and that is coming from context, which is essentially
right next door run all the way in the bottom right after the toggle sidebar and all that.
We're just going to go with another action type here, and I'm going to be looking for my logout user
and looking to double check that I import that.
Looks like I did.
So once I have this one in place, but then we want to go here and return and I'm looking for that object.
And again, instead of going dot, dot, dot and state, essentially I want to go with my initial state.
I want to go with my initial values and then we want to go with user token, user location, drop location.
And essentially, I mean, in the read me have all of them as known.
But if you take a look at the app context, I want here with empty string.
Again, that's really up to you.
So I think in my case, I'm going to go back to the empty string just so it's not confusing.
And I'll also update the read me.
So let's go here with user.
No.
The token is equal to no more than a job location, equal to an empty string and user location is also
going to be equal to an empty string.
Let's save these runs.
Let me fix the read more quickly.
So essentially, this is what you should already see in yours.
And then we just want to complete everything in that part.
So we're navigating their first.
We're looking for two things.
We want to log out the user, one of the user, and I also want to get the user.
So those are two things that I want from my app context.
Well, let's keep on scrolling and simply invoke it here.
So in my button, in the dropdown, I'm going to go with log out user and where I have the button that
displays it.
Well, what do we do?
We go here with user and then I'm going to go with optional training and I'm just going to say name.
So if the user exists, awesome, grab me the name.
So let me navigate back to my application refresh just so everything is up to date.
And the moment I'm going to click on logout, not only I'll clean out the local storage, not only remove
the virus in the state, but since we have the protected root setup, we also right away logout.
So let me just showcase that I'll open up all of these files here and now notice the moment I log out.
I set back everything to the default values.
We kick back the user to a landing page because only the users who have logged in can access the dashboard.
So if I go back here again, we're being kicked back.
And that essentially also the local storage is empty.
So that's how we can set up logger functionality in our application.