1
00:00:00,360 --> 00:00:01,030
Nicely done.

2
00:00:01,050 --> 00:00:09,870
And once we've got our general structure, well, now I think how you would toggle the model and sidebar

3
00:00:09,870 --> 00:00:15,650
dynamically instead of removing and adding the class ourselves.

4
00:00:16,170 --> 00:00:19,580
And, of course, we would need to set up some kind of value.

5
00:00:19,860 --> 00:00:25,860
We have already done that before where it would be there for the true and then depending on that, we

6
00:00:25,860 --> 00:00:28,080
would add or remove that class.

7
00:00:28,710 --> 00:00:30,360
Now, all of that is nice.

8
00:00:30,870 --> 00:00:38,880
But you notice here that, of course, I cannot open the model from the model because the button is

9
00:00:38,880 --> 00:00:40,320
actually sitting in the home.

10
00:00:41,160 --> 00:00:46,910
So I cannot set up that state in the model that is not going to work.

11
00:00:47,400 --> 00:00:53,790
So technically, you can make an argument that we could set this up and object since Abcess has the

12
00:00:53,790 --> 00:00:55,200
home model and sidebar.

13
00:00:55,560 --> 00:00:57,930
So and here again, we could set up some set values.

14
00:00:57,930 --> 00:01:02,090
We can come up with functions and that inside of those functions will toggle.

15
00:01:02,400 --> 00:01:09,240
Then we would need to pass the open function down to the home because of course this button on this

16
00:01:09,240 --> 00:01:10,800
button would need those functions.

17
00:01:11,130 --> 00:01:16,260
And then in the model and in the sidebar where we would want to close them and where we would want to

18
00:01:16,260 --> 00:01:17,970
check for those that values.

19
00:01:17,970 --> 00:01:23,710
Well, from the objets, we would pass down both things to the model and the sidebar.

20
00:01:24,210 --> 00:01:31,830
Now, the problem with this setup is that our app component is going to get gigantic Restall since will

21
00:01:31,830 --> 00:01:34,260
be adding more and more and more functionality here.

22
00:01:34,620 --> 00:01:40,140
And the second one is, of course, that we're going to be doing the prop drilling work from the app

23
00:01:40,140 --> 00:01:41,850
will start passing down to the home.

24
00:01:42,180 --> 00:01:49,710
And we need to imagine that in home component we might have more components and maybe the buttons or

25
00:01:49,710 --> 00:01:56,490
maybe the elements that are looking for those functions or those values are far down in the componentry.

26
00:01:56,790 --> 00:02:04,410
And what that just means is that we'll be pointlessly passing props through the components that don't

27
00:02:04,410 --> 00:02:04,900
need them.

28
00:02:05,340 --> 00:02:11,310
OK, and where we know that, of course, we can fix that using the context, just how the difference

29
00:02:11,310 --> 00:02:12,050
is going to be.

30
00:02:12,060 --> 00:02:20,520
Like I said in the intro, that we are going to wrap our whole app in our context, not just that one

31
00:02:20,520 --> 00:02:22,620
folder like we did in tutorial.

32
00:02:23,040 --> 00:02:29,120
Since I assume that you already wash your part, I will try to keep up the pace.

33
00:02:29,370 --> 00:02:34,770
I'm not going to go from scratch, so I'm going to go with CONSED and then we're creating the context

34
00:02:35,070 --> 00:02:37,830
then that is equal to react context.

35
00:02:37,830 --> 00:02:40,230
And of course I'm working in the context just right now.

36
00:02:40,590 --> 00:02:47,400
The Senate note, we create a context, we get back to components, we have one for the provider and

37
00:02:47,400 --> 00:02:49,560
then the second one for the consumer.

38
00:02:49,560 --> 00:02:51,060
We want to use the consumer one.

39
00:02:51,060 --> 00:02:53,940
However, we will use the provider.

40
00:02:54,300 --> 00:02:58,710
And then I would want to create a component so that as a separate component, I'm going to go with app

41
00:02:59,100 --> 00:03:03,330
provider over here and we need to pass in the children.

42
00:03:03,690 --> 00:03:08,850
Since we need to understand that, of course we will wrap our whole up in app provider.

43
00:03:09,150 --> 00:03:11,190
So if we want to the children.

44
00:03:11,460 --> 00:03:17,400
So if we want to say, yeah, get me the children and then return children inside of our component,

45
00:03:17,400 --> 00:03:19,770
then of course we won't be able to see anything.

46
00:03:20,730 --> 00:03:27,210
I'm not sure that at the very end and not once I have my component from this component, what I would

47
00:03:27,210 --> 00:03:35,100
want is to return app context and then remember the name was provider and then inside of this provider,

48
00:03:35,100 --> 00:03:37,970
I would for sure want to have the children again.

49
00:03:37,980 --> 00:03:40,260
Otherwise I won't see any of my components.

50
00:03:40,560 --> 00:03:46,800
And then I remember the cool thing was that we can pass in the value and in that we can write whatever

51
00:03:46,800 --> 00:03:47,330
we would want.

52
00:03:47,610 --> 00:03:51,020
So let's just start simply by passing in the hall.

53
00:03:51,530 --> 00:04:00,030
But then from this component, I would want to export to our own export app context because you use

54
00:04:00,030 --> 00:04:00,510
context.

55
00:04:00,510 --> 00:04:01,710
We'll be looking for that.

56
00:04:01,980 --> 00:04:03,450
And then also amplifier.

57
00:04:03,810 --> 00:04:05,330
Now, I'll show you two ways.

58
00:04:05,700 --> 00:04:13,050
One is how we can use use context in any of the components and also the second one, how we can setup

59
00:04:13,410 --> 00:04:18,040
custom hook that right away returns and you'll see what I mean by second.

60
00:04:18,390 --> 00:04:24,690
So first, I would want to export both things out on export app context because I will need it as well

61
00:04:24,690 --> 00:04:25,650
as the app provider.

62
00:04:25,950 --> 00:04:31,340
Now app provider I would want to import in the index Jayesh.

63
00:04:31,740 --> 00:04:36,110
So this is the part where I didn't have the import, so you'll have to do it yourselves.

64
00:04:36,480 --> 00:04:40,620
So we're going to go import then we're looking for a specific name.

65
00:04:40,620 --> 00:04:47,030
So we go with curly braces and an app provider and then from and of course we're looking for context.

66
00:04:47,580 --> 00:04:49,290
So we've got our own provider.

67
00:04:49,290 --> 00:04:52,950
And then inside of the reacts remold, we go with our provider.

68
00:04:53,130 --> 00:04:58,170
And now I would want to wrap my whole app in that app provider.

69
00:04:58,440 --> 00:04:58,980
And again.

70
00:04:59,910 --> 00:05:05,610
If you won't do this, if you want the children, you'll have a big, fat mess.

71
00:05:06,010 --> 00:05:09,870
OK, so you can save it and you can see that you won't be able to see everything.

72
00:05:10,120 --> 00:05:13,830
So I always, always make sure that you display the children.

73
00:05:13,950 --> 00:05:18,450
So first, that you access the children in the component that's wrapping your job.

74
00:05:18,600 --> 00:05:20,480
And of course, you also return them.

75
00:05:21,030 --> 00:05:22,960
Otherwise, it's not going to make sense.

76
00:05:23,310 --> 00:05:29,310
By the way, again, spelling is not my best friend, so I'm going to go with children over here.

77
00:05:29,310 --> 00:05:32,420
And now, of course, I can see my components now.

78
00:05:32,440 --> 00:05:39,240
It's really cool that in any of my components, the home, the model, the sidebar, the AB, I can

79
00:05:39,420 --> 00:05:45,090
access those flowers, not the moment that is just hello, but that is already a good start.

80
00:05:45,360 --> 00:05:47,260
So first, let's take a look at the example.

81
00:05:47,260 --> 00:05:52,350
How will use use context plus the app context in specific component.

82
00:05:52,680 --> 00:05:54,970
And then of course we'll set up a custom hook.

83
00:05:55,200 --> 00:05:58,290
So let's say here, custom hook over here.

84
00:05:58,650 --> 00:06:04,520
Let's save the context just for now and I'll demonstrate that in the home.

85
00:06:04,610 --> 00:06:06,090
Just so in the home.

86
00:06:06,120 --> 00:06:11,630
Yes, I'm going to go for import than I would want to import that app.

87
00:06:11,640 --> 00:06:13,560
Context, context.

88
00:06:13,800 --> 00:06:17,210
It is coming from the context, Mark.

89
00:06:17,290 --> 00:06:20,490
So and then I also would need my use context.

90
00:06:20,850 --> 00:06:24,060
So we go here with used context.

91
00:06:24,450 --> 00:06:30,930
So once I have my use context, I definitely need to pass in my context in order to access that value.

92
00:06:31,230 --> 00:06:34,560
And for the time being, I'm just going to say maybe not console.

93
00:06:34,590 --> 00:06:43,110
I get I'm going to go with const data is equal to years context and then I pass in the app context of

94
00:06:43,110 --> 00:06:43,380
course.

95
00:06:43,770 --> 00:06:51,260
And once I do that, I'll notice that I'll successfully grab that halo that I'm passing in.

96
00:06:51,750 --> 00:06:58,950
So even if this would be, I don't know, ten more components DB, I can simply look for my use context

97
00:06:59,280 --> 00:07:04,590
than for my app context, which is of course the one that I'm creating over here.

98
00:07:04,890 --> 00:07:06,620
And then of course I can access it.

99
00:07:06,960 --> 00:07:13,640
So if I go with data I will see in my console, by the way, I have an open, bigger browser window.

100
00:07:14,100 --> 00:07:20,820
So there it is now inspect and of course in the console I should see the yellow Lárus and that is coming

101
00:07:21,120 --> 00:07:22,710
from the home.

102
00:07:22,710 --> 00:07:23,250
Come on.

103
00:07:23,520 --> 00:07:24,480
So that's really cool.

104
00:07:25,020 --> 00:07:31,210
Of course, that means that eventually we'll set up our functionality and functions over here in a provider.

105
00:07:31,500 --> 00:07:36,670
Now, before we do that, though, I would still want to show you how you can set up custom.

106
00:07:37,200 --> 00:07:44,060
So imagine the scenario where you wouldn't want to import in every component the use context and also

107
00:07:44,070 --> 00:07:45,840
you wouldn't want to import app context.

108
00:07:46,290 --> 00:07:52,770
What if I would just want to import the custom hook and all right away I have access to the same context.

109
00:07:53,040 --> 00:07:59,460
Again, please keep in mind, functionality won't change just the implementation where we don't need

110
00:07:59,460 --> 00:08:01,360
to have that many import.

111
00:08:01,650 --> 00:08:08,040
So what we could do is use the use context and we're going to create our custom hook and all right.

112
00:08:08,040 --> 00:08:11,880
Or export it export content and not use.

113
00:08:11,880 --> 00:08:13,410
And then you need to come up with a name.

114
00:08:13,740 --> 00:08:16,770
As long as you start with years, you'll be in good shape.

115
00:08:17,010 --> 00:08:21,360
So in my case, I'm going to go and use global and context.

116
00:08:21,840 --> 00:08:30,180
Then I would want to return from this custom, hook my use context, the one that is coming from react

117
00:08:30,180 --> 00:08:33,070
and then just pass in the app context.

118
00:08:33,450 --> 00:08:40,050
So now, of course, instead of importing in the home use context and the app context, what I could

119
00:08:40,050 --> 00:08:48,330
do is just grab my use global context, use global context, and instead of calling use context or app

120
00:08:48,330 --> 00:08:53,580
context can just say that I would want to access use global context.

121
00:08:53,700 --> 00:08:54,900
I would need to invoke it.

122
00:08:55,200 --> 00:09:00,620
And then you'll still notice that in the console you'll have the hello.

123
00:09:01,020 --> 00:09:06,600
OK, so those are two methods, how you can access that context globally.

124
00:09:06,900 --> 00:09:11,340
If you want to import in every component, use context and grab that specific context.

125
00:09:11,340 --> 00:09:14,190
You can do it or you can set up your customer.

126
00:09:14,550 --> 00:09:21,270
Just please keep in mind, when we talk about custom hooks, you need to have this use otherwise, even

127
00:09:21,270 --> 00:09:26,010
if the timing is correct, because the moment he complains that, of course, there is no such name,

128
00:09:26,400 --> 00:09:35,600
even if the name is correct, you'll have a big fat error y well, because we are calling use context.

129
00:09:35,680 --> 00:09:41,680
OK, so one of the react hooks not in the component and not in a customer.

130
00:09:41,970 --> 00:09:46,240
So we're just calling this in a regular function which we cannot do that is not allowed.

131
00:09:46,530 --> 00:09:53,630
So if you want to use react hooks, it either needs to be a component or it needs to be a customer.

132
00:09:53,880 --> 00:09:57,580
And in order to create it has a custom hook, we need that use.

133
00:09:57,780 --> 00:09:59,130
So use global.

134
00:09:59,880 --> 00:10:06,380
So let me go back, fix it in home, Jess and I should be in good shape.

135
00:10:06,750 --> 00:10:14,730
So as always, you have few options and in my case, I'm going to stick with that huge global context

136
00:10:14,730 --> 00:10:17,190
if you want, or you can go this route as well.

137
00:10:18,190 --> 00:10:24,160
I just think that we can save on fuel imports along the way if we use this custom hook route.