Okay.
So what we have here is we have a way to get the token from our API, but we need to save it somewhere.
You know that we are using that token from here.
So this is the token we eventually want to have it in the service.
But what we want to do is we want to have that token and being available in many places in our application.
So how can we do that?
And that's another lesson.
It doesn't have to be a token, but it's something very useful to have in a react to know how to handle
this.
It's a context.
So what we will do in this video will enable context for this.
So we will go to index here.
And what we have is we have that router provider here.
But we need to have a proper component because we want to start something in a component.
At the moment this is like a browser router that we've created, and this is the component that we imported
from that library.
So I will create a my own component.
I will do a function.
Uh, component is just a function.
So I will do router and I will name it with capital R, and then it will be a function that will return.
And what we want to return is basically this one.
So I will get a cut it from here and I will put it there.
So basically if I will take this and if I will put it back here, basically what we've done is we just
wrap it with another function.
So we have router here.
Router will create our router provider.
This will be created.
So basically we added extra layer on that.
So if I will go back here you see everything is the same as it was.
So going back here what I did that gives me it can I can do extra things here so I can use state and
so on.
But before we will do that, what I want to do is I want to create a context.
So I will import another method from react.
So it will be create context method.
So I will take this and we'll create a context here.
So I will have constant and I will say let's name it token context.
It doesn't have to be for a token.
And but you can name it whatever you like.
But basically this is a method that will call it so token context it will be created here.
So once I have that that object.
So if I have that router provider here, what I can do is I can wrap it with token context provider.
So basically I have a token context provider here.
And I will put it like that.
My router provider will be inside token provider.
So that means in the token context.
So we've created context and we wrap it like that.
So that means everything here inside which is basically all my applications will have an access to that
context.
So what we can do here and that's why we put it in a separate component here.
We could use a stage here and a half that way to start the token in this component.
So let's import use state.
And from here what I will do.
We've done it many times.
I will create a token and method set token like that.
And then it will be use state.
And we can provide a default value of null.
For example we don't have a token at start.
So what I can do now is I can get this and I can put put inside a provider.
So in the provider I can do something like a value.
And inside there I can create an object and put token and set token there.
That means the value token will be available and also a method will be available inside the provider.
So any component inside here, which is basically anywhere in the application, will be able to access
that token and set the token method From there.
So that means if we'll set the token from one of the component, it will be saved here in the router
and it will be passed to the token.
So other components could use that token as well.
So I will save this.
At the moment we have everything set up here.
But what we want to do is we want to go here into our application.
Wherever we had that console.log and we had that token, we want to set that token.
So how can we do that to use that context from here?
Basically there is a hook that is called usecontext context.
And here it's similar to use state.
So I will do constant.
But I'm not going to do a square brackets.
It has to be curly braces here.
And I will have token and set token.
Those are the methods that I pass in a value there.
And I will have usecontext.
So basically we need to tell what context we use and how can we tell.
Because you might have more more than one context in your application.
So we need to go back here.
And when we've done that a context here we need to export it.
So basically our text content is exported and we need to import that from the component.
So if I would go here I will do import and basically token context.
So I can copy that token context that was in default one.
So I need to wrap this in a curly braces.
From.
And it will be one folder up index okay.
So basically this is the token context that I've created here.
So this is this is a rapid because we use it in the provider.
That way I will export it.
So I can import that here.
And from the token I can say this is the token I'm using.
So the context I'm using this is the context I want to use.
And from that context, if you remember we actually passed this token and said token.
That's why we can capture both of them here.
So if I have that method, said token, I will save it here.
I will use it basically whatever is coming from our API to that set token.
I think I have this supposed to be capital.
Let me double check if I can.
Yes.
So this is capital token.
So set token and we use it like this.
So we have a set token.
But at the moment we don't have any way to check it.
What if that has been working properly or not.
So what we could do in this component, what I can do is I can do use effect.
So that's a method we've used many times before.
And I will do use effect here.
Inside I will have arrow function.
And I will have dependency.
And basically I want to say if the token change in my if that's coming from the context, I want to
do something here.
So let's do console log token.
So if the token will be changed I will console log it here.
At the moment what is happening is we've created a context here.
We also exported for other components to import to know which one.
Then we have a token and set token here in our component.
We provide it here in the provider as a value.
That means we can go to our component here.
We can use that context, the one from the index.
And we have a option to access whatever we put there in the in that provider.
And then we whatever we get it from API, we set it and I will have use effect just to see if I have
a token in my context, I will just print it.
I can also print it token like this.
So it will tell me that the one that I am printing is token.
So you can see here token is null.
So that has been a printed straight away because I have that use effect.
But if I will put username and password Christian if I will login.
Now I have that token here.
So you can see here the round trip of what we done.
So I got a API this token from API.
I've set it here to the method that is coming from the context.
Here I have that context created.
Here I have it this state here.
So that means this token has been saved in this state.
And I provided back in a provider.
So that means any application that will use that context like here will also have an access to token.
And we actually have that access to our token because we just printed it out.
So this is how we can share more information widely in our application.
If you put something in a context and you wrap this as a provider, that means you can communicate this
way from component to component and pass some data.