1
00:00:00,120 --> 00:00:07,080
Nice work on setting up the initial functionality where we can control the state value using the select

2
00:00:07,470 --> 00:00:13,020
now of course, I would want to sort my items depending on that value.

3
00:00:13,380 --> 00:00:19,710
Now, what we need to understand is that we're not going to control the amount of items that one will

4
00:00:19,710 --> 00:00:24,290
still stay sovereignty in our case, meaning the original array.

5
00:00:24,930 --> 00:00:27,050
What we're controlling is the order.

6
00:00:27,540 --> 00:00:34,910
So based on our value, we'll either sorted by the lower, by the highest, as well as the name.

7
00:00:35,190 --> 00:00:43,170
Hopefully that is clear and also will rely heavily in this video on the sort method that comes with

8
00:00:43,170 --> 00:00:43,710
JavaScript.

9
00:00:43,980 --> 00:00:51,600
So if you need a refresher, please visit one of the links, since I'll try to explain in as much detail

10
00:00:51,600 --> 00:00:52,890
as I possibly can.

11
00:00:52,890 --> 00:00:59,330
But if some parts are still unclear, just utilize the external resources.

12
00:00:59,700 --> 00:01:02,280
So I'm going to navigate back to my project.

13
00:01:02,640 --> 00:01:11,610
And first, in a filter context, I would want to set up another action and this one is going to be

14
00:01:11,610 --> 00:01:12,630
again in the user.

15
00:01:13,350 --> 00:01:21,570
So what I would want is to have a user that runs every time we change this state value and also it runs

16
00:01:21,570 --> 00:01:27,540
after we set up the product, because remember, initially this filtered product is an empty array.

17
00:01:27,990 --> 00:01:34,680
And since our functionality will depend on this array, we also need to add product to that dependency.

18
00:01:34,710 --> 00:01:39,090
Right now, of course, there is already a action variable for that.

19
00:01:39,360 --> 00:01:44,580
And we just need to set up use the fact and eventually there's going to be filters here as well.

20
00:01:44,970 --> 00:01:49,710
But for the time being, we just need to set up our user fact and in our dependency, right.

21
00:01:49,710 --> 00:01:51,150
Let's write product.

22
00:01:51,570 --> 00:01:59,280
So when the product changes, we will run this one as well as, of course, initial amount and also

23
00:01:59,280 --> 00:02:05,890
when the state value offshore changes since that's when we click on the input.

24
00:02:05,910 --> 00:02:06,350
Correct.

25
00:02:06,510 --> 00:02:10,240
So we're going to go with state and then the value was sought.

26
00:02:10,560 --> 00:02:14,820
So once that value changes, I would want to invoke the speech.

27
00:02:15,270 --> 00:02:22,130
And then in this patch type will be and the name is update or I'm sorry sort product.

28
00:02:22,260 --> 00:02:23,360
My apologies, sir.

29
00:02:23,480 --> 00:02:24,470
So what product?

30
00:02:24,480 --> 00:02:29,670
Of course, again, variable is coming from my actions just now.

31
00:02:30,450 --> 00:02:33,810
We're not passing in any kind of payload.

32
00:02:34,140 --> 00:02:36,270
We just dispatch the action.

33
00:02:36,660 --> 00:02:42,330
And of course, we're going to get a big fat error because this is happening on initial month.

34
00:02:42,480 --> 00:02:47,220
So we just simply need to go to a filter reducer and handle that.

35
00:02:47,220 --> 00:02:53,850
And I'll start by simply setting up Dave and we're going to go with F action type is equal to.

36
00:02:53,850 --> 00:02:57,590
And remember, the name was short product.

37
00:02:57,930 --> 00:03:03,180
Well, then I would want to do something and this is going to be different, where we'll set up for

38
00:03:03,180 --> 00:03:09,360
more if statements for every state value that we have, possibly for short.

39
00:03:09,660 --> 00:03:15,120
Now, for the time being, I'm just going to return state so I don't get that annoying error like so.

40
00:03:15,130 --> 00:03:16,530
So that should fix it.

41
00:03:16,800 --> 00:03:22,680
We're just getting back our state and I will start by getting two values out of the state.

42
00:03:23,100 --> 00:03:25,200
First out, I want to get the sort value.

43
00:03:25,740 --> 00:03:28,010
So I would want to know how I should talk.

44
00:03:28,230 --> 00:03:31,170
And then the second one will be those filtered product.

45
00:03:31,530 --> 00:03:38,610
So we're going to go here with CONSED and I'm looking for short and then filtered and then product that

46
00:03:38,610 --> 00:03:39,630
is coming from the state.

47
00:03:39,840 --> 00:03:41,340
Of course, that's number one.

48
00:03:41,640 --> 00:03:50,190
Now the second thing will be a temp product array, which will change depending on my state value for

49
00:03:50,190 --> 00:03:50,690
my sort.

50
00:03:51,030 --> 00:03:58,170
So in here let's say lot and then temp product since we will change it in each if statement, if of

51
00:03:58,170 --> 00:04:03,270
course the condition matches and that is going to be empty right over here.

52
00:04:03,630 --> 00:04:10,200
And then let's set up, like I said, for if statements, so say if short and now we need to again use

53
00:04:10,200 --> 00:04:11,800
the same strings.

54
00:04:12,090 --> 00:04:16,580
So price and lowest, lowest like zero.

55
00:04:16,950 --> 00:04:22,980
And then for the time being, let's just cancel out the same thing so that we are aware of what is happening.

56
00:04:22,980 --> 00:04:23,730
Price lowest.

57
00:04:24,030 --> 00:04:26,880
And then I'm just going to copy and paste one, two, three, four.

58
00:04:27,240 --> 00:04:28,170
Why am I doing that?

59
00:04:28,170 --> 00:04:31,980
Because I have four possible values for the select one.

60
00:04:32,220 --> 00:04:34,900
And then of course, this is going to be priced highest.

61
00:04:34,920 --> 00:04:35,370
Correct.

62
00:04:35,760 --> 00:04:37,380
So I'll change this one around.

63
00:04:37,380 --> 00:04:44,310
Just make sure again that strings match exactly what you have here, but it's not going to make sense.

64
00:04:44,760 --> 00:04:48,420
And now, of course, I would want to go with name.

65
00:04:48,600 --> 00:04:59,740
So name A and and here we're going to go with a name Z, so name C I will say it, not Novik.

66
00:04:59,870 --> 00:05:01,310
It to the big screen.

67
00:05:02,380 --> 00:05:07,970
Just so we can see what is happening a bit clearer and of course, I have my issues affecting all that

68
00:05:07,970 --> 00:05:11,650
and what we should see in a council that we have price lower.

69
00:05:11,800 --> 00:05:12,130
Why?

70
00:05:12,460 --> 00:05:14,890
Because that is my initial value in state.

71
00:05:14,950 --> 00:05:15,400
Correct.

72
00:05:15,670 --> 00:05:20,460
When I go price highest and I should meet the condition here.

73
00:05:20,860 --> 00:05:23,890
And my second thought and of course, half price highest.

74
00:05:24,250 --> 00:05:29,410
And then one by one, we just need to use sort of filtered products.

75
00:05:29,860 --> 00:05:35,950
So the products that are currently displayed and of course I would want to change the order and then

76
00:05:35,950 --> 00:05:41,680
I'll right away set up my ten products equal to that value to have four if statements.

77
00:05:42,070 --> 00:05:49,930
And if the value matches, then of course, beautiful, I'll just add this up to be equal to whatever

78
00:05:50,180 --> 00:05:51,280
I'm filtering.

79
00:05:51,520 --> 00:05:55,170
OK, meaning more precisely sorting I guess.

80
00:05:55,570 --> 00:06:03,250
So start with type products over here and that the product is, you know, I'll change my mind.

81
00:06:03,760 --> 00:06:09,840
Filter product is just going to be dot the dot and filter products filtered and then products.

82
00:06:10,090 --> 00:06:14,980
So I copied the values from the filter product that is going to be my ten product.

83
00:06:15,160 --> 00:06:22,530
And then as far as the state well will return filtered products right now equal to my ten products.

84
00:06:23,080 --> 00:06:25,920
So at the moment you're like, OK, wait a minute, what is happening?

85
00:06:26,230 --> 00:06:28,360
Wigo go with filter products here.

86
00:06:28,510 --> 00:06:34,480
So set it equal to the ten products and then you return the filter product equal to ten products.

87
00:06:34,900 --> 00:06:41,140
Well, just in case, if there's some weird scenario where none of the match and at least I display

88
00:06:41,140 --> 00:06:46,660
something otherwise if I'm just going to go with empty array over here for ten products and then I set

89
00:06:46,660 --> 00:06:51,340
my filter products equal to an empty array, I'm not going to display any product.

90
00:06:51,520 --> 00:06:52,950
Hopefully that is clear.

91
00:06:53,350 --> 00:06:56,790
And then in the price lowest one I would want.

92
00:06:57,100 --> 00:07:03,190
Well, I'm going to go with them product and we'll just overwrite that value will go with type products

93
00:07:03,190 --> 00:07:05,410
and then let's use that sort.

94
00:07:05,430 --> 00:07:13,180
Method on certain products is equal to a short function and insert function we pass in a callback function.

95
00:07:14,030 --> 00:07:21,170
And in here, we can access to items meaning the one, the current one and the next one, and you can

96
00:07:21,170 --> 00:07:22,850
use whatever parameters you want.

97
00:07:23,060 --> 00:07:30,290
But in my case, I'm going to go with A and B, and honestly, the fastest way how we can write is simply

98
00:07:30,290 --> 00:07:32,120
by setting up the implicit return.

99
00:07:32,390 --> 00:07:38,300
So start with implicit return and I'll show you on the first one the long way.

100
00:07:38,540 --> 00:07:44,750
And then hopefully it's going to be clear and then we can continue with shorter terms here as well.

101
00:07:45,140 --> 00:07:48,710
So essentially, if you want to sort some items.

102
00:07:49,570 --> 00:07:55,870
Starting with a smallest value, first, we just need to go with Ihram, which in our case, of course,

103
00:07:55,870 --> 00:07:56,540
is the product.

104
00:07:56,780 --> 00:08:03,000
I remember when we talked about the product and this is extremely important product where we got.

105
00:08:03,130 --> 00:08:03,690
All right.

106
00:08:03,880 --> 00:08:04,330
All right.

107
00:08:04,570 --> 00:08:06,530
And then each item was that object.

108
00:08:06,790 --> 00:08:09,760
So when we're using that sort, we're iterating over there.

109
00:08:09,910 --> 00:08:10,280
Correct.

110
00:08:10,690 --> 00:08:15,810
And what I would want to do is compare my items based on that price.

111
00:08:16,120 --> 00:08:21,430
So A and B represent the current item and then the next item, meaning my product.

112
00:08:21,760 --> 00:08:28,300
And then I would want to store them based on price by placing the smallest item first.

113
00:08:28,570 --> 00:08:33,370
So that's why I'll go with a price minus B price.

114
00:08:33,380 --> 00:08:39,250
So again, we first start with a shortcut and then I'll show you the long way how the functionality

115
00:08:39,250 --> 00:08:39,550
works.

116
00:08:39,820 --> 00:08:46,720
And what we should see is the fact that we're sorting items based on the price.

117
00:08:47,050 --> 00:08:47,480
All right.

118
00:08:47,740 --> 00:08:53,680
Now, if we want to sort by the largest items first, then we'll just copy and paste and we need to

119
00:08:53,680 --> 00:08:54,620
flip through again.

120
00:08:54,640 --> 00:08:55,150
Don't worry.

121
00:08:55,480 --> 00:08:57,280
I will show you the long way.

122
00:08:57,580 --> 00:08:59,890
But since some people might be familiar.

123
00:09:00,710 --> 00:09:05,490
I'm just going to set up the functionality first here and then I'll go back and go line by line.

124
00:09:05,840 --> 00:09:12,590
So if you want to set up your items, if you want to sort them by the highest number of first, meaning

125
00:09:12,800 --> 00:09:16,720
the whatever price we have, then of course we go with B price.

126
00:09:16,760 --> 00:09:20,170
So the second item minus the A price.

127
00:09:20,230 --> 00:09:22,220
OK, so so we just flip it around.

128
00:09:22,550 --> 00:09:29,740
And now, of course, once we click on the highest, we should display the highest item first.

129
00:09:30,260 --> 00:09:31,610
So that should do it for the price.

130
00:09:31,910 --> 00:09:39,860
Now when it comes to comparing by the name prior to the method that I'm about to show you, we needed

131
00:09:39,860 --> 00:09:41,810
to write a few lines of code.

132
00:09:42,320 --> 00:09:51,020
But with the arrival of this one, look now online compare, we simply have an option of One-Liner.

133
00:09:51,320 --> 00:09:57,680
Again, if you want to find out more about this method, please visit the resources and what's really

134
00:09:57,680 --> 00:10:04,300
cool about it that we don't even need to worry about of the casing and all that annoying stuff.

135
00:10:04,640 --> 00:10:06,320
So we're simply passing one.

136
00:10:06,330 --> 00:10:12,530
Now, you compare it to the second value and then if the output is the one that we're looking for,

137
00:10:12,800 --> 00:10:17,940
then of course we just return new or all the items.

138
00:10:18,230 --> 00:10:25,550
So where we have a name and then hyphen A just means that I would want to sort those items based on

139
00:10:25,550 --> 00:10:29,690
the name that of course, starts with A, B and whatever.

140
00:10:29,870 --> 00:10:34,360
And then the ones that start with Z are going to be all the way at the end.

141
00:10:34,730 --> 00:10:39,110
So we simply need to again, grab these values here and copy and paste.

142
00:10:39,410 --> 00:10:42,560
And I'm going to say sort of what I'm accessing.

143
00:10:42,560 --> 00:10:45,050
And B, so that's going to be the current item.

144
00:10:45,260 --> 00:10:52,820
And then the next item and here I'm just going to say that I would want to return a name and then Lacau

145
00:10:52,820 --> 00:10:55,490
compare and then we're looking for Behnam.

146
00:10:55,490 --> 00:10:57,170
So a name.

147
00:10:57,170 --> 00:11:03,680
Lacau Compare and then we're comparing B names since that is the property, of course.

148
00:11:04,070 --> 00:11:11,320
And for the names that start with Z, again, the setup is going to be extremely similar.

149
00:11:11,360 --> 00:11:18,380
We just need to change it around where we're going to go with B name Lukow compare and then we pass

150
00:11:18,380 --> 00:11:24,590
in the name and let me just double check whether functionality works and then we'll take a deep dive

151
00:11:24,740 --> 00:11:25,520
into it.

152
00:11:25,820 --> 00:11:27,620
So this is going to be my lowest first.

153
00:11:28,040 --> 00:11:32,810
Then we can set up my highest course, then we can set up by name.

154
00:11:33,140 --> 00:11:35,600
So this is going to compare the names.

155
00:11:35,960 --> 00:11:37,640
And of course, if.

156
00:11:38,620 --> 00:11:44,410
It starts with a. and of course, this is going to be the first one and then all the way down to D.C.

157
00:11:44,890 --> 00:11:51,610
and if we would want to show the first ones that start with the and of course, we just set up our state

158
00:11:51,610 --> 00:11:54,700
value equal to name Z.

159
00:11:55,090 --> 00:12:00,520
So if you're familiar with it, you can probably move on to the next video, because now I'm just going

160
00:12:00,520 --> 00:12:05,350
to go back to our code and I'm going to show you the long way how it works.

161
00:12:05,740 --> 00:12:08,610
So we have a sort and we're comparing to ours.

162
00:12:08,620 --> 00:12:11,920
We are comparing the current value and the next.

163
00:12:12,550 --> 00:12:18,610
So now, of course, I will for now just delete that and we'll write it the long way and the way it's

164
00:12:18,610 --> 00:12:25,970
going to look like we will first need to check on what is the value of A price and B price.

165
00:12:26,290 --> 00:12:32,320
So we'll set up if a price, a not price is less than Bre-X price.

166
00:12:32,680 --> 00:12:38,590
If the AI is less than B, then we need to return negative one.

167
00:12:38,890 --> 00:12:46,370
Now, what that means is that A is going to be placed before B, however, if the AI is bigger.

168
00:12:46,390 --> 00:12:48,550
So if I go it if a price.

169
00:12:49,770 --> 00:12:56,640
It's bigger than the price that I would want to return, plus one meaning one, and if that is the case

170
00:12:56,660 --> 00:13:04,560
now, the AI is going to be placed after Libby and then eventually we're just going to return and then

171
00:13:04,560 --> 00:13:05,730
we set up here.

172
00:13:07,050 --> 00:13:08,760
That should be it.

173
00:13:09,180 --> 00:13:13,800
Now, in this case, I think I'm missing one perhaps to hear something like this.

174
00:13:13,800 --> 00:13:15,260
And this is going to be the long war.

175
00:13:15,510 --> 00:13:21,420
Now, what we need to understand, though, is that when we return, let's be price minus a price,

176
00:13:21,660 --> 00:13:22,180
essentially.

177
00:13:22,200 --> 00:13:23,560
This is exactly what we're doing.

178
00:13:24,240 --> 00:13:31,860
So if the price is going to be bigger, then of course, we'll return positive if the price is going

179
00:13:31,860 --> 00:13:34,720
to be bigger and of course, it is going to be negative.

180
00:13:34,980 --> 00:13:40,920
So this is going to be the case where we're setting up the sort based on smallest value first.

181
00:13:41,190 --> 00:13:45,060
So if the price is less than we price, we return negative one.

182
00:13:45,330 --> 00:13:51,270
If we return negative one, A is placed before, B if the price is bigger.

183
00:13:51,630 --> 00:13:56,400
So if the price is bigger and B, then of course we display it after.

184
00:13:56,760 --> 00:13:58,970
So this is going to be for lowest number first.

185
00:13:59,250 --> 00:14:06,850
Now, if the second item price is less than the first items price, then of course we're returning what

186
00:14:07,110 --> 00:14:11,820
we are returning negative one, which is going to place that first item up front.

187
00:14:12,090 --> 00:14:20,070
And the same works with our method of local compare where again, we are just returning a value from

188
00:14:20,070 --> 00:14:25,320
that method, whether that is going to be negative one one or zero.

189
00:14:25,680 --> 00:14:28,480
And then depending on that, of course, we are sorting.

190
00:14:28,920 --> 00:14:35,220
So now, of course, I will say it again, please understand that first of all, we get filtered product

191
00:14:35,490 --> 00:14:40,260
and I just copy and set them equal to the time products just in case I have some kind of value that

192
00:14:40,260 --> 00:14:40,950
doesn't match.

193
00:14:41,310 --> 00:14:46,800
And mine in all my statements, I'm just changing the value of that product.

194
00:14:46,800 --> 00:14:52,820
And at the end I set back the filter product equal to a temp product.

195
00:14:53,010 --> 00:15:00,180
And then in each if statement, I just check what is the value of the sort and if it matches, then

196
00:15:00,180 --> 00:15:09,690
I just sort my items using the short function in here we just return A minus B or B minus.

197
00:15:09,690 --> 00:15:11,880
I am on four names.

198
00:15:12,180 --> 00:15:19,670
We use a nifty method look I'll compare, which also will return those a number of hours.

199
00:15:19,680 --> 00:15:23,160
Again, you can technically use different set up.

200
00:15:23,190 --> 00:15:28,020
You don't have to use local compare if you want, but I just find it to be the fastest one.

201
00:15:28,020 --> 00:15:31,550
Since this one compares the casing and all that.

202
00:15:31,980 --> 00:15:36,660
Hopefully we are on the same page and we can start working on the filters.