In order to control our front end if the user has logged in or the user hasn't logged in we're gonna
have to set up another context.
So so far we have two contexts.
We have one for the product as well as the card and now last one is gonna be the user where we're going
to set up our context.
We are gonna have some functions.
So essentially if our log in was success then of course where we have if response is true then we're
going to log in our user.
And once we log in our user again then we're going to display different links in a bar.
Then remember also in the card we have an option of either logging in or we had an option of showing
in fact the checkout link.
So that's another functionality we're going to control and everything else that user can or cannot do
in our application.
And we're gonna start again somewhat simply by just setting up a user context.
And again since it is not our first rodeo I'm gonna try to move somewhat swiftly.
Let me clear the console first and then we're going to import react import react from react like.
So once we import to react next I would want to set up my user context so const user context and we're
gonna go with react and then create context like so.
So let's set up our context.
Then again we have our provider as well as the consumer.
And I'm just gonna set up a separate function a function user provider provider that is going to return
the user context provider.
And again we need to have children because of course they're gonna we're gonna wrap everything within
the index.
Yes.
And then we would want to return.
And then we're returning a user context provider.
Now value's just gonna be simple user for now.
But of course eventually it's gonna be a little bit more complicated.
And then of course we would want to render children and I'm going to set this up as named export.
So first I'm gonna export user provider.
And next we're going to export user context user context like so.
And now let's head over to index let's grab the user provider and wrap our hold up in the user provider.
We're gonna head over to index.
Let's find it.
We have the index.
Now that was the named import.
So again let's cut copy paste.
It's not a card provider.
It is a user provider.
It is coming from the user context.
And then I would want to wrap everything the product the card as well as the app.
So we're gonna set this up when I have a user provider.
Let's just get it down and add a comma in the proper place.
Let's save it.
And then I guess in order to test it out whether everything has been set up correctly back in the logging
we're gonna import my user context so let's import user user context from let's look right now for our
context.
So context then we have the user context.
And since it is a string value somewhere within my log component maybe right after we have the comment
I'm going to send this equal to I value and receive value is equal to react use context.
Remember that was the hook we used and then we pass in the user context.
So user context context once we do that let's just console log when we have as a value whether we're
getting back or user if we are getting back the user which we do all the functionality is correct at
least our initial one and now we can just start setting up everything within the user context.