1
00:00:00,330 --> 00:00:01,240
Not bad, not bad.

2
00:00:01,260 --> 00:00:09,730
We can fetch all our products and we are in good shape, but we would need to add some code in such

3
00:00:09,750 --> 00:00:15,680
products because I would want to handle loading, I would want to handle error.

4
00:00:16,170 --> 00:00:21,390
And also I would want to set everything up with use producer.

5
00:00:21,810 --> 00:00:22,260
Correct.

6
00:00:22,620 --> 00:00:28,010
And we're going to start by adding more properties in our initial step to moment.

7
00:00:28,350 --> 00:00:31,110
The only thing we have is the sidebar thing.

8
00:00:31,620 --> 00:00:33,980
Now, I would want to add more properties.

9
00:00:34,020 --> 00:00:38,970
Now, the first one will be loading, but since there's going to be two loadings, there's going to

10
00:00:38,970 --> 00:00:42,270
be one for single product and one for all the product.

11
00:00:42,660 --> 00:00:46,050
The naming is going to be a bit more annoying.

12
00:00:46,290 --> 00:00:49,410
We're going to go with products and then loading.

13
00:00:49,770 --> 00:00:53,940
So underscore loading and by default it is going to be false.

14
00:00:54,430 --> 00:01:01,420
Then I would also want to handle the error and we're going to go with products underscore and then error.

15
00:01:01,640 --> 00:01:04,740
Then by default it is going to be false.

16
00:01:05,090 --> 00:01:08,520
Then I would want to set up my actual product.

17
00:01:08,760 --> 00:01:12,810
So eventually I know that if everything is correct, I'm going to get my product.

18
00:01:13,230 --> 00:01:21,180
And then I also have the feature product, correct and feature product I will pull out in the actual

19
00:01:21,300 --> 00:01:22,020
reducer.

20
00:01:22,470 --> 00:01:23,850
So I'll get all the product.

21
00:01:24,000 --> 00:01:30,280
I will pass in as my payload and then eventually in the reducer I will pull them up.

22
00:01:30,630 --> 00:01:37,710
So my default, they are going to be feature products and they're just going to be empty.

23
00:01:37,710 --> 00:01:38,040
All right.

24
00:01:38,880 --> 00:01:44,460
There's going to be three more properties for a single product, so there's going to be loading our

25
00:01:44,850 --> 00:01:49,090
product and we can add them right now or we can skip it doesn't really matter.

26
00:01:49,110 --> 00:01:54,550
I think I'm going to skip it for now and we'll add them later once we start dealing with single product.

27
00:01:54,960 --> 00:01:57,340
So that should be our stock then.

28
00:01:57,420 --> 00:02:05,160
Of course, for every action I would want to do, I would need to set up the actual action variable.

29
00:02:05,160 --> 00:02:05,540
Correct.

30
00:02:05,910 --> 00:02:10,390
And you can probably already guess that that is already taken care of where?

31
00:02:10,400 --> 00:02:13,680
No, I have one for get products begin.

32
00:02:14,130 --> 00:02:17,130
So this is going to be for loading get product success.

33
00:02:17,350 --> 00:02:20,760
This is when we get our product and there is no error.

34
00:02:21,240 --> 00:02:23,390
And also I would want to handle the error.

35
00:02:23,490 --> 00:02:26,070
That's why we get product error.

36
00:02:26,550 --> 00:02:34,200
And if we take a look at the product context, we can see that I imported all of these three actions.

37
00:02:34,200 --> 00:02:34,700
Correct.

38
00:02:34,710 --> 00:02:36,960
So I have these variables.

39
00:02:37,320 --> 00:02:45,870
And then if we take a look at the reducers, we also see that in a product producer, I have all these

40
00:02:45,870 --> 00:02:46,410
three action.

41
00:02:46,920 --> 00:02:53,040
So now, of course, in the function, I would want to set up those actions using this patch.

42
00:02:53,460 --> 00:02:54,630
So I'm going to navigate back.

43
00:02:54,750 --> 00:03:01,080
We have much product and the first thing that I would want to do is dispatch the loading one and remember

44
00:03:01,080 --> 00:03:01,800
the action.

45
00:03:01,950 --> 00:03:04,660
The name for that action was get product begin.

46
00:03:05,130 --> 00:03:06,360
So we're going to go with dispatch.

47
00:03:07,450 --> 00:03:14,140
And then I'm going to pass in type, of course, and we'll get product and then begin.

48
00:03:14,620 --> 00:03:16,740
So this is going to set uploading now.

49
00:03:16,750 --> 00:03:18,490
Of course, there's going to be right away.

50
00:03:18,490 --> 00:03:19,260
And why?

51
00:03:19,840 --> 00:03:24,630
Because remember, in a product producer, are we taking care of that now?

52
00:03:25,180 --> 00:03:28,750
But just to prove my point, I will still invoke it.

53
00:03:28,870 --> 00:03:29,640
And there it is.

54
00:03:29,800 --> 00:03:34,130
Now, of course, we have this big fat error where we have get product begin.

55
00:03:34,620 --> 00:03:36,650
Now there's no matching type.

56
00:03:37,090 --> 00:03:41,940
So we navigate bravely back to the product producer and set this up.

57
00:03:42,130 --> 00:03:51,430
Correct me if I'm an action type is equal to get product and then begin then what I would want.

58
00:03:51,460 --> 00:03:54,610
Well, I would want to return all the properties that I have in a state.

59
00:03:54,970 --> 00:03:57,070
And what was the property for the loading one?

60
00:03:57,430 --> 00:04:03,390
Well, we're going to go with products and I believe it was loading and I'll set it equal to true.

61
00:04:03,760 --> 00:04:04,060
Right.

62
00:04:04,270 --> 00:04:09,040
So once we start pitching the product, I'll set this one equal to true.

63
00:04:09,220 --> 00:04:15,880
And you can probably already guess that somewhere in our project we will be looking for this property

64
00:04:15,880 --> 00:04:16,600
for the value.

65
00:04:16,990 --> 00:04:21,600
And then depending on that, there's going to be Spiner or there's not going to be a Spiner.

66
00:04:21,910 --> 00:04:22,840
So I'll save this one.

67
00:04:23,170 --> 00:04:26,600
So now we shouldn't have the error and we're definitely loading.

68
00:04:26,980 --> 00:04:31,170
Now, I'm not going to set up right away some kind of Spiner in application.

69
00:04:31,180 --> 00:04:36,190
What I would want you to show is the fact that we can always check everything with components.

70
00:04:36,520 --> 00:04:39,040
So we have product provider, correct.

71
00:04:39,830 --> 00:04:43,950
And notice, I have this producer and check it out.

72
00:04:44,300 --> 00:04:47,990
So at the moment, sidebar is false, but the product floating is true.

73
00:04:48,620 --> 00:04:54,720
But if I refresh, you'll notice, of course, that it is going to be false and then it will turn true.

74
00:04:55,070 --> 00:04:57,310
Now it's going to be a little bit faster.

75
00:04:57,500 --> 00:04:58,520
It's going to be hard to see.

76
00:04:58,730 --> 00:05:04,730
But just keep in mind that in this case, I'm not going to build something to showcase that we're loading.

77
00:05:04,740 --> 00:05:11,390
But you can always go back to the components to react afterwards and just check your state, ours.

78
00:05:11,660 --> 00:05:14,170
This is exactly what we are going to do.

79
00:05:14,330 --> 00:05:17,120
So we begin putting product.

80
00:05:17,130 --> 00:05:18,320
So we start loading.

81
00:05:18,770 --> 00:05:22,940
And of course, we would need to handle two questions, one for there.

82
00:05:23,390 --> 00:05:27,670
And then the second one is if everything is successful.

83
00:05:28,130 --> 00:05:32,030
And for that, I'm going to set up a try and catch just because.

84
00:05:32,360 --> 00:05:34,110
So I'm going to go try catch.

85
00:05:34,130 --> 00:05:36,710
I'll move my response in the try block.

86
00:05:37,250 --> 00:05:41,030
And I also would want to right away pull out my data.

87
00:05:41,360 --> 00:05:45,780
Some say CONSED and that product is equal to response data.

88
00:05:45,980 --> 00:05:52,820
Remember, the array was in the data property and then I'm not going to log the response in this case.

89
00:05:53,180 --> 00:06:00,170
What I'm gonna do is I eventually set up the error so I might as well just leave the console, log off

90
00:06:00,170 --> 00:06:01,420
and be done with it.

91
00:06:01,760 --> 00:06:02,930
So we have product.

92
00:06:03,050 --> 00:06:05,920
It is equal to response data that is equal to.

93
00:06:06,020 --> 00:06:06,320
Right.

94
00:06:06,680 --> 00:06:10,190
So now of course, let's try setting up the action.

95
00:06:10,550 --> 00:06:12,020
So we're going to go with a dispatch.

96
00:06:13,020 --> 00:06:19,470
And the name of this action is going to be get product success, and as far as the payload, well,

97
00:06:19,530 --> 00:06:20,880
I'll pass in my products.

98
00:06:21,300 --> 00:06:26,710
So I say here, payload is equal to a product.

99
00:06:27,240 --> 00:06:28,110
So we say it.

100
00:06:28,440 --> 00:06:30,090
We should get our products.

101
00:06:30,090 --> 00:06:36,300
But first, of course, there's going to be a big, fat mess because we're not handling that in our

102
00:06:36,300 --> 00:06:37,010
producer.

103
00:06:37,380 --> 00:06:44,620
So in order to fix our error, I would need to navigate to my producer and handle that.

104
00:06:45,000 --> 00:06:49,740
So in this case, of course, we're talking about get product and success.

105
00:06:50,250 --> 00:06:51,780
And there's two cases.

106
00:06:52,050 --> 00:06:54,000
There's one for featured ones.

107
00:06:54,450 --> 00:06:56,520
So you have to filter our existing.

108
00:06:56,520 --> 00:06:56,820
All right.

109
00:06:57,090 --> 00:07:03,540
And the second one is just dumping the product that we're getting into our state property.

110
00:07:03,690 --> 00:07:04,100
Correct.

111
00:07:04,380 --> 00:07:07,710
So let's navigate to product a reducer again.

112
00:07:07,710 --> 00:07:09,210
What action type are we looking for?

113
00:07:09,240 --> 00:07:12,450
Well, we would want to get product success.

114
00:07:12,450 --> 00:07:21,160
So if action and that type is equal to get product and success.

115
00:07:21,630 --> 00:07:27,360
So then, of course, I would want to update both of my arrays and let's start with the featured ones,

116
00:07:27,780 --> 00:07:34,440
because remember, we have the array and each object has that feature property, meaning if the product

117
00:07:34,440 --> 00:07:36,660
is featured, then it has the feature property.

118
00:07:36,660 --> 00:07:39,970
If not, then there's no property by the name of featured.

119
00:07:40,350 --> 00:07:47,850
So before I return my state, I can simply say get featured, product featured and then product.

120
00:07:47,850 --> 00:07:55,290
And that is equal to action payload since the products are coming in the payload and.

121
00:07:55,290 --> 00:07:55,650
All right.

122
00:07:55,660 --> 00:08:01,890
Or set up my filter and I'll say if the product has the property feature true.

123
00:08:02,250 --> 00:08:04,710
And of course I would want to return this product.

124
00:08:05,100 --> 00:08:06,330
So this is my product.

125
00:08:06,780 --> 00:08:14,790
And you know what I think I'm going to do implicit return where I'll just say product then featured

126
00:08:15,120 --> 00:08:16,890
an equal the true.

127
00:08:17,320 --> 00:08:19,770
So so those are going to be my feature product.

128
00:08:20,070 --> 00:08:22,680
And then the second thing is all the products.

129
00:08:23,010 --> 00:08:23,450
Correct.

130
00:08:23,790 --> 00:08:31,670
And one thing you'll notice here that I still get error, even though technically we handle that y well

131
00:08:31,680 --> 00:08:33,300
because we're not returning a state.

132
00:08:33,720 --> 00:08:38,430
So that's important, meaning we're not returning anything from this condition.

133
00:08:38,460 --> 00:08:43,340
So if our set a simple return, then of course I'm not going to get this error.

134
00:08:43,890 --> 00:08:50,370
But keep in mind that you will get this error even as you're working on this action type if you're not

135
00:08:50,370 --> 00:08:51,170
returning something.

136
00:08:51,540 --> 00:08:54,820
So just in case that trips you up, why was that happening?

137
00:08:55,050 --> 00:08:57,120
Well, because we don't have the return.

138
00:08:57,300 --> 00:09:00,590
And the moment we have the return, there's going to be no error.

139
00:09:01,050 --> 00:09:05,640
And as far as the return, well, I would want to return all the stake correct.

140
00:09:06,000 --> 00:09:09,200
And I would want to set my loading to false.

141
00:09:09,360 --> 00:09:11,630
Remember, initially, we set it to true.

142
00:09:12,000 --> 00:09:18,540
So let's go here or say product and then underscore loading is equal to false, of course.

143
00:09:18,870 --> 00:09:19,890
And then two things.

144
00:09:20,010 --> 00:09:27,510
First, I would want to set my product so the product array to my full payload and then feed your product

145
00:09:27,510 --> 00:09:29,690
will be equal to the new order.

146
00:09:30,090 --> 00:09:31,020
So let's try it out.

147
00:09:31,230 --> 00:09:41,080
We're going to go with product is equal to a action and then payload push and then feature product.

148
00:09:41,100 --> 00:09:48,330
Well, since the name is exactly the same as I have for my variable, I can just do the S6 thing where

149
00:09:48,330 --> 00:09:51,090
I don't need to set it equal to feature product.

150
00:09:51,480 --> 00:09:56,070
And of course now we can save and I'm going to navigate to the bigger screen and again.

151
00:09:56,920 --> 00:10:02,940
I'm going to show you what we've got, so in the beginning, we should have empty eyes, correct?

152
00:10:03,370 --> 00:10:04,720
So let's refresher.

153
00:10:05,110 --> 00:10:08,790
We should have empty arrays and as you can see, it happens somewhat quick.

154
00:10:09,100 --> 00:10:10,990
So now, of course, I have the product.

155
00:10:11,260 --> 00:10:16,600
Loading is false and feature product is the array of six items.

156
00:10:16,870 --> 00:10:20,520
And then the last thing that I would want is to take care of the error.

157
00:10:20,860 --> 00:10:28,760
So inside of the product context and inside of the [REMOVED], what I would want is this the error.

158
00:10:29,080 --> 00:10:35,670
So if there's ever an error, I'll say this patch and line as far as the type, what we need to pass

159
00:10:35,680 --> 00:10:40,090
and of course, object first and then we're going to go with get product.

160
00:10:40,520 --> 00:10:42,960
And I believe it was error.

161
00:10:43,120 --> 00:10:46,980
So get get underscore product error.

162
00:10:47,260 --> 00:10:48,400
So that's my type.

163
00:10:48,760 --> 00:10:54,010
And we're not going to pass anything else in, but we'll handle that in the future.

164
00:10:54,400 --> 00:11:02,920
So now in the Reducers, set up one more action here and I'll say if action and then type is equal to

165
00:11:03,190 --> 00:11:05,770
get product error.

166
00:11:06,310 --> 00:11:11,410
So then of course I would want to return my state so that are not state.

167
00:11:11,530 --> 00:11:13,120
So Compi, all the values.

168
00:11:13,330 --> 00:11:18,370
But two things that I would want to change is I would still want to set loading to force.

169
00:11:18,400 --> 00:11:20,150
Remember, we were always doing that.

170
00:11:20,170 --> 00:11:25,460
So product loading should be false and then the error should be true.

171
00:11:25,810 --> 00:11:32,260
So in here we're going to go with product and error and that should be set to true.

172
00:11:32,680 --> 00:11:33,490
So Syrett.

173
00:11:34,360 --> 00:11:43,210
And we should have a nice function that handles loading that handle success as well as the Earth, and

174
00:11:43,210 --> 00:11:47,290
once we've got this in place, of course, now we can move on to the next step.