1
00:00:00,210 --> 00:00:00,940
Nicely done.

2
00:00:01,260 --> 00:00:09,930
We successfully have a single product page where we can display info stars, also change the colors

3
00:00:10,380 --> 00:00:14,040
that we're going to add to the cart or the amount.

4
00:00:14,490 --> 00:00:17,730
Now, let's focus on the product page.

5
00:00:18,310 --> 00:00:26,910
And before we start setting anything up, we just go over why we're setting up separate context, because

6
00:00:27,090 --> 00:00:34,080
technically, like I have already mentioned, probably quite a few times, you can jam everything in

7
00:00:34,080 --> 00:00:34,620
a product.

8
00:00:35,100 --> 00:00:37,980
We already have functionality for the sidebar.

9
00:00:37,980 --> 00:00:38,330
Correct.

10
00:00:38,640 --> 00:00:46,500
We already fetching the product, so we might as well set up the filter functionality and sort and everything

11
00:00:46,500 --> 00:00:47,760
else there as well.

12
00:00:47,760 --> 00:00:50,860
But it's going to be harder and harder to manage.

13
00:00:51,240 --> 00:00:58,080
So that's why we'll set up another context, which is just going to be responsible for filtering, for

14
00:00:58,080 --> 00:01:01,340
sorting and then also changing the view.

15
00:01:01,950 --> 00:01:04,610
So there's going to be a great view and a list.

16
00:01:04,620 --> 00:01:07,320
You again, let me just be very clear.

17
00:01:07,680 --> 00:01:15,510
The whole reason why we're doing that is because I would want to make it easier as our project gets

18
00:01:15,510 --> 00:01:21,810
bigger, because then I know if I have to set up something in the filters, I just look for that context,

19
00:01:22,050 --> 00:01:23,580
set up to functionality over there.

20
00:01:23,790 --> 00:01:25,470
And I'm in good shape.

21
00:01:25,650 --> 00:01:31,080
Technically, if you want to, you can still jam everything in the product.

22
00:01:31,350 --> 00:01:38,640
So we're going to navigate to my filter context, which at the moment should have only the boilerplate.

23
00:01:39,390 --> 00:01:45,540
And now there's one more thing that I would want you to think about when it comes to filtering, we

24
00:01:45,540 --> 00:01:46,710
really need two things.

25
00:01:47,190 --> 00:01:52,970
We need all the products, but we also need this default value.

26
00:01:53,400 --> 00:02:00,120
So essentially, if I start filtering notice at some point, I would want to go back to all the products.

27
00:02:00,140 --> 00:02:00,410
Right.

28
00:02:00,690 --> 00:02:07,170
Otherwise, if I just start filtering and eventually user gets the one product and he or she wants to

29
00:02:07,170 --> 00:02:11,350
go back to the default, how am I going to do that if there is no such option?

30
00:02:11,620 --> 00:02:14,560
So of course we have the option to clearing the filters.

31
00:02:15,060 --> 00:02:22,050
That's why it is going to be very important for us to set up two instances with product.

32
00:02:22,920 --> 00:02:28,510
So we're going to have one instance in a product in which we are going to filter social change.

33
00:02:28,530 --> 00:02:33,600
Well, how big is the IRA, for example, if it matches the filters, then, of course, there's going

34
00:02:33,600 --> 00:02:34,160
to be returned.

35
00:02:34,170 --> 00:02:36,670
If not, then we'll dump it from that.

36
00:02:36,720 --> 00:02:36,950
All right.

37
00:02:37,350 --> 00:02:42,360
But there's always this default threat that has all the product.

38
00:02:42,690 --> 00:02:47,320
So if we ever have to, we can go back to the default scenarios.

39
00:02:47,340 --> 00:02:50,310
In this case, we have three products and we go back to default.

40
00:02:50,760 --> 00:02:58,200
And the Gotcher here is how we can get those products from the products context to the filter context,

41
00:02:59,010 --> 00:03:03,840
because I would want to have a separate context for my product page.

42
00:03:04,350 --> 00:03:10,500
So if we navigate back course, I have filter context and if I take a look at the product context where

43
00:03:10,500 --> 00:03:17,340
I have all the products course that is in the products property right here, which in the beginning

44
00:03:17,490 --> 00:03:21,480
is an empty array, and then eventually we fetch all the product.

45
00:03:21,960 --> 00:03:24,720
Now the gotcha here that of course we are using the hook.

46
00:03:25,020 --> 00:03:25,490
Correct.

47
00:03:25,500 --> 00:03:28,640
We have this hook where it is, where it is.

48
00:03:29,190 --> 00:03:31,220
We have used product context.

49
00:03:31,270 --> 00:03:32,010
That's the hook.

50
00:03:32,190 --> 00:03:40,050
And the thing is, I cannot go to the filter reducer because we also have reducer for filter, which

51
00:03:40,050 --> 00:03:40,670
we're going to use.

52
00:03:41,040 --> 00:03:45,510
I cannot go over here and just grab those products and add to the state.

53
00:03:45,750 --> 00:03:46,230
Why?

54
00:03:46,260 --> 00:03:51,690
Well, because it is a hook and this is a simple function.

55
00:03:52,030 --> 00:04:00,210
So remember rules of Hock's when we had a hook, we could either invoke it and a react component or

56
00:04:00,330 --> 00:04:01,490
in another hook.

57
00:04:01,950 --> 00:04:08,080
Now when it comes to filter reducer, it's neither is just a simple function.

58
00:04:08,610 --> 00:04:17,370
So what we're going to have to do is set up a action that actually takes those products from the product

59
00:04:17,370 --> 00:04:21,420
context and dumps them into the filter context.

60
00:04:21,990 --> 00:04:25,850
And you can probably already guess that I set up that action.

61
00:04:26,160 --> 00:04:33,540
So if we take a look at the actions, just file now after we have get single product, we have load

62
00:04:33,900 --> 00:04:35,520
product action.

63
00:04:35,880 --> 00:04:41,240
And this is the action that we're going to set up in the filter context.

64
00:04:41,430 --> 00:04:42,540
So let's navigate back.

65
00:04:43,470 --> 00:04:49,590
We have our filter producer where we'll set up all the filtering functionality and we also have the

66
00:04:49,590 --> 00:04:50,490
filter context.

67
00:04:50,490 --> 00:04:55,920
And also as a quick side note, you also want to have multiple contexts in this case because you don't

68
00:04:55,920 --> 00:05:00,230
want to jump all the functionality in one producer as well.

69
00:05:00,690 --> 00:05:02,070
So it goes both ways.

70
00:05:02,490 --> 00:05:10,520
You want to have a cleaner context file where it's easier to navigate around and the same goes for producer.

71
00:05:10,770 --> 00:05:12,420
Can you jam everything in one?

72
00:05:12,720 --> 00:05:14,880
Like I have already said 20 thousand times.

73
00:05:15,030 --> 00:05:21,440
Yes, but it might come back and bite you as your project gets bigger and bigger.

74
00:05:21,810 --> 00:05:28,570
So in the filter context, for the time being, I would just want to set up to stay two hours.

75
00:05:28,710 --> 00:05:30,060
I have my natural state.

76
00:05:30,300 --> 00:05:34,260
I don't have a user, Doozer, but I would want to set up two properties.

77
00:05:34,680 --> 00:05:37,650
One is going to be four filtered products.

78
00:05:38,040 --> 00:05:39,330
So that's going to be the array.

79
00:05:39,330 --> 00:05:44,850
That's always going to be changing as the user changes the values in filters.

80
00:05:45,300 --> 00:05:48,900
And for the time being, it's going to have to be an empty array.

81
00:05:49,200 --> 00:05:52,780
And the second one will be that all product one.

82
00:05:53,400 --> 00:06:00,000
So this is going to be the case where if I ever need to go back to the default, I will have this value

83
00:06:00,210 --> 00:06:01,460
as a product.

84
00:06:01,800 --> 00:06:02,820
So we have to start.

85
00:06:03,610 --> 00:06:10,780
And the next one is, of course, the user reducer, so let's go here with CONSED and then State and

86
00:06:10,780 --> 00:06:12,360
of course we're getting back to dispatch.

87
00:06:12,370 --> 00:06:19,870
Remember that was the case and this is going to be equal to my use and mine reducer and will pass.

88
00:06:19,870 --> 00:06:26,290
And the producer in this case, it is a filter producer and we pass in the initial state.

89
00:06:26,290 --> 00:06:26,720
Correct.

90
00:06:27,070 --> 00:06:30,450
Now before we do anything, let's just drop our application.

91
00:06:30,880 --> 00:06:33,760
So we're going to navigate to it next year.

92
00:06:34,180 --> 00:06:40,180
And the key here is place the filter provider inside of the product provider.

93
00:06:41,090 --> 00:06:48,320
OK, that is extremely, extremely important because what we're trying to do is get some info from the

94
00:06:48,320 --> 00:06:50,420
product into the filter.

95
00:06:50,720 --> 00:06:56,090
That's why we need to make sure that we wrap our filter provider in our products provider.

96
00:06:56,450 --> 00:07:01,430
So we go here with filter provider and we're just going to wrap our app.

97
00:07:02,090 --> 00:07:09,770
So that just ensures that we'll always have access to the data that is coming from the product provider

98
00:07:10,280 --> 00:07:12,230
and that in filter context.

99
00:07:12,260 --> 00:07:13,700
Now we want to do two things.

100
00:07:14,210 --> 00:07:20,970
I would first want to get my product from the product context that let me go over one more time.

101
00:07:21,390 --> 00:07:30,600
Remember, in the product context, we had all the product in the state of our correct name was product.

102
00:07:30,980 --> 00:07:32,510
So now I would want to grab them.

103
00:07:33,480 --> 00:07:37,860
And I kind just pass them into the filter reducer.

104
00:07:38,130 --> 00:07:44,670
It's impossible, I would need to do it through the filter provider or component screen here.

105
00:07:44,670 --> 00:07:51,060
First, let me grab those products so consed and I'm just looking for the products properly here and

106
00:07:51,060 --> 00:07:55,380
that is going to be equal to my use and products context.

107
00:07:55,380 --> 00:08:00,240
I invoke it, but then remember, I cannot just pass it into the state directly.

108
00:08:00,480 --> 00:08:05,420
I cannot say, hey, listen, put those products into this initial step.

109
00:08:05,690 --> 00:08:06,890
That's not going to work.

110
00:08:07,170 --> 00:08:10,040
What I would want is to set up my usufruct.

111
00:08:10,470 --> 00:08:17,400
So when this component mounts, then I would want to dispatch an action which is going to be lowed products.

112
00:08:17,760 --> 00:08:21,660
And the way is going to look like we're going to go with use effect.

113
00:08:22,200 --> 00:08:24,240
And then, of course, we have our callback function.

114
00:08:24,600 --> 00:08:31,290
But the gotcha is that, remember, product initially is just going to be empty or even in the product

115
00:08:31,290 --> 00:08:31,680
context.

116
00:08:32,050 --> 00:08:34,940
That's why our dependency will pass in the product.

117
00:08:35,280 --> 00:08:41,610
So as this changes, as we fetch the product that again, we invoke the same thing.

118
00:08:41,610 --> 00:08:48,510
We invoke the dispatch with a type of product, meaning load products are not the type.

119
00:08:48,750 --> 00:08:51,330
So we're going to go with dispatch here, this patch.

120
00:08:51,600 --> 00:08:56,160
And then, like I said, the type will be load product.

121
00:08:56,430 --> 00:09:00,480
And then as far as the payload will, that will be equal to this product.

122
00:09:00,900 --> 00:09:03,410
Initially, it is going to be an empty array, remember?

123
00:09:03,420 --> 00:09:08,520
And then once we fetch, well, then we will invoke usufruct one more time.

124
00:09:08,850 --> 00:09:12,940
And as far as the payload, we pass in the product.

125
00:09:13,320 --> 00:09:16,680
So now, of course, we just need to handle that in our producer.

126
00:09:17,070 --> 00:09:23,250
So let's navigate to the producer and let's say, where is my producer?

127
00:09:24,160 --> 00:09:31,170
I'm going to go to the filter or I'm sorry, reducers, and I'm looking for filter reducer at the moment,

128
00:09:31,180 --> 00:09:35,800
I'm just going to return state since, of course, we're not handling that action yet.

129
00:09:36,220 --> 00:09:38,350
And I'm going to say if action.

130
00:09:39,260 --> 00:09:48,410
And that type is equal to load products, so triple equals and we're looking for load product, if that

131
00:09:48,410 --> 00:09:55,340
is the case, then of course I would want to change my state values and the way I'm going to change

132
00:09:55,340 --> 00:10:00,830
them, I'm going to go return and value that state since there's going to be more properties in there.

133
00:10:01,270 --> 00:10:05,660
And this is the biggest Gocha, where, remember, we have two properties.

134
00:10:05,930 --> 00:10:08,160
We have all products and filter products.

135
00:10:08,610 --> 00:10:15,800
Now, I would want to set my products that are coming as a payload equal to both of them, but we need

136
00:10:15,800 --> 00:10:18,770
to use the spread operator in here.

137
00:10:18,790 --> 00:10:26,540
Let's go with all products is equal to dot, dot, dot and action and then payload because remember,

138
00:10:26,540 --> 00:10:29,070
that's where the products are located.

139
00:10:29,360 --> 00:10:37,460
Now, why we're doing this is because if we all just set it equal to all products and the same for filter

140
00:10:37,460 --> 00:10:37,940
product.

141
00:10:38,810 --> 00:10:44,090
What is going to happen is that once you filter the products, you kind of go back to the default because

142
00:10:44,090 --> 00:10:48,700
the way the job market works will point to the same place in the memory.

143
00:10:49,100 --> 00:10:53,690
So if we use the spread operator now, we're just copying the virus.

144
00:10:53,690 --> 00:10:56,350
And that is extremely, extremely important.

145
00:10:56,360 --> 00:11:01,400
If you won't do that, your whole functionality will eventually go bananas.

146
00:11:01,430 --> 00:11:08,390
Trust me, I learned the hard way and we're going to go with action and payload again.

147
00:11:08,750 --> 00:11:15,530
Both of them are equal to my products that are coming from the payload, but I'm using the spread operator,

148
00:11:15,890 --> 00:11:17,630
so I'm just copying the values.

149
00:11:18,050 --> 00:11:22,070
I'm not referencing to the same place in the memory.

150
00:11:22,370 --> 00:11:26,410
And I think we're in good shape so I can remove this short term state.

151
00:11:26,420 --> 00:11:27,500
We won't need this anymore.

152
00:11:27,510 --> 00:11:34,070
I would want to throw the error if we're not handling the action and if we want to double check, if

153
00:11:34,070 --> 00:11:41,300
all our functionality is correct, then of course we would need to navigate back to our project and

154
00:11:41,300 --> 00:11:42,530
again to look for components.

155
00:11:42,530 --> 00:11:48,380
And now notice how I have a product provider, which of course has all my state powers.

156
00:11:48,740 --> 00:11:54,410
But then I also have the filter provider because I placed that filter provider inside of the product

157
00:11:54,410 --> 00:11:55,000
on correct.

158
00:11:55,340 --> 00:11:56,390
So on the provider.

159
00:11:56,390 --> 00:11:59,060
Notice how again, initially it is empty.

160
00:11:59,060 --> 00:11:59,350
All right.

161
00:11:59,540 --> 00:12:00,440
We already know that.

162
00:12:00,440 --> 00:12:06,860
I'm not going to share that one more time, but once we're done with our of now, notice all products

163
00:12:06,860 --> 00:12:09,200
and filter products is.

164
00:12:09,200 --> 00:12:09,770
And by the way.

165
00:12:10,710 --> 00:12:17,730
My bad think I messed up, it should be filter product or here, let me just double check and filter

166
00:12:17,730 --> 00:12:18,160
products.

167
00:12:18,420 --> 00:12:19,170
My apologies.

168
00:12:19,560 --> 00:12:23,160
Not both of them are arrays of 17 items.

169
00:12:23,590 --> 00:12:31,770
And this is the one that will change as we filtering and this one will always stay with default.

170
00:12:32,580 --> 00:12:39,060
And if we ever need to go back to the default, then of course, we'll just set default our products

171
00:12:39,060 --> 00:12:41,000
equal to all product.

172
00:12:41,460 --> 00:12:47,930
Hopefully everything is clear and now we can start slowly setting up the return in the product page.