1
00:00:00,020 --> 00:00:00,530
All right.

2
00:00:00,560 --> 00:00:04,340
And up next, let's set up some global values.

3
00:00:04,370 --> 00:00:08,750
Now, like I mentioned previously, when I discussed React router.

4
00:00:09,410 --> 00:00:15,890
With the latest version, there's actually very little need for a bunch of global values.

5
00:00:15,920 --> 00:00:17,360
We'll only have three.

6
00:00:17,540 --> 00:00:18,860
We'll have the user.

7
00:00:19,040 --> 00:00:21,440
We'll have the sidebar one.

8
00:00:21,440 --> 00:00:27,650
So whether show or hide the sidebar and also the dark theme one.

9
00:00:28,040 --> 00:00:34,280
And in my opinion, it's very useful to set them up right away, set up some placeholder functions which

10
00:00:34,280 --> 00:00:36,140
are going to control those values.

11
00:00:36,750 --> 00:00:43,910
And then we'll discuss multiple approaches, how we can provide those values to our components.

12
00:00:43,920 --> 00:00:45,880
And I guess let's start with the user.

13
00:00:45,900 --> 00:00:51,330
Now, eventually this is going to be coming from our server and of course, at that point we'll have

14
00:00:51,330 --> 00:00:53,190
to change the functionality a little bit.

15
00:00:53,190 --> 00:01:00,510
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

16
00:01:00,510 --> 00:01:03,300
810 value so that way I can pass it down.

17
00:01:03,300 --> 00:01:09,060
I can set up everything in the nav bar and then once I get the user from the server, I just need to

18
00:01:09,060 --> 00:01:11,450
change the functionality in the dashboard.

19
00:01:11,460 --> 00:01:12,690
Hopefully that is clear.

20
00:01:12,690 --> 00:01:14,450
So here I'll say temp.

21
00:01:14,460 --> 00:01:16,380
So again, this will change.

22
00:01:16,380 --> 00:01:22,140
For now, user is going to be equal to an object and it's simply as a name of John.

23
00:01:22,140 --> 00:01:22,830
That's it.

24
00:01:22,890 --> 00:01:29,730
Then we want to import the use state, create context and use context from react.

25
00:01:29,760 --> 00:01:31,740
And this is totally up to you.

26
00:01:31,740 --> 00:01:35,700
If you want to rely on auto imports, you can definitely do so.

27
00:01:35,700 --> 00:01:40,090
So this is going to be use state and by default, this value will be false.

28
00:01:40,330 --> 00:01:42,670
Now, what do I want to set up?

29
00:01:43,030 --> 00:01:45,700
Well, that is going to be my sidebar one.

30
00:01:45,880 --> 00:01:48,010
So by default, it's going to be false.

31
00:01:48,280 --> 00:01:50,830
And basically we want to go show sidebar.

32
00:01:52,200 --> 00:01:55,020
And then we'll go set show.

33
00:01:55,980 --> 00:01:56,790
Sidebar.

34
00:01:57,560 --> 00:02:04,570
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

35
00:02:04,580 --> 00:02:05,420
from here.

36
00:02:06,110 --> 00:02:09,100
And also we want to go with is Dark theme.

37
00:02:09,110 --> 00:02:11,540
So let's copy and paste.

38
00:02:12,340 --> 00:02:16,840
First we want to set the value is dark theme.

39
00:02:18,150 --> 00:02:19,920
And then we want to go is dark.

40
00:02:20,400 --> 00:02:22,060
So set is dark theme.

41
00:02:22,080 --> 00:02:22,740
My apologies.

42
00:02:22,740 --> 00:02:24,900
Set is dark.

43
00:02:25,710 --> 00:02:28,860
Theme and it will also be false.

44
00:02:28,950 --> 00:02:32,000
And then let's set up three placeholder functions.

45
00:02:32,010 --> 00:02:34,650
So we're going to go here with Toggle Dark theme.

46
00:02:35,630 --> 00:02:37,730
Eventually there's going to be more logic.

47
00:02:37,880 --> 00:02:40,130
For now, let's just log it.

48
00:02:40,370 --> 00:02:41,660
Let's say log.

49
00:02:41,750 --> 00:02:44,180
And we're looking for toggle.

50
00:02:45,270 --> 00:02:47,070
Dark and theme.

51
00:02:47,250 --> 00:02:48,330
Let's save this.

52
00:02:48,330 --> 00:02:51,870
Then we will have one for sidebar.

53
00:02:51,900 --> 00:02:54,780
So this one will be toggle sidebar.

54
00:02:54,780 --> 00:03:00,420
And since the functionality is going to be somewhat straightforward, basically I just want to set it

55
00:03:00,420 --> 00:03:03,060
equal to the opposite of the current value.

56
00:03:03,510 --> 00:03:04,530
We'll right away write it.

57
00:03:04,530 --> 00:03:12,420
So we'll go here with set, show, sidebar and we'll set it equal to the opposite value of the current

58
00:03:12,450 --> 00:03:13,500
show sidebar.

59
00:03:13,530 --> 00:03:14,370
Let's save this.

60
00:03:14,370 --> 00:03:17,010
And then lastly, we'll have the logout user.

61
00:03:17,130 --> 00:03:24,960
Now Logout user is going to be async since we will communicate with the server and therefore right away

62
00:03:24,960 --> 00:03:26,580
we can set it up as async.

63
00:03:26,580 --> 00:03:33,270
But as far as the functionality, same deal, we'll just go with log and we'll say log out user.

64
00:03:33,300 --> 00:03:34,110
Okay, good.

65
00:03:34,140 --> 00:03:35,940
And now here's the tricky part.

66
00:03:35,940 --> 00:03:38,970
And as a side note, I have here a bug.

67
00:03:39,780 --> 00:03:43,920
And we can nicely see that our something went wrong works.

68
00:03:43,920 --> 00:03:45,510
So let's inspect together.

69
00:03:45,540 --> 00:03:46,980
This is going to be cool.

70
00:03:47,490 --> 00:03:50,370
And the reason for that is because we don't have proper syntax.

71
00:03:50,370 --> 00:03:54,240
So let me remove the equals sign and also this parentheses.

72
00:03:54,360 --> 00:03:55,830
And now we're good to go.

73
00:03:56,660 --> 00:03:58,430
Let's refresh and.

74
00:03:58,430 --> 00:03:58,980
Yep.

75
00:03:59,550 --> 00:04:01,620
Everything seems to be working correctly.

76
00:04:02,050 --> 00:04:03,670
Now million dollar question.

77
00:04:03,670 --> 00:04:06,220
So how do we want to pass these values down?

78
00:04:07,580 --> 00:04:11,450
Well, one way we can pass them down as props.

79
00:04:11,450 --> 00:04:11,960
Correct?

80
00:04:11,960 --> 00:04:18,800
So, for example, show sidebar, we will need in a small sidebar so I could set up a prop over here

81
00:04:18,860 --> 00:04:22,010
and then I could access it in a small sidebar.

82
00:04:22,620 --> 00:04:24,090
And to tell you honestly.

83
00:04:24,720 --> 00:04:27,480
This was my approach when I was building the application.

84
00:04:27,480 --> 00:04:32,940
But since I know that some people will complain about this approach, we will set up a context.

85
00:04:32,970 --> 00:04:36,870
Now, here's the important thing.

86
00:04:36,900 --> 00:04:44,140
This context will technically be only for the small sidebar, big sidebar and the nav bar.

87
00:04:44,160 --> 00:04:46,800
When it comes to the outlet.

88
00:04:46,800 --> 00:04:54,750
So basically to our pages, React Router has a built in prop which works as a context.

89
00:04:54,780 --> 00:04:57,480
So I just want to make this very, very clear.

90
00:04:57,480 --> 00:05:04,440
If you have a React router and you want to set up some kind of value globally, you can just use this

91
00:05:04,440 --> 00:05:04,950
context.

92
00:05:04,950 --> 00:05:08,550
So for example, in our case that value is going to be user.

93
00:05:08,550 --> 00:05:12,240
So let's say if you want to pass that user to all of the pages.

94
00:05:12,870 --> 00:05:16,680
You set up a context prop, which, by the way, we will do it eventually.

95
00:05:16,680 --> 00:05:20,190
And that's why I'm not typing in here and you're good to go.

96
00:05:20,220 --> 00:05:27,760
You'll be able to access this value in any page that is set as a child.

97
00:05:27,780 --> 00:05:31,560
However, in this case, we're talking about small sidebar, big sidebar and nav bar.

98
00:05:31,590 --> 00:05:35,880
Again, if you want, you can pass them down as props.

99
00:05:36,650 --> 00:05:40,970
But we will set up a global context for these ones.

100
00:05:41,000 --> 00:05:45,000
Just because I know that some people will complain about the prop drilling.

101
00:05:45,020 --> 00:05:47,720
Now, in order to set up the context, what do we need to do?

102
00:05:48,320 --> 00:05:52,210
Well, first, we need to create context from React.

103
00:05:52,220 --> 00:05:52,790
Correct?

104
00:05:52,820 --> 00:05:59,360
We need to come up with a name In my case, that is going to be a dashboard.

105
00:06:00,430 --> 00:06:01,060
Context.

106
00:06:01,540 --> 00:06:03,160
We'll set it equal to that.

107
00:06:03,340 --> 00:06:11,080
And essentially where we have the dashboard layout return instead of the wrapper, we'll go with dashboard

108
00:06:11,080 --> 00:06:12,240
context dot.

109
00:06:12,250 --> 00:06:17,680
So it returns a provider over here and we just want to wrap the entire thing.

110
00:06:19,050 --> 00:06:20,460
So let's set it up.

111
00:06:21,030 --> 00:06:24,810
And now pretty much whatever will pass in the value.

112
00:06:25,020 --> 00:06:25,790
And I'll say no.

113
00:06:25,830 --> 00:06:27,600
So the value prop is missing.

114
00:06:27,610 --> 00:06:34,770
Yep, we didn't add it yet and whatever we'll place in the value will be able to access in any of these

115
00:06:34,770 --> 00:06:35,640
components.

116
00:06:35,640 --> 00:06:38,430
So let's go here, let's add the value one.

117
00:06:38,460 --> 00:06:43,650
I'll right away set it up as an object and one by one let's add those values.

118
00:06:43,650 --> 00:06:48,540
First, I want to access to the user, then I want to access to show sidebar.

119
00:06:48,630 --> 00:06:54,480
After that we want to go with is dark theme and then let's pass down those functions.

120
00:06:54,480 --> 00:06:55,710
So toggle theme.

121
00:06:56,510 --> 00:07:01,520
Toggle sidebar and also log out on user.

122
00:07:01,610 --> 00:07:03,080
Let's save it.

123
00:07:03,230 --> 00:07:12,080
And before we try to access any of these values in these components, let's also set up a custom hook,

124
00:07:12,080 --> 00:07:13,910
which is also my preference.

125
00:07:13,910 --> 00:07:18,320
Since that way I don't need to export the main context.

126
00:07:18,320 --> 00:07:20,030
So we're going to go over here with export.

127
00:07:20,030 --> 00:07:22,310
So right away export this custom hook.

128
00:07:22,340 --> 00:07:27,380
And remember, with custom hooks, we do need to start the name with use.

129
00:07:27,380 --> 00:07:29,690
And I'm just going to name this dashboard.

130
00:07:30,840 --> 00:07:34,170
And context, and that one is equal to my function.

131
00:07:34,170 --> 00:07:41,190
And from this function I want to go use context, something we need to grab from react, and then we

132
00:07:41,190 --> 00:07:46,560
pass in the main context, which in our case is the dashboard context.

133
00:07:46,650 --> 00:07:54,300
So for example, in the small sidebar, if I want to see the value of show sidebar, because this value

134
00:07:54,300 --> 00:08:01,710
will control whether we are showing or hiding the small sidebar, we'll need to grab the use dashboard

135
00:08:01,710 --> 00:08:05,760
context and effectively invoke it in the component.

136
00:08:05,760 --> 00:08:07,170
So let's try it out.

137
00:08:07,440 --> 00:08:10,020
And again, this is just for testing purposes.

138
00:08:10,020 --> 00:08:12,420
So let's navigate to a small sidebar.

139
00:08:13,180 --> 00:08:22,000
Somewhere in the component go with use dashboard context and then let's just log the data we're getting

140
00:08:22,000 --> 00:08:26,240
back and if we'll see that giant object, we are in good shape.

141
00:08:26,260 --> 00:08:31,150
So once I log, I should see in the console following things.

142
00:08:31,150 --> 00:08:38,679
I have the object and notice I have state value, I have the functions and all of that cool stuff.

143
00:08:38,679 --> 00:08:44,440
And it means that whenever I'll need this show sidebar value, I'll have direct access to it.

144
00:08:44,440 --> 00:08:50,140
Again, let me reiterate technically, you don't need the context.

145
00:08:50,140 --> 00:08:55,210
So if you are okay with passing these values as props.

146
00:08:55,890 --> 00:09:02,220
To these three components, then there's no need for the global context because when it comes to the

147
00:09:02,220 --> 00:09:08,240
pages, there is a context prop provided by React router.

148
00:09:08,250 --> 00:09:13,950
And with this in place we can start working on the next piece of functionality.