1 00:00:00,180 --> 00:00:00,910 Amazing job. 2 00:00:00,930 --> 00:00:03,830 We're almost done with our filters component. 3 00:00:04,280 --> 00:00:12,120 I just wanted to add my check box for free shipping as well as this button to clear out all my filters. 4 00:00:12,540 --> 00:00:21,300 So let's go here where we have end of price, will one more common shipping, and then, of course, 5 00:00:21,300 --> 00:00:28,260 we'll copy and paste and we're going to go with and off shipping and inside of the comments. 6 00:00:28,260 --> 00:00:33,690 Let's go with firm control and then there's going to be a little bit of extra styling. 7 00:00:33,900 --> 00:00:38,880 That's why I'll add one more class, which is going to be shipping class and side of this day. 8 00:00:38,910 --> 00:00:39,840 Let's go with label. 9 00:00:40,820 --> 00:00:46,160 And in this case, there's going to be a D on the check box, that's why and here the value of shipping 10 00:00:46,580 --> 00:00:49,720 and let's just say free shipping. 11 00:00:50,090 --> 00:00:53,000 So and by the way, I have three P's. 12 00:00:53,000 --> 00:00:54,290 I don't think I needed that. 13 00:00:54,700 --> 00:00:57,110 And I'm going to go with my input. 14 00:00:57,110 --> 00:01:01,070 Now, in this case, it is going to be a check box like so. 15 00:01:01,340 --> 00:01:08,620 And for the name, of course, it needs to match a state which is shipping then is exactly the same. 16 00:01:09,170 --> 00:01:12,820 So I'm going to go here with shipping since the label is looking for that. 17 00:01:13,250 --> 00:01:17,660 And then I have the type, I have the name and I have the three. 18 00:01:17,660 --> 00:01:26,850 So I only need on change and also out on display whether the check box is checked or not. 19 00:01:27,140 --> 00:01:30,200 So let's say that we should see the check box. 20 00:01:30,200 --> 00:01:30,710 There it is. 21 00:01:30,980 --> 00:01:37,420 And of course now I can check it, but I would want it by default displayed whatever I have in the state. 22 00:01:37,700 --> 00:01:42,110 So once I click on it, of course, I would want to invoke change first. 23 00:01:42,110 --> 00:01:45,590 So on change and we're going to go update filters. 24 00:01:45,830 --> 00:01:50,800 But also, of course, I would want to display whether the state value is true or false. 25 00:01:51,110 --> 00:01:53,270 And in this case, we're not looking for the value. 26 00:01:53,480 --> 00:01:58,890 We go with checked attribute and also this equal to our shipping value. 27 00:01:59,180 --> 00:02:04,590 So if this value will be false, then of course the check box will be on click. 28 00:02:04,910 --> 00:02:11,930 However, if the value will be true and of course, we'll display that we have checked on the check 29 00:02:11,930 --> 00:02:12,200 box. 30 00:02:12,260 --> 00:02:17,960 Now, the thing here is that, again, in the filter context, we're going to have to do a little bit 31 00:02:17,960 --> 00:02:23,630 of magic where when we're talking about checkboxes, we are not getting the volume. 32 00:02:23,930 --> 00:02:26,660 So similar issues like we had with buttons. 33 00:02:26,960 --> 00:02:28,610 So in this case, again, we go with name. 34 00:02:28,760 --> 00:02:36,190 And if that one is equal to a shipping or the checkbox, we're looking whether it is checked or not. 35 00:02:36,470 --> 00:02:41,640 So we're going to go value is equal to eventer, target and then check. 36 00:02:42,050 --> 00:02:44,840 So if this is true, then of course our value will be true. 37 00:02:45,020 --> 00:02:47,000 If it's false, you get the point. 38 00:02:47,270 --> 00:02:53,330 And now once everything is set up, we should see that by default it is false because of course our 39 00:02:53,330 --> 00:02:54,040 values are false. 40 00:02:54,290 --> 00:02:56,090 Then once I click, it is true. 41 00:02:56,360 --> 00:03:01,970 If you want to double check your, you know, the drill we navigate to bigger screen because I think 42 00:03:01,970 --> 00:03:04,340 it's easier to see we're looking for filters. 43 00:03:04,580 --> 00:03:10,970 And if we click on the input, by the way, I would need to make this one a bit smaller here. 44 00:03:11,240 --> 00:03:11,990 I'll check. 45 00:03:12,000 --> 00:03:15,960 And now, of course, shipping is true once we click one more time. 46 00:03:16,130 --> 00:03:18,290 Now, of course, it is going to be false. 47 00:03:18,680 --> 00:03:26,090 And then since this is somewhat short video, why don't we also add the clear filters functionality 48 00:03:26,300 --> 00:03:27,050 as well? 49 00:03:27,290 --> 00:03:32,000 Because essentially the only thing we would want to do is just set it back to the default. 50 00:03:32,950 --> 00:03:39,640 So we'll start in the filters component and in this case, I'm not placing this inside of the form, 51 00:03:40,000 --> 00:03:43,080 so right outside of the form, I'm going to go with my button. 52 00:03:43,480 --> 00:03:46,230 It is going to be a typical button. 53 00:03:46,240 --> 00:03:49,740 So we're just going to say type is equal to a button. 54 00:03:50,000 --> 00:03:55,080 Then let's add a class name of clear hyphen between and on Kaleck. 55 00:03:55,390 --> 00:03:58,050 This is where I would want to invoke my Klinefelter's. 56 00:03:58,450 --> 00:04:04,750 So once I click on this button, of course I'll run my function clear filters and can already guess 57 00:04:04,750 --> 00:04:10,810 that the volume is going to be exactly the same color filters text inside of the button of where it 58 00:04:10,810 --> 00:04:11,080 is. 59 00:04:11,240 --> 00:04:18,560 That should be our button and then inside of the filter context where we have the clear filters function. 60 00:04:18,880 --> 00:04:24,380 Now of course I would want this patch and action and that action will be clear filters. 61 00:04:24,670 --> 00:04:25,630 So let's go here. 62 00:04:25,630 --> 00:04:28,930 Dispatch and action is coming from my actions. 63 00:04:29,030 --> 00:04:33,980 Yes, we say type and we go with clear filters. 64 00:04:34,270 --> 00:04:37,500 Now, at the moment, we're not handling that, of course, in producer. 65 00:04:38,320 --> 00:04:43,120 So the moment we'll click on a button, there's going to be a big fat error rule. 66 00:04:43,160 --> 00:04:44,730 Fix that in a second. 67 00:04:44,830 --> 00:04:46,780 So we navigate to filter reducer. 68 00:04:47,290 --> 00:04:48,580 We scroll down. 69 00:04:48,790 --> 00:04:55,930 Eventually we'll work on our filter product and I'm just going to set up a action and then that type 70 00:04:56,290 --> 00:04:59,410 is equal to clear filters. 71 00:04:59,800 --> 00:05:00,820 That's my action. 72 00:05:01,120 --> 00:05:05,400 And what I would want is just to return the default values. 73 00:05:05,710 --> 00:05:08,650 So I think it's going to be faster if we just copy and paste. 74 00:05:09,010 --> 00:05:18,510 So grab all the filter values over here and navigate back to filter producer, jump to action the color 75 00:05:18,520 --> 00:05:21,100 filters and now would want to return the state. 76 00:05:21,640 --> 00:05:24,250 So I would want to return to that state. 77 00:05:24,550 --> 00:05:31,330 So by mistake, I'm not overwriting any values and then I'm going to copy and paste my filters and we're 78 00:05:31,330 --> 00:05:32,160 almost done. 79 00:05:32,650 --> 00:05:38,860 But notice here how we have been priced mesero, max, presider as well as the price zero. 80 00:05:39,400 --> 00:05:42,820 And that's not the setup that I would want to use. 81 00:05:43,240 --> 00:05:51,160 Instead, I would want to leave the main price and max price to be whatever I have as a default, since 82 00:05:51,160 --> 00:05:54,460 these are the two things that we wouldn't want to change. 83 00:05:54,820 --> 00:06:00,520 That's why back in the filter reducer, I'll also say that first I would want to get all the properties 84 00:06:00,850 --> 00:06:05,080 so state that filters so and I'm going to spread them out. 85 00:06:05,320 --> 00:06:14,170 That's why I'll be able to remove Min and Max Price and also I would want to set my price back to the 86 00:06:14,170 --> 00:06:14,770 max one. 87 00:06:15,100 --> 00:06:19,490 So if I remove this price, then of course I'll leave it the way it is. 88 00:06:19,510 --> 00:06:25,180 So even though I'm going to be clearing the filters, my price will stay exactly the same because notice 89 00:06:25,450 --> 00:06:29,050 I'm just copying the values and I'm overriding these ones. 90 00:06:29,830 --> 00:06:35,500 I'm not overriding the price, meaning, of course, that is if I would remove the price, but instead 91 00:06:35,500 --> 00:06:43,040 what I would want is the gold price and then let's access state filters and max price. 92 00:06:43,480 --> 00:06:49,110 So essentially, we're just setting up that default value of the max price. 93 00:06:49,390 --> 00:06:51,010 And now, of course, we can test that out. 94 00:06:51,250 --> 00:06:54,310 For example, here, I'm going to write some text content. 95 00:06:54,610 --> 00:07:02,290 I'll set up my category to be some kind of value as well as the company color and then the price and 96 00:07:02,290 --> 00:07:02,890 free shipping. 97 00:07:03,040 --> 00:07:08,460 And once we click on color filters, notice how we set our filters back to default. 98 00:07:08,680 --> 00:07:11,530 And of course, if you want to double check that, as always. 99 00:07:11,890 --> 00:07:19,270 Yes, make sure you go to components and in here, open up the filters, then do the same thing just 100 00:07:19,270 --> 00:07:26,140 so you can double check that everything works because trust me, it is much easier to get these errors 101 00:07:26,140 --> 00:07:31,750 here instead of when you actually start filtering, because even then something goes bananas. 102 00:07:31,960 --> 00:07:33,970 It is much more hard to see that. 103 00:07:34,240 --> 00:07:38,040 So I'm going to go with color filters because I have some kind of ours over here. 104 00:07:38,230 --> 00:07:42,860 And once I press on color filters, I go back to my default values. 105 00:07:42,880 --> 00:07:43,360 Beautiful. 106 00:07:43,570 --> 00:07:49,780 Now we just need to set up a function that takes care of the filtering functionality and we're going 107 00:07:49,780 --> 00:07:50,620 to be in good shape.