Once our alert component is complete next we're going to start changing our front end application depending
on whether the user has logged in and we're gonna do that in three places where currently we have a
log and link the moment when we're a log in there is gonna be a log uplink instead.
So if we haven't logged in we're gonna have a log logging link if we have logged in and of course we're
gonna have a log out.
Also in an now bar we're going to see a link to a check out page and then within the cart we're gonna
have a different value for our link instead of logging.
We're going to have a check up.
So let's head over back to log in I'm going to show you how our successful logging is gonna look like
John of G.M. at com gonna have a password and then like I said once we log in three things happen instead
of a log and we have a log out instead of an empty space.
We have a link to a check out page.
So now we can navigate there as well as in the card component.
Our link directs us to a checkout and also it's something that you cannot see but essentially we're
also going to restrict the access if we haven't logged in.
So essentially even if the user tries to navigate using the URL you're not going to be able to access
the checkout component.
But again we're gonna get there so let's take step by step and I guess let's start working with a card
because I think that's just gonna be an easiest one.
So I'm going to open up the sidebar and let's grab our cart page.
Now remember within the cart page I just had some hardcoded value for the user.
However of course we have right now our user context.
So I'm going to copy and paste and we're going to say here user context user context and you know what.
With your permission I'm gonna do all three of them.
And that way we can just log in one time and then we don't have to do it all the time.
So hopefully you understand we're gonna set up all the functionality for all these three components
whether that's not bar whether that's a log and link and then we're just gonna test it out one time
otherwise again we're just going to have to keep on logging in and logging out.
So we're going to do a user context it is coming from the user.
And in this case user is not gonna be any more equal to False.
We're going to grab the user using the user context and not just to speed it up get a copy and paste
we're going to look for the user.
So let's look for the user it is coming from the user context.
So of course the values user context and then we're going to scroll down and remember where we had the
link and we were checking for the user.
We're not checking for user anymore we're checking for the token because the user object is going to
exist but the token might be no.
And that's the reason why we're gonna set up as a user token instead of a user.
And you know what.
I'm gonna head over to a bigger browser window and I'm gonna get rid of this network on the rise not
only we're gonna check each and every time but if there's gonna be a slow connection it's gonna be even
more annoying.
So let me refresh just for sure we have it and now we have our car.
All right.
Now what else we would want to do.
Well remember we had a header.
So within the header we had enough bar so let's look for our header there is our header again same spiel
we first would want of course grab our user context.
So we're gonna head over up and then right after the car link we're gonna get our user context so user
context.
Again it's coming from and then we're looking for context and then we're looking for the user.
And we didn't add that particular link but the way it's gonna look like is right after the product.
I'm going to set up again my conditional where I'm going to be checking for the user but of course I
kind of check the user because I haven't the structure.
So I just skipped ahead a little bit.
We're looking for the user and that is equal to a react use context.
And then of course we're passing in the user context so user context or passing in.
And then again we're checking for the same thing.
If the user token is equal to some kind of value so it's not now then we're going to display our checkout.
So we're gonna say all right if that value is true then we're gonna display a lie and lie and we're
going to have our link.
So we're going to our check out.
But by the way again we're going to cover that in a sec.
But just because we don't have the link doesn't mean that we cannot navigate to check our page even
if we haven't logged in we haven't restricted the access.
That is something that we're gonna do in a future videos but for now we're just going to restrict access
in the not bar.
So we're not gonna show the length and the value is going to be hey check out.
And once I say I'm gonna get an error because it is not user context of course it is a bit confusing.
It is a use context.
Let's say it one more time.
And of course since we have logged in because again if we're gonna check our local storage last time
we checked in we haven't logged out yet.
Then of course we are displaying our checkout page.
So now we can navigate there and the same works for our car.
Now we're displaying a link to a check out page not to a log in page.
And lastly let's set up our log in link component.
So first of all it's important.
We're gonna head over let's say right after a user context.
When I say import logging link that's gonna work pretty much the same as the cart link there's just
gonna be there a bit more functionality from and then we're gonna navigate to components then within
the components we're looking for the logging link in the same how we set up the cart link we're gonna
copy and paste we're gonna call this a log in link log and link and now we're gonna head over to our
logging link because currently we have a adding one and we're gonna do more functionality order.
So let me open up the sidebar.
I'm gonna look for our logging link component and we're going to start by imports.
So first we're gonna get a link from react when our gnome link from react wrote her down.
Then we're gonna get our user context import user context user context it is coming from our user.
So let's head over the context then we have the user and we're going to copy and paste and we're gonna
get also a court context.
Why are we getting the court context.
Well because once I log out I would want to clear the card.
Remember when we were setting up the context for the card we had the function correct.
We had a remove item increase item and then all the Winterbottom we had our clear card.
So this is exactly what we're going to do right now.
We're gonna save it.
And within the log the link we're gonna use that particular function.
And this is of course coming from the card.
Let me close the sidebar and I'm done with my imports.
Now within the logging link first I would like to access the values that I'm looking for from the art
context as well as the user context.
So let's go with concern from the user context.
I'm looking for the user value.
So depending on that value again I'm going to display particular things in my g six as well as user
logout because I would want to set up my logger functionality here.
We're going to look for react in this case I'm going to type it properly use context we're passing in
the user context in this case we're going to copy and paste it is coming from the card context in this
case then we're gonna head over and we're going to look for clear cut instead of user.
So we're going to look for clear cut and now we can set up our J six as far as J six was get her of
d having one first then we're going to have our if statement like so we're gonna have if and I'm going
to check if user again token exists then I would want to do one thing and if it doesn't exist then I'm
gonna do something else.
So if the user does not exist it's just gonna be simply a link that we're turning so we're going to
return a link to and this is gonna be to a log in page and then as a text we're going to return a log
and that's all we have to do then.
If the user does exist then of course we need to set up a log of functionality and we're going to do
that by button.
So there's gonna be a button then we're gonna have click.
So we're gonna be listening for a click event.
We're gonna pass in the anonymous function first and we're gonna call user logout.
So we're gonna log out our user as well as we're going to clear the card.
So clearly card both functions coming from the context and then we're gonna say logout button we're
going to save it like so and then in this case I'm gonna have an error because I'm not returning it
of course.
So I forgot to have the return and now everything is gonna work out fine.
And there's one thing missing that is the styling.
So why don't we do this.
Why don't we say Button class name and then we're gonna look for a log in B10 and once we set up our
log and link component going to head over back to our header and we're just gonna remove our log and
link.
That's step number one.
Gonna move our log and link above the card link.
Let's say that and now let's try to log out as well as logging.
Again we're going to head over to a bigger browser window to refresh since we have already logged in.
Of course we have a logo then check it out once I click it.
I'm gonna have my logging.
So let's try to log in.
I'm going to go with John and Jim I'll dot com turn whatever password and if we're successful then we're
going to have our checkout link.
We're going to have the logout link instead of a log in and then in the cart page we're going to see
of course a link to your account page it's tried to submit.
We are successful.
We have a log.
Then we are displaying the user name in our alert.
Now of course we have a checkout page.
We have a logout link as well as within the cart.
Of course we're pointing to a checkout page.
So if let's say you want to log out then I'm removing my items from the user and if I'm going to head
over to inspect and see that in the application right now my cart is empty as well as there is no user
key in my local storage.