1
00:00:00,210 --> 00:00:01,060
Amazing job.

2
00:00:01,110 --> 00:00:08,670
We've got our sidebar, we can even manually toggle it, so now, of course, let's set up that functionality

3
00:00:08,670 --> 00:00:09,870
somewhere globally.

4
00:00:10,380 --> 00:00:16,380
And I guess I would still want to reiterate why we're setting this up globally, because technically,

5
00:00:16,380 --> 00:00:21,390
you could make an argument that, yeah, we can just navigate and yes, we could set up the functionality

6
00:00:21,390 --> 00:00:25,150
over here and we would pass it into nobre and sidebar.

7
00:00:25,470 --> 00:00:30,960
Now, first of all, why we would have to do it in the jazz world, because I would want to close the

8
00:00:30,960 --> 00:00:33,290
sidebar and I can do it from the sidebar.

9
00:00:33,720 --> 00:00:39,690
But as far as opening, I definitely would want to access that functionality in my neighbor.

10
00:00:40,110 --> 00:00:40,580
Correct.

11
00:00:41,010 --> 00:00:47,080
So there's no way for me to somehow magically push this functionality from the sidebar.

12
00:00:47,190 --> 00:00:50,340
So imagine if I would set up my use that over here.

13
00:00:50,610 --> 00:00:56,490
There's no way for me to magically somehow throw it in the Napa where once I click on a button, then

14
00:00:56,490 --> 00:00:57,900
I can display the sidebar.

15
00:00:58,080 --> 00:01:04,080
That's why at least you need to set this up in the abcess and technically it would work.

16
00:01:04,800 --> 00:01:06,990
Now, the problem is more places.

17
00:01:06,990 --> 00:01:12,540
You have this kind of setup where something is sitting in some kind of random component, the harder

18
00:01:12,750 --> 00:01:14,700
it is to manage your application.

19
00:01:14,970 --> 00:01:19,800
Imagine a scenario where maybe in one of the pages you would also want to open up the sidebar.

20
00:01:20,160 --> 00:01:21,650
It would be somewhat of the pain.

21
00:01:21,660 --> 00:01:28,800
Then again, get this from the app to the particular page that you would want to have functionality.

22
00:01:29,190 --> 00:01:36,240
And also the app just would right away get somewhat messy, at least in my opinion, because in my opinion,

23
00:01:36,240 --> 00:01:39,860
objects should just be responsible for rendering my pages.

24
00:01:40,260 --> 00:01:45,390
So if I know that there's some issue with pages, I go here instead of coming here, and then I have

25
00:01:45,390 --> 00:01:49,890
some kind of functionality for the sidebar, then I have the pages and hopefully you get the gist.

26
00:01:50,160 --> 00:01:57,090
And that's why a better setup would be actually getting this from the local context or I'm sorry, from

27
00:01:57,090 --> 00:01:58,080
the global context.

28
00:01:58,500 --> 00:02:00,210
And we have multiple contexts.

29
00:02:00,210 --> 00:02:06,090
We have one Fourcade filter and products and user, and for this one will use product.

30
00:02:06,460 --> 00:02:10,690
Now I'll cover why I'm using products at the very end of the video.

31
00:02:11,460 --> 00:02:17,490
For now, let's just go with the flow and navigate to product context.

32
00:02:17,940 --> 00:02:19,320
That's the one that we're looking for.

33
00:02:19,710 --> 00:02:22,040
And there's a bunch of setup here.

34
00:02:22,290 --> 00:02:29,070
Like I said, essentially it is a boilerplate, but the first thing that I would want is to wrap my

35
00:02:29,070 --> 00:02:31,620
application in product provider.

36
00:02:32,010 --> 00:02:36,360
Otherwise, whatever functionality I'm setting up, it's pretty much useless because I'm not going to

37
00:02:36,360 --> 00:02:37,220
have access to it.

38
00:02:37,470 --> 00:02:41,880
And as you can see right now, I have product context as a value.

39
00:02:42,300 --> 00:02:45,830
So before we do anything, we're going to navigate to you in next year.

40
00:02:46,110 --> 00:02:49,200
I already imported the product provider.

41
00:02:49,620 --> 00:02:51,290
And notice here now.

42
00:02:51,390 --> 00:02:56,880
And by the way, this is somewhat annoying where you would need to double click in order to have both

43
00:02:56,880 --> 00:02:57,510
of them open.

44
00:02:57,510 --> 00:02:58,850
And sometimes it doesn't work.

45
00:02:59,640 --> 00:03:03,620
But notice how in this case, I wasn't exporting here in the bottom.

46
00:03:04,050 --> 00:03:10,920
I went both of them as far as the products provider and used hook the used product context.

47
00:03:11,220 --> 00:03:13,110
I right away set up the exports here.

48
00:03:13,380 --> 00:03:18,740
So I want to export and then provider and then export and then the hook.

49
00:03:19,050 --> 00:03:27,750
OK, now in the index, I'm grabbing that provider and now I would want to wrap my app from my app component

50
00:03:28,050 --> 00:03:29,640
in that provider.

51
00:03:30,120 --> 00:03:33,180
So it's trying not to make some silly bugs.

52
00:03:33,630 --> 00:03:38,520
We're going to go with product and provider or product.

53
00:03:38,540 --> 00:03:42,270
Sorry, I was also something that is always me up.

54
00:03:42,600 --> 00:03:48,840
If I have plural and it's always products and then sometimes I go with product and then there's a silly

55
00:03:48,840 --> 00:03:49,230
bug.

56
00:03:49,590 --> 00:03:53,880
But if you don't have any egregious errors, you should be in good space.

57
00:03:54,210 --> 00:04:00,020
Because of course, now we have wrapped our whole application in the product provider next.

58
00:04:00,030 --> 00:04:07,800
Like I said, since our app eventually is going to be quite big out right away, I want to set up the

59
00:04:07,830 --> 00:04:08,490
structure.

60
00:04:08,760 --> 00:04:12,840
So I would want to right away use my use reducer.

61
00:04:13,200 --> 00:04:17,160
That's the hook that is going to come in really handy.

62
00:04:17,520 --> 00:04:20,610
And we remember that we are getting back to things.

63
00:04:20,760 --> 00:04:22,320
We are getting back to state.

64
00:04:23,100 --> 00:04:27,750
So that always is going to be our current state and then the dispatch.

65
00:04:28,020 --> 00:04:31,920
So the function that we use to control our state.

66
00:04:32,160 --> 00:04:37,170
So essentially we pass in, of course, the type into the dispatch and then we go to the producer,

67
00:04:37,530 --> 00:04:40,020
the function that actually controls that state.

68
00:04:40,200 --> 00:04:47,310
And that is how we operate on the state using user sort of we don't go, hey, let's change some value

69
00:04:47,310 --> 00:04:49,550
in a state by setting up some function.

70
00:04:49,680 --> 00:04:54,800
No, we always need to run the type of action through our dispatch.

71
00:04:54,810 --> 00:04:55,890
That is the only way.

72
00:04:55,890 --> 00:04:58,230
And that's where that control comes into play.

73
00:04:58,680 --> 00:04:59,730
Where now I'm specific.

74
00:04:59,920 --> 00:05:06,180
Saying, hey, listen, you can only update the state if there is an action, if there is action, you

75
00:05:06,180 --> 00:05:12,570
kind of just willy nilly start typing away and again, eventually as your project gets bigger and bigger,

76
00:05:12,870 --> 00:05:19,440
that comes in really handy because you don't make some silly bugs that are very hard to find eventually,

77
00:05:19,800 --> 00:05:23,950
because I can tell you right away that as we're working right now in the state, we're probably like,

78
00:05:23,950 --> 00:05:25,650
hey, I could be already done.

79
00:05:25,830 --> 00:05:30,230
It would take me five minutes to set up the state value and I would be in good shape.

80
00:05:30,240 --> 00:05:31,170
And you're correct.

81
00:05:31,170 --> 00:05:35,670
As far as the style, of course, it might seem like an overkill.

82
00:05:36,150 --> 00:05:43,470
Just understand that when you're tackling big projects, it's those small things that catch up with

83
00:05:43,470 --> 00:05:47,900
you later and really make your work, sometimes even a nightmare.

84
00:05:47,940 --> 00:05:51,540
So I'm just saying we're going to go with you as a producer.

85
00:05:51,550 --> 00:05:53,090
That is my hook.

86
00:05:53,100 --> 00:05:53,610
Correct.

87
00:05:53,610 --> 00:05:54,420
Use reducer.

88
00:05:54,660 --> 00:05:56,550
And then we need to pass into things.

89
00:05:56,880 --> 00:05:59,280
We need to pass in reduce function.

90
00:05:59,610 --> 00:06:02,910
So the function of that is going to control our state.

91
00:06:03,120 --> 00:06:10,440
And I already set up the boilerplate for this function and I gave it a name of reducer and all the cases.

92
00:06:10,440 --> 00:06:11,130
I'm going to do that.

93
00:06:11,310 --> 00:06:13,920
And it is coming from a specific folder.

94
00:06:14,220 --> 00:06:19,800
So since we have multiple reducers, I went with reducers folder and then I'm looking for specific file

95
00:06:20,100 --> 00:06:24,240
products, reducer products, contact product producer.

96
00:06:24,510 --> 00:06:27,780
Hopefully that is clear and we go with a reducer.

97
00:06:27,780 --> 00:06:30,810
And then I need to have the initial state.

98
00:06:31,080 --> 00:06:32,010
What is initial state?

99
00:06:32,020 --> 00:06:35,580
Well, that is just at the moment empty object.

100
00:06:35,760 --> 00:06:36,210
Correct.

101
00:06:36,960 --> 00:06:44,340
So we set this up and remember, in order to have some kind of functionality, we would need to dispatch

102
00:06:44,340 --> 00:06:44,910
an action.

103
00:06:45,180 --> 00:06:45,620
Correct.

104
00:06:45,990 --> 00:06:52,920
So, for example, I would want to set up two functions, one that closes sidebar and one that opens.

105
00:06:53,220 --> 00:06:56,160
And we'll start very simply in the initial state.

106
00:06:56,460 --> 00:06:58,740
I want to create that property.

107
00:06:59,190 --> 00:07:03,530
So there's going to be a property by the name of it side bar and then open.

108
00:07:03,840 --> 00:07:06,720
Now, what is going to be the default value, which is going to be false?

109
00:07:07,060 --> 00:07:10,500
So I would want to hide the sidebar by default.

110
00:07:10,830 --> 00:07:11,790
Hopefully that is clear.

111
00:07:12,240 --> 00:07:14,540
And now let's come up with those two functions.

112
00:07:14,550 --> 00:07:18,690
I'm going to say const and then open sidebar.

113
00:07:19,140 --> 00:07:24,930
Now, function is not going to be looking for any parameters and instead of dysfunction, we are going

114
00:07:24,930 --> 00:07:26,190
to dispatch an action.

115
00:07:26,340 --> 00:07:28,560
So say this patch over here.

116
00:07:29,070 --> 00:07:34,470
And I would want to pass in the type now for now, just type the string and of course, then we'll do

117
00:07:34,470 --> 00:07:39,150
the whole song and dance while we're setting up the actions in a separate place.

118
00:07:39,300 --> 00:07:42,690
So for now, let's just go with a object.

119
00:07:42,690 --> 00:07:44,840
Remember, we needed to pass an entire property.

120
00:07:46,010 --> 00:07:52,370
And yeah, I said, I'm going to go with strength, I'm right away accessing the variable, so let me

121
00:07:52,370 --> 00:07:55,810
just say sidebar and then underscore open.

122
00:07:56,180 --> 00:08:00,350
So of course, this will be my action.

123
00:08:00,590 --> 00:08:03,410
So that's the type of action that I'm passionate.

124
00:08:03,800 --> 00:08:07,090
Now let's navigate to our reducers.

125
00:08:07,100 --> 00:08:11,350
So reducers and we're looking for product reproducer.

126
00:08:11,630 --> 00:08:11,990
Correct?

127
00:08:12,080 --> 00:08:13,460
Again, I'm getting the actions.

128
00:08:13,460 --> 00:08:15,200
I'll cover that in a second.

129
00:08:15,560 --> 00:08:18,470
What's more interesting is we have this function.

130
00:08:18,500 --> 00:08:20,590
Notice how exporting is default.

131
00:08:20,850 --> 00:08:25,760
That's why I can name it reducer in my file just so it's a bit easier.

132
00:08:26,030 --> 00:08:27,380
And we're getting two things.

133
00:08:27,380 --> 00:08:30,890
We're getting state and we're getting a action.

134
00:08:31,190 --> 00:08:33,200
So action is something we would want to do.

135
00:08:33,530 --> 00:08:38,350
And state is the current state or old state before the update.

136
00:08:38,930 --> 00:08:44,210
So I'm going to get my state and then once I'm done with my action, whatever it is, then of course

137
00:08:44,210 --> 00:08:46,040
I will just want to return that new state.

138
00:08:46,490 --> 00:08:51,680
Now, the reason why I have this return state here and then only I'm throwing the error, you'll sometimes

139
00:08:51,680 --> 00:08:55,610
run into this annoying bug where you first set up the action.

140
00:08:55,850 --> 00:08:56,990
Everything is beautiful.

141
00:08:56,990 --> 00:09:00,350
You maybe invoke this function, which we're going to do in a second.

142
00:09:00,800 --> 00:09:05,290
And then if you right away throw the error, well, there's just going to be an error.

143
00:09:05,300 --> 00:09:06,560
Again, it's not a big deal.

144
00:09:06,560 --> 00:09:09,200
We will remove this return state eventually.

145
00:09:09,470 --> 00:09:13,840
But for the time being, just so I don't have those weird bugs were all right away.

146
00:09:13,850 --> 00:09:14,600
Have the error.

147
00:09:14,930 --> 00:09:17,360
I'm just returning a state by default.

148
00:09:17,750 --> 00:09:20,540
And like I said, there's many ways how we can do that.

149
00:09:20,540 --> 00:09:24,860
In my case, I prefer using the if statements instead of the switch.

150
00:09:25,130 --> 00:09:29,300
So I will just say if and then action and then type.

151
00:09:29,300 --> 00:09:31,520
And for the time being we have the string.

152
00:09:31,850 --> 00:09:33,830
So I'll have to copy and paste the value.

153
00:09:34,190 --> 00:09:37,580
Eventually I'll switch to the variable of course.

154
00:09:37,820 --> 00:09:39,830
So sidebar open then.

155
00:09:39,830 --> 00:09:44,110
I would want to do something and for the time being I'll just log on.

156
00:09:44,120 --> 00:09:46,760
I'll say the action type or you know.

157
00:09:46,790 --> 00:09:48,710
Yeah, I'll say action.

158
00:09:48,830 --> 00:09:52,730
Let's just see what we've got and once we have this in place.

159
00:09:53,660 --> 00:09:58,820
We're going to go back to the context and now I want to invoke this function now, in order to do that,

160
00:09:58,820 --> 00:10:03,590
I will use the use the fact so we're going to go with ears is a fact.

161
00:10:03,590 --> 00:10:08,360
And then as far as the callback function, I'm just going to say that I would want to run it once.

162
00:10:08,780 --> 00:10:13,790
And then let's just go with open sidebar and we're going to invoke it.

163
00:10:14,120 --> 00:10:18,720
And I would want to navigate to the bigger screen to check out what kind of values we have.

164
00:10:19,130 --> 00:10:20,040
So let's do that.

165
00:10:20,540 --> 00:10:25,130
I'm going to open up the console and we should see in the console the object.

166
00:10:25,400 --> 00:10:26,180
And there it is.

167
00:10:26,210 --> 00:10:28,490
I have type sidebar open.

168
00:10:28,850 --> 00:10:36,590
So now, of course, what we could do is go back to the producer and say if the action type is a side

169
00:10:36,590 --> 00:10:40,400
bar open, then of course I would want to return the state.

170
00:10:40,640 --> 00:10:46,730
So my current state, but of course I would want to change the value for the property of now.

171
00:10:47,030 --> 00:10:48,770
Is sidebar open?

172
00:10:48,770 --> 00:10:49,180
Correct.

173
00:10:49,550 --> 00:10:53,780
Since once I dispatch this, I would want to open up my sidebar.

174
00:10:53,780 --> 00:10:54,800
I would want to showcase it.

175
00:10:54,810 --> 00:10:59,900
So because this needs to be set to trial on the way, we're going to do that.

176
00:10:59,900 --> 00:11:06,380
We're going to say that if that is the case, we're just returning and the dot and then state.

177
00:11:06,860 --> 00:11:11,920
So the rest of the values, which at the moment we don't have, but eventually we will and will say

178
00:11:11,930 --> 00:11:15,590
is sidebar open is equal to true.

179
00:11:15,830 --> 00:11:19,520
So we would want to open up the sidebar and once we save.

180
00:11:20,440 --> 00:11:26,650
This, of course, should work where the sidebar should be open now, a few things.

181
00:11:26,660 --> 00:11:32,280
First of all, remember when we talked about the strengths, it is very easy to introduce the bug.

182
00:11:32,650 --> 00:11:40,450
So if I say here sidebar and of course, I'll remove that return state, so now I will throw the error

183
00:11:40,450 --> 00:11:42,670
because it is very useful to see that.

184
00:11:42,880 --> 00:11:49,990
We'll see that since the strengths don't match and we still invoke the function we're going to get of

185
00:11:49,990 --> 00:11:50,920
this giant error.

186
00:11:51,040 --> 00:11:53,980
That's why by default, I'm just returning instead.

187
00:11:54,100 --> 00:11:58,870
So you don't run into those issues when you're dispatching your first action.

188
00:11:58,870 --> 00:12:02,670
But eventually I would want to keep it this way because I will right away let me know.

189
00:12:02,680 --> 00:12:06,090
Hey, listen, there's something off as far as my setup.

190
00:12:06,370 --> 00:12:13,300
Now, a better setup is if we have all our actions in separate place as variables, and that is if we

191
00:12:13,300 --> 00:12:14,770
navigate the actions.

192
00:12:14,770 --> 00:12:21,500
Jass, which are, by the way, right next to the object notice, like I said, I already created all

193
00:12:21,500 --> 00:12:29,770
of these values for Y because like we just saw within the gas example, it's somewhat not productive

194
00:12:29,770 --> 00:12:31,930
if we have to type all this together.

195
00:12:32,260 --> 00:12:34,340
I don't think you'll learn anything from that.

196
00:12:34,660 --> 00:12:37,330
So here I have the variable I'm exploring.

197
00:12:37,510 --> 00:12:39,880
I have a sidebar open and sidebar close.

198
00:12:39,880 --> 00:12:47,140
And also as a quick side note, the reason why I'm going over every smallest detail in this setup is

199
00:12:47,140 --> 00:12:54,190
because later, since we have to repeat quite a few actions, I would want to move a bit more swiftly.

200
00:12:54,550 --> 00:12:59,200
So hopefully it's going to be clearer after the first two actions, how everything is going to work

201
00:12:59,440 --> 00:13:03,480
and then we don't have to spend this time on the general setup.

202
00:13:03,640 --> 00:13:04,930
Again, just a quick side note.

203
00:13:05,080 --> 00:13:09,550
I have these two actions, one for sidebar open, one for sidebar close.

204
00:13:09,850 --> 00:13:14,460
And the only thing as far as the value is just this string power.

205
00:13:14,800 --> 00:13:20,380
So now, of course, I can change this around where in the product's context, instead of using the

206
00:13:20,380 --> 00:13:23,230
string, that is very easy to make a mistake.

207
00:13:23,590 --> 00:13:30,340
I'm just going to go with my value since, of course, I'm importing I'm importing from the actions,

208
00:13:30,820 --> 00:13:34,530
all the actions that I'm interested in, the products context.

209
00:13:34,540 --> 00:13:36,370
Notice there's way more actions here.

210
00:13:36,730 --> 00:13:39,810
So each context is going to look for specific actions.

211
00:13:40,060 --> 00:13:42,520
It's not like every context needs all of them.

212
00:13:42,670 --> 00:13:44,830
And the same works in product reducer.

213
00:13:45,100 --> 00:13:46,240
Again, same thing.

214
00:13:46,600 --> 00:13:47,890
I need specific things.

215
00:13:47,890 --> 00:13:50,620
In this case it is a side bar open.

216
00:13:50,920 --> 00:13:56,620
So I'm going to go over here, side bar open and you can probably already guess, but if the action

217
00:13:56,620 --> 00:14:00,090
is sidebar close, what I would want to do while I would want to close it right.

218
00:14:00,550 --> 00:14:08,770
So let me just copy and paste and in here will change this around and say side bar and then close.

219
00:14:08,770 --> 00:14:12,730
If that is the case, then of course this will be back to force.

220
00:14:13,030 --> 00:14:17,470
Now, I don't need to add anything at the moment, so that should do it for the sidebar.

221
00:14:17,800 --> 00:14:21,320
And I also don't need to invoke it here with usufruct.

222
00:14:21,550 --> 00:14:23,590
This was just to showcase how it's going to work.

223
00:14:23,830 --> 00:14:28,300
Now, I would want to delete it and we're just going to copy and paste this one.

224
00:14:28,990 --> 00:14:35,470
So say that the function name is going to be different because now I want to close it and instead of

225
00:14:35,500 --> 00:14:41,500
action on the sidebar open, you can probably already s we're going to go with side bar close.

226
00:14:41,920 --> 00:14:48,340
Now, what's missing is passing the functions and the state that is very important.

227
00:14:48,670 --> 00:14:50,230
I need to have this value.

228
00:14:50,560 --> 00:14:55,610
I need to know whether sidebar is open or false because remember in the sidebar, we're actually checking

229
00:14:55,610 --> 00:14:55,780
that.

230
00:14:55,780 --> 00:14:56,160
Correct.

231
00:14:56,530 --> 00:14:59,560
So now we want to pass it down into more value.

232
00:14:59,830 --> 00:15:05,260
So I'm going to go with double Cali's because I'm going to go back to Joska for the first ones and then

233
00:15:05,260 --> 00:15:10,900
I'm setting up the object where first I will spread out my state because eventually there's going to

234
00:15:10,900 --> 00:15:11,620
be more values.

235
00:15:11,920 --> 00:15:15,190
It's not just the sidebar open, which is at the moment.

236
00:15:15,700 --> 00:15:18,820
And then, of course, I would also want to pass my functions.

237
00:15:19,120 --> 00:15:21,430
Now, again, there's going to be more functions.

238
00:15:21,550 --> 00:15:26,530
Well, actually, the only one we're going to pass it down, but let's just say more functions.

239
00:15:26,860 --> 00:15:32,500
And now I would want to pass these two open side bar and close side bar.

240
00:15:32,860 --> 00:15:37,510
So I'm by the way, this just gave me a control log, which is not something I wanted.

241
00:15:37,840 --> 00:15:41,410
And once we pass them down, I'll stop this video.

242
00:15:41,800 --> 00:15:47,800
But before I stop it, I would just want to navigate to the side bar and check whether I'm getting these

243
00:15:47,800 --> 00:15:48,190
values.

244
00:15:48,190 --> 00:15:49,540
So I'm not going to change this one around.

245
00:15:49,540 --> 00:15:52,600
But remember, we are setting up the provider.

246
00:15:53,470 --> 00:15:59,320
We are wrapping our whole application in the product provider that is very important.

247
00:15:59,740 --> 00:16:07,120
And then in the sidebar now, since, of course, the sidebar is in the app, I can access it using

248
00:16:07,120 --> 00:16:07,480
my hook.

249
00:16:07,500 --> 00:16:07,890
Correct.

250
00:16:08,230 --> 00:16:12,750
So we use products, contacts in the products contact.

251
00:16:12,790 --> 00:16:13,570
That is my hook.

252
00:16:13,900 --> 00:16:19,960
But just get me the products contact and I simply want to console log with whether I have.

253
00:16:20,440 --> 00:16:26,140
Whether everything works and here, let's just call this data, I mean, the naming is really up to

254
00:16:26,140 --> 00:16:28,810
you since all the structured in the next year anyway.

255
00:16:29,110 --> 00:16:30,970
And I'm going to go with data.

256
00:16:31,150 --> 00:16:36,280
And if you can see the state and those two functions, you should be in good shape.

257
00:16:36,550 --> 00:16:39,160
So when I get back here, I'll refresh, of course.

258
00:16:39,310 --> 00:16:43,240
And there is now I can see that in the sidebar line 13.

259
00:16:43,480 --> 00:16:45,130
I'm getting all these routers.

260
00:16:45,530 --> 00:16:49,480
Now, the last thing that I would want to mention is why I'm using the products.

261
00:16:50,240 --> 00:16:56,690
And honestly, the simple reason was because I didn't want to overcomplicate things and add one more

262
00:16:56,690 --> 00:16:58,940
context, because we need to understand that.

263
00:16:59,760 --> 00:17:06,360
Products context essentially will be responsible for getting my products from the API.

264
00:17:07,510 --> 00:17:10,670
It's going to get the product and it's going to get the single product.

265
00:17:11,170 --> 00:17:18,370
The reason why I did this sidebar is because I didn't want to create another new context for just a

266
00:17:18,370 --> 00:17:18,910
sidebar.

267
00:17:19,240 --> 00:17:20,840
It just seems for me overkill.

268
00:17:21,130 --> 00:17:27,900
So I needed to add it somewhere and I thought it would make the most sense in the product context.

269
00:17:28,120 --> 00:17:33,100
Normally, if you have more global things, like, for example, I don't know, maybe you have a model

270
00:17:33,340 --> 00:17:34,970
that you would want to toggle globally.

271
00:17:35,280 --> 00:17:41,920
Yeah, you could definitely set up a global context and then place both of these things in their sidebar,

272
00:17:42,070 --> 00:17:44,200
as well as the model for me.

273
00:17:44,530 --> 00:17:50,620
I just thought it's a bit of an overkill just to create a new context with new producer just to control

274
00:17:50,620 --> 00:17:51,430
the sidebar.

275
00:17:51,700 --> 00:17:55,000
That's why I kind of jammed it in the product.

276
00:17:55,060 --> 00:17:56,410
Hopefully you can forgive me.

277
00:17:56,560 --> 00:17:58,630
Hopefully you understand my reasons.

278
00:17:58,950 --> 00:18:05,680
And of course, we can start selling functionality where once we click on some buttons, on some links,

279
00:18:06,010 --> 00:18:11,820
we're actually invoking the open sidebar function and the closed sidebar function as well.