We've always starts setting up any of the components in the dashboard.
I would want to work on our global state, essentially.
I would want to lift up the user state, whether that is the user info, the followers or the repos
in one place.
And that way I can access that information all throughout my application.
I know how to do that.
We are going to use context API, which you're familiar.
This is going to be a nice refresher.
If not, well, you'll learn everything that there is to know about the context API in order to set
it up.
We would need to navigate to a context.
Yes.
So notice we have the source folder then in there we have the complex folder.
In there we have the mock data, which we're gonna cover a little bit later on.
Also, we have the complex drafts so bravely navigate to a context.
Yes, at the moment I fully understand that none of these imports make sense.
Don't worry, we're gonna get there and we will need to set up our context.
And the way we set up context is by using create context method.
So first, we need to come up with some kind of variable.
So in this case, I'm going to go with geared Hobb and line context.
That is my name and I'm going to use a react.
So my import than Dopp.
And then the method name is create context.
So you invoke the method.
And now we have our context.
Now, the moment we do that, we have access to two components.
We have access to the provider as well as the consumer.
We can create them or we can access them, I guess, via just type in GitHub context.
So whatever is the name and then dot and then whether the provider or the consumer.
Now I can tell you right away that we have an arrival of Euge context took, which we are going to use.
Now we can just skip on usually the consumer.
So essentially what we're looking for, he is just the provider.
Now, the thing is, I don't want to wrap my application using Grupp context provider directly.
Why?
Because I would want to set up more logic.
That's why I'm going to set up a separate component in here.
I'm going to say cost and then get hub gate hub provi there Mike show so and then eventually we'll render
all our application.
So that's why we're passing the children.
Don't worry.
We'll talk to them in a second.
And then from this component, I would want to return my GitHub context dot provider.
So the component that I'm getting, once I set up the context again, please don't mix and match.
This is a context and then this is a separate component that we're just using because there's going
to be more logic in there.
We're not just going to wrap our application.
There is going to be also some functionality in here.
Well, that's why from the get up provider component, we are returning a GitHub context.
So get hub context.
And then remember, it was DOT because we want access the provider a notice right away.
It gives us these options.
So we go with a provider and then we wrap all our application.
That's why.
Notice how we have the children.
So what I'm saying I, I'm wrapping the whole application and the whole application is going to be children,
man.
Our just want around their children as well.
If you won't do that.
Well, since we're wrapping the whole application in to get a provider, nothing is going to be rendered.
Okay.
Now, what's really important is that this provider has the value prop.
So whatever we pass in the value is gonna be accessible all throughout our application.
Again, eventually there's going to be way more functionality.
But the moment I just want to render hello.
So I'm just gonna say, yeah, pass in the hello string in the value, so I'll save it.
And now we need to export these two things.
We need to export get up context.
So our whole context as well as the provider.
Why we need that?
Well, because you use context.
The hope that we're gonna use in order to access this data is looking for the main context, are giving
up context.
And then in order to wrap our application in the provider.
We also need to import get a provider somewhere in the road so we can wrap our whole application.
And then, of course, do that.
In our case, we're only going to use get provider once, but then each and every time we need to have
access to the data that we have at the moment is just low.
Then of course we'll use giddap context.
So here at the bottom, I'm going to go with export and then I'm exporting.
Two things I'm exporting get provider.
Show the component not to get up context provider.
That's the one that we're returning from to get a provider as well as our main context.
Which, of course, is GitHub context.
And once we export these two things.
Now, of course, I would want to wrap my application in the get up provider.
The way we do that is by navigating to index Jayesh and that index, Jarius, has to import.
It has a import of Get-Out provider from the context.
Notice how we're looking for context folder and then I'm looking for the context.
J.S. and now Knauss, where we have react search mode in there.
I'm going to go with my GitHub, not context.
So we're looking for geared Hobb and LAN provider.
That's my component.
And let's wrap our app component once we save.
If there are no errors.
Beautiful.
Everything works as expected.
Now, the key here is that of course, now we want access that silly little hole.
Correct.
And we can take a look at the dashboard.
And we can say, all right, why don't we try to access that in the info?
Let's navigate to our info component.
So it's going to be in the components that I'm looking for info jayesh.
And then in the info address at the moment.
Yeah, I have a bunch of imports.
Beautiful.
I have user info component.
And then, of course, I have a bunch of styling here.
That's why I have the wrapper.
Now, what I would want to do is just simply see whether I have access to that.
Hello.
Because that's the key thing.
If I have access to that silly little hole, that means that we can start setting up our functionality
in our context.
Yes, because I would want to set up all my functionality here and get help provider and then just distribute
it all throughout my components.
So in the info Jara's, in order to access the context, we would need to use use context.
Now we can import that hook directly from react or we can just use react dot and then whatever is the
hook man.
Which is essentially what I'm going to do.
So I'm gonna say cost and then I'm going to name this data and we're going to go with react.
Then use context.
OK, and now in this hook, we need to pass in our GitHub context.
That's why it was important when we're setting up that context to export it as well.
So we need the provider because I wanted to wrap my application.
And then, of course, I also need my get up context because I would want to access my soul.
Hello.
So in the info, let's pass in our GitHub context.
Because as you can see, priority important.
So we're gonna go get a job and then we're looking for the context.
Beautiful.
Now, I don't know, we have user info.
Why don't we take a look at our data?
So I'm going to add a colon here and I'll just pass in the data, not words can console log at.
We can do whatever we would want, but the molinar, we should see the.
Hello.
Why?
Because we have our context right now.
So essentially now we don't need to set up all our logic in a dashboard.
I can setup everything in a context.
So get a new user, get three Poes, get the followers and all that.
And then any component that wants that info.
Well, we simply need to import GitHub contacts.
Then use contact stock and online, whatever data we'll spit back is gonna be available in that particular
component.