All right.
And up next, let's set up some global values.
Now, like I mentioned previously, when I discussed React router.
With the latest version, there's actually very little need for a bunch of global values.
We'll only have three.
We'll have the user.
We'll have the sidebar one.
So whether show or hide the sidebar and also the dark theme one.
And in my opinion, it's very useful to set them up right away, set up some placeholder functions which
are going to control those values.
And then we'll discuss multiple approaches, how we can provide those values to our components.
And I guess let's start with the user.
Now, eventually this is going to be coming from our server and of course, at that point we'll have
to change the functionality a little bit.
But since we do want to display the user name in the NAV bar, I think it's useful if we set up at least
810 value so that way I can pass it down.
I can set up everything in the nav bar and then once I get the user from the server, I just need to
change the functionality in the dashboard.
Hopefully that is clear.
So here I'll say temp.
So again, this will change.
For now, user is going to be equal to an object and it's simply as a name of John.
That's it.
Then we want to import the use state, create context and use context from react.
And this is totally up to you.
If you want to rely on auto imports, you can definitely do so.
So this is going to be use state and by default, this value will be false.
Now, what do I want to set up?
Well, that is going to be my sidebar one.
So by default, it's going to be false.
And basically we want to go show sidebar.
And then we'll go set show.
Sidebar.
So that's my state value again, it's going to be a global one since we want to pass it down to a sidebar
from here.
And also we want to go with is Dark theme.
So let's copy and paste.
First we want to set the value is dark theme.
And then we want to go is dark.
So set is dark theme.
My apologies.
Set is dark.
Theme and it will also be false.
And then let's set up three placeholder functions.
So we're going to go here with Toggle Dark theme.
Eventually there's going to be more logic.
For now, let's just log it.
Let's say log.
And we're looking for toggle.
Dark and theme.
Let's save this.
Then we will have one for sidebar.
So this one will be toggle sidebar.
And since the functionality is going to be somewhat straightforward, basically I just want to set it
equal to the opposite of the current value.
We'll right away write it.
So we'll go here with set, show, sidebar and we'll set it equal to the opposite value of the current
show sidebar.
Let's save this.
And then lastly, we'll have the logout user.
Now Logout user is going to be async since we will communicate with the server and therefore right away
we can set it up as async.
But as far as the functionality, same deal, we'll just go with log and we'll say log out user.
Okay, good.
And now here's the tricky part.
And as a side note, I have here a bug.
And we can nicely see that our something went wrong works.
So let's inspect together.
This is going to be cool.
And the reason for that is because we don't have proper syntax.
So let me remove the equals sign and also this parentheses.
And now we're good to go.
Let's refresh and.
Yep.
Everything seems to be working correctly.
Now million dollar question.
So how do we want to pass these values down?
Well, one way we can pass them down as props.
Correct?
So, for example, show sidebar, we will need in a small sidebar so I could set up a prop over here
and then I could access it in a small sidebar.
And to tell you honestly.
This was my approach when I was building the application.
But since I know that some people will complain about this approach, we will set up a context.
Now, here's the important thing.
This context will technically be only for the small sidebar, big sidebar and the nav bar.
When it comes to the outlet.
So basically to our pages, React Router has a built in prop which works as a context.
So I just want to make this very, very clear.
If you have a React router and you want to set up some kind of value globally, you can just use this
context.
So for example, in our case that value is going to be user.
So let's say if you want to pass that user to all of the pages.
You set up a context prop, which, by the way, we will do it eventually.
And that's why I'm not typing in here and you're good to go.
You'll be able to access this value in any page that is set as a child.
However, in this case, we're talking about small sidebar, big sidebar and nav bar.
Again, if you want, you can pass them down as props.
But we will set up a global context for these ones.
Just because I know that some people will complain about the prop drilling.
Now, in order to set up the context, what do we need to do?
Well, first, we need to create context from React.
Correct?
We need to come up with a name In my case, that is going to be a dashboard.
Context.
We'll set it equal to that.
And essentially where we have the dashboard layout return instead of the wrapper, we'll go with dashboard
context dot.
So it returns a provider over here and we just want to wrap the entire thing.
So let's set it up.
And now pretty much whatever will pass in the value.
And I'll say no.
So the value prop is missing.
Yep, we didn't add it yet and whatever we'll place in the value will be able to access in any of these
components.
So let's go here, let's add the value one.
I'll right away set it up as an object and one by one let's add those values.
First, I want to access to the user, then I want to access to show sidebar.
After that we want to go with is dark theme and then let's pass down those functions.
So toggle theme.
Toggle sidebar and also log out on user.
Let's save it.
And before we try to access any of these values in these components, let's also set up a custom hook,
which is also my preference.
Since that way I don't need to export the main context.
So we're going to go over here with export.
So right away export this custom hook.
And remember, with custom hooks, we do need to start the name with use.
And I'm just going to name this dashboard.
And context, and that one is equal to my function.
And from this function I want to go use context, something we need to grab from react, and then we
pass in the main context, which in our case is the dashboard context.
So for example, in the small sidebar, if I want to see the value of show sidebar, because this value
will control whether we are showing or hiding the small sidebar, we'll need to grab the use dashboard
context and effectively invoke it in the component.
So let's try it out.
And again, this is just for testing purposes.
So let's navigate to a small sidebar.
Somewhere in the component go with use dashboard context and then let's just log the data we're getting
back and if we'll see that giant object, we are in good shape.
So once I log, I should see in the console following things.
I have the object and notice I have state value, I have the functions and all of that cool stuff.
And it means that whenever I'll need this show sidebar value, I'll have direct access to it.
Again, let me reiterate technically, you don't need the context.
So if you are okay with passing these values as props.
To these three components, then there's no need for the global context because when it comes to the
pages, there is a context prop provided by React router.
And with this in place we can start working on the next piece of functionality.