1
00:00:00,720 --> 00:00:09,630
And once we have our UI in place, so essentially once we have all the filters and we can successfully

2
00:00:09,630 --> 00:00:17,640
change the state values as we are choosing different options now, of course, let's set up the function

3
00:00:17,940 --> 00:00:21,000
that is going to filter our products.

4
00:00:21,480 --> 00:00:25,320
And of course, our function is in the filter reducer.

5
00:00:25,890 --> 00:00:29,280
And we're looking for this action of filter product.

6
00:00:29,760 --> 00:00:37,050
And we need to keep in mind that, of course, we're calling this function every time we have changes

7
00:00:37,290 --> 00:00:38,580
in the state filters.

8
00:00:39,000 --> 00:00:46,350
So every time we apply some kind of change here in the filters, we dispatched the action filter product.

9
00:00:46,650 --> 00:00:53,240
And now we just need to, of course, take care of that in reducer, because at the moment we just have

10
00:00:53,460 --> 00:00:59,130
filtering products and the first thing probably is going to be the most important one.

11
00:00:59,940 --> 00:01:05,760
And then one by one and functionality for the filters, but what I would definitely want you to understand

12
00:01:06,300 --> 00:01:12,710
is that we need to have two values, so we need to have a filter product.

13
00:01:13,140 --> 00:01:19,860
So essentially we need to have the array that is going to have the results of our filter product.

14
00:01:20,190 --> 00:01:27,300
But then we always, always need to have this all product, because remember, when we set up our first

15
00:01:27,300 --> 00:01:36,000
action, the load product I purposely set up to stage one is for filter product, and that is the one

16
00:01:36,000 --> 00:01:41,740
that we are using to display our filter product array in the UI.

17
00:01:42,240 --> 00:01:44,510
So this array will always be changing.

18
00:01:45,030 --> 00:01:51,630
You are going to get smaller, bigger or whatever, and then this one will always, always, always

19
00:01:51,960 --> 00:01:54,350
have the value of all the product.

20
00:01:54,600 --> 00:01:56,790
And that is crucial when you're setting up the filtering.

21
00:01:57,010 --> 00:02:01,800
Otherwise the functionality won't make sense because you need to keep in mind that if you have only

22
00:02:01,800 --> 00:02:08,280
one array like this, then of course within a matter of seconds you will run out of this product because

23
00:02:08,280 --> 00:02:12,670
you always need to have that fresh copy of all the product.

24
00:02:12,720 --> 00:02:14,560
So basically all your data.

25
00:02:15,330 --> 00:02:16,580
That's why I will scroll down.

26
00:02:17,040 --> 00:02:22,260
And of course, there is our filter product and I'm going to start simply by getting all the products

27
00:02:22,260 --> 00:02:23,000
out of the state.

28
00:02:23,400 --> 00:02:29,310
So say here like this, all an underscore product that is equal to a state.

29
00:02:29,760 --> 00:02:36,390
And then I'm going to set up minora and I'm going to call this let temp products, because you'll see

30
00:02:36,390 --> 00:02:41,430
in a second that we will overwrite every time we have some kind of filter functionality.

31
00:02:41,700 --> 00:02:45,250
And that one is equal to dot, dot, dot and then all products.

32
00:02:45,720 --> 00:02:53,870
So before I filter anything, I always start with a fresh copy of all the product.

33
00:02:54,210 --> 00:02:57,390
And then when I'm done, I'm returning to state.

34
00:02:57,690 --> 00:03:01,200
And in this case, of course, the name was Filter Product.

35
00:03:01,500 --> 00:03:04,740
Now this will be equal to a ten product.

36
00:03:05,070 --> 00:03:06,420
So the array.

37
00:03:07,340 --> 00:03:10,980
And it's going to be responsible for filtering out the product again.

38
00:03:11,630 --> 00:03:19,340
I know it might look confusing right now, but the whole point is we always want to start with fresh

39
00:03:19,640 --> 00:03:26,620
set of data where we have all the products and only once we're done with our functionality.

40
00:03:26,930 --> 00:03:29,510
So once we're done filtering, we're here.

41
00:03:29,540 --> 00:03:37,330
Once we're done setting up all our functionality, then we want to return filter product equal to whatever

42
00:03:37,370 --> 00:03:38,580
rate we're getting back.

43
00:03:38,900 --> 00:03:43,880
So, for example, if we're going to go back to default in all the filters, then essentially we're

44
00:03:43,880 --> 00:03:44,950
just getting all the product.

45
00:03:45,290 --> 00:03:47,120
But this is not going to work.

46
00:03:47,120 --> 00:03:53,210
If you are going to get a filter product from the state and then you filter more and then return it.

47
00:03:53,660 --> 00:03:54,680
It's not just going to work.

48
00:03:54,680 --> 00:03:56,450
Eventually you will run out this product.

49
00:03:56,460 --> 00:04:01,390
So that's why before you filter anything, you want to start with fresh set of data.

50
00:04:02,030 --> 00:04:06,130
And then once you're done setting up your functionality, then you just return this.

51
00:04:06,140 --> 00:04:06,500
All right.

52
00:04:06,740 --> 00:04:12,010
Now, of course, there's going to be cases where this array also is just going to be empty.

53
00:04:12,020 --> 00:04:12,350
All right.

54
00:04:12,560 --> 00:04:13,370
That's fine.

55
00:04:13,370 --> 00:04:19,340
But if you want to start from scratch every time again, your functionality won't work.

56
00:04:19,370 --> 00:04:24,680
That's something you need to remember that every time you set up some kind of filtering, you always,

57
00:04:24,680 --> 00:04:28,130
always need to have access to that default data.

58
00:04:28,520 --> 00:04:30,430
Otherwise, it's just not going to work.

59
00:04:30,920 --> 00:04:36,630
And once I'm done repeating the same sentence pretty much 70000 times now, of course, I also would

60
00:04:36,650 --> 00:04:41,910
want to get those filters out of my state because, yeah, this is a new era.

61
00:04:42,160 --> 00:04:43,310
Everything was great.

62
00:04:43,670 --> 00:04:46,750
But of course, I would want to check those values as well.

63
00:04:47,180 --> 00:04:53,960
Remember the ones we were setting up over here that a text company category color and all that.

64
00:04:53,970 --> 00:05:00,530
So in the filter, Rudisha, right after I had the structure, all the products, I also would want

65
00:05:00,530 --> 00:05:08,480
to get CONSED and I'll set it equal to state filters, state and filters just because I don't want to

66
00:05:08,480 --> 00:05:11,480
do the nested destruction.

67
00:05:11,780 --> 00:05:13,710
I find it to be annoying in this case.

68
00:05:13,970 --> 00:05:17,770
So we're going to go text and then category again, all the state values.

69
00:05:18,410 --> 00:05:20,420
Pretty straightforward company.

70
00:05:20,900 --> 00:05:28,300
And of course I just need to learn how to type company and then we're looking for color and price and

71
00:05:28,790 --> 00:05:29,280
shipping.

72
00:05:29,600 --> 00:05:31,220
Now you want your grandson to log.

73
00:05:32,240 --> 00:05:38,540
Again, these values will change as we are changing the filters, because remember, we were on this

74
00:05:38,540 --> 00:05:42,520
action, so we dispatched this action every time there is a chance here.

75
00:05:42,800 --> 00:05:44,280
So if you want, you can cancel it.

76
00:05:44,300 --> 00:05:49,940
But I can just tell you that, of course, you'll get back the same values that we already looked at

77
00:05:49,940 --> 00:05:55,080
previously when I was showing you the component, essentially my state.

78
00:05:55,370 --> 00:05:56,890
And now let's start filtering.

79
00:05:57,200 --> 00:05:59,870
So I'll start with the text, since that is my first filter.

80
00:06:00,150 --> 00:06:05,510
So in here, I'm just going to set up a bunch of if statements, by the way, I want to do it below

81
00:06:05,510 --> 00:06:08,750
the 10 products, so below the comment on filtering.

82
00:06:09,170 --> 00:06:16,460
And here I'm going to say if text is anything but empty string, then of course I would want to filter

83
00:06:16,700 --> 00:06:18,710
my ten products on the way.

84
00:06:18,710 --> 00:06:23,800
It's going to look like I'm going to say that product is equal to a ten product.

85
00:06:24,140 --> 00:06:30,890
So essentially I'm going to filter my new value right now is going to be whatever I'm getting back from

86
00:06:31,040 --> 00:06:31,640
this filter.

87
00:06:31,850 --> 00:06:38,030
And then you can already see that I'm setting up my filter product, the ones that I'm displaying equal

88
00:06:38,030 --> 00:06:38,590
to this one.

89
00:06:38,840 --> 00:06:45,560
So whatever I'm going to get back from this filter is going to be that value displayed in my product

90
00:06:45,560 --> 00:06:45,870
page.

91
00:06:46,220 --> 00:06:49,010
So on here, let's go with them products and filter.

92
00:06:49,880 --> 00:06:56,000
And notice, of course, that's why I use letter here, because essentially in every statement, we

93
00:06:56,000 --> 00:06:58,760
are overriding the value of the product.

94
00:06:58,780 --> 00:07:02,060
So we are setting it up equal to a new value.

95
00:07:02,460 --> 00:07:04,760
And of course, we have our callback function.

96
00:07:05,090 --> 00:07:07,460
I'll name each item here a product.

97
00:07:07,880 --> 00:07:11,810
And then as far as the return can do, implicit return if I were want.

98
00:07:11,810 --> 00:07:16,120
But in this case, I'm just going to go explicitly with return.

99
00:07:16,460 --> 00:07:24,020
And in this case, what I would want is to return only the items that start with the text that I have

100
00:07:24,230 --> 00:07:25,330
in the text input.

101
00:07:25,580 --> 00:07:32,530
So, for example, if I type A B, I would want to check for items that start with a B, correct.

102
00:07:32,780 --> 00:07:35,670
Now where I can check the name in the product.

103
00:07:35,720 --> 00:07:38,230
Property is name correct.

104
00:07:38,420 --> 00:07:45,380
So I go here with product and then name and I just want to make sure that there's no casing issues.

105
00:07:45,590 --> 00:07:46,260
So that's my.

106
00:07:46,280 --> 00:07:46,760
All right.

107
00:07:46,890 --> 00:07:54,710
I say to lower case, make sure that the casing matches and then I will use the string method by the

108
00:07:54,710 --> 00:08:01,790
name of starts start and then with and then of course I just want to pass in that text.

109
00:08:02,270 --> 00:08:05,190
So the text that is coming from my state.

110
00:08:05,570 --> 00:08:09,800
So if the product starts with a text, which is then I'm returning the product.

111
00:08:09,950 --> 00:08:10,730
If not.

112
00:08:11,570 --> 00:08:19,430
Then the product is going to be removed from the array, and once I save and once we navigate to the

113
00:08:19,430 --> 00:08:26,870
bigger screen, what we should see, that the moment I start typing out, I'm getting only the products

114
00:08:27,230 --> 00:08:29,690
that match my search again.

115
00:08:29,700 --> 00:08:33,550
Hopefully that makes sense where we're getting all the products.

116
00:08:33,710 --> 00:08:39,860
So all the data, not the filter data, but all the data, whatever it is at the moment, it is 17 items.

117
00:08:39,860 --> 00:08:45,870
Then hopefully I'm going to add more product to the API than is going to be twenty five thirty or whatever.

118
00:08:45,890 --> 00:08:51,470
So every time I dispatch the filter product, I always start from the scratch.

119
00:08:51,590 --> 00:08:58,580
I always start by setting up my temp product equal to all the products and only when I'm done with my

120
00:08:58,580 --> 00:09:03,540
functionality, only when I filter out my aura quite a few times.

121
00:09:03,830 --> 00:09:11,990
So essentially for every street value I have, then I return the filter product equal to whatever I

122
00:09:11,990 --> 00:09:12,290
have.

123
00:09:12,650 --> 00:09:15,530
And if you want, you can start out, you can switch this around.

124
00:09:15,530 --> 00:09:20,720
If you don't believe me, you can go with filter products over here and then also set it to ten products

125
00:09:20,720 --> 00:09:27,200
and you'll see how functionality will go bananas quickly because essentially you're not starting from

126
00:09:27,200 --> 00:09:27,710
scratch.

127
00:09:27,920 --> 00:09:33,920
Every time you're filtering, you already base your current values on the previous ones.

128
00:09:34,220 --> 00:09:40,130
And the filter, of course, that means that you're getting less and less and less product every time.

129
00:09:40,400 --> 00:09:41,990
OK, hopefully that is clear.

130
00:09:42,200 --> 00:09:44,060
We can see how we can do it with a text.

131
00:09:44,330 --> 00:09:47,480
And now, of course, we just need to add those other options as well.

132
00:09:47,750 --> 00:09:53,690
So we start with text, then we have category, we have company, we have color, price and of course,

133
00:09:53,690 --> 00:09:56,420
the free shipping as well.

134
00:09:56,810 --> 00:10:01,400
And check it out if, of course, I'm going to back to the default.

135
00:10:01,730 --> 00:10:07,310
Of course, I am dispatching the action because there was a change in my state.

136
00:10:07,550 --> 00:10:07,940
Correct.

137
00:10:07,940 --> 00:10:10,100
In the state filters more precisely.

138
00:10:10,430 --> 00:10:14,990
And then since I'm going back to the default, I'm sending back to all the product.

139
00:10:15,350 --> 00:10:17,000
And then this one will be false.

140
00:10:17,360 --> 00:10:17,810
Correct.

141
00:10:18,110 --> 00:10:22,370
Because if I remove everything now, I'm getting all the product.

142
00:10:22,370 --> 00:10:28,190
Why then let's go over one more time and then for the next ones, I'm not going to spend so much time

143
00:10:28,190 --> 00:10:28,460
on it.

144
00:10:28,760 --> 00:10:35,000
But the reason why this is happening, because we have the components over here, we have a filter provider

145
00:10:35,330 --> 00:10:37,580
and then check it out in the filters.

146
00:10:37,580 --> 00:10:41,360
Right now, my text value is what it is, an empty string.

147
00:10:41,870 --> 00:10:44,540
And I start here with all the product.

148
00:10:44,780 --> 00:10:46,970
But then this one is false.

149
00:10:47,930 --> 00:10:53,990
So this condition is not met, and then, of course, as far as return, I just returned my filtered

150
00:10:53,990 --> 00:10:58,920
product back to all the product since this is my current value.

151
00:10:59,300 --> 00:11:04,400
So that's why when I'm typing something, of course, I'm changing the state value and notice eventually

152
00:11:04,400 --> 00:11:09,190
I do run out of products because there are no products that start with the F.

153
00:11:09,410 --> 00:11:12,360
But then once I remove, the condition is not met.

154
00:11:12,680 --> 00:11:15,350
And again, we're just display all the products.

155
00:11:15,380 --> 00:11:20,870
Hopefully that is clear because essentially that is the hardest part in the setup.

156
00:11:21,140 --> 00:11:26,600
Everything else is just adding more and more conditions and the idea is going to be exactly the same,

157
00:11:26,600 --> 00:11:30,620
that if the value is not equal to all, then I would want to filter.

158
00:11:30,950 --> 00:11:36,980
If the value is equal to all, then of course I would want to return all the products because of course

159
00:11:36,980 --> 00:11:42,080
I would want to see all the categories, all the companies and colors and all that.