1 00:00:00,180 --> 00:00:00,810 Nice work. 2 00:00:01,020 --> 00:00:08,910 And up next, I would like to thank these filters, so at this point, we should be sorting in place 3 00:00:09,180 --> 00:00:13,850 so we can display the product and we can sort based some data. 4 00:00:14,280 --> 00:00:20,010 And of course, I would want to set up the filters where we can actually control the amount of products 5 00:00:20,280 --> 00:00:22,290 that we are displaying. 6 00:00:22,620 --> 00:00:26,400 And then, of course, we'll still sort based on some value. 7 00:00:26,970 --> 00:00:34,410 Now, when we talk about filters, I want you to understand that we need to set them up as controlled 8 00:00:34,410 --> 00:00:34,880 inputs. 9 00:00:35,340 --> 00:00:38,850 So in a state, I'll have some initial value. 10 00:00:39,300 --> 00:00:45,060 And then as I'm using the filters, of course I'll be changing those values in a state. 11 00:00:45,420 --> 00:00:48,870 And then based on that, I will filter products product. 12 00:00:49,440 --> 00:00:53,400 So I'll start by setting up those values, those state values. 13 00:00:53,760 --> 00:00:57,970 And even though at the moment some of them might not make sense. 14 00:00:58,350 --> 00:01:00,420 Just bear with me one by one. 15 00:01:00,430 --> 00:01:01,470 We'll set up the filters. 16 00:01:01,740 --> 00:01:07,920 And then, of course, it's going to be a bit clearer what we are doing and essentially how we want 17 00:01:07,920 --> 00:01:10,080 to navigate back to the filter context. 18 00:01:10,380 --> 00:01:13,890 Now, I have my initial state correct filter products. 19 00:01:13,890 --> 00:01:17,460 I have all products, grid view and sort and things. 20 00:01:17,460 --> 00:01:22,800 That is going to be a bunch of filters and I only would want to use one function. 21 00:01:23,080 --> 00:01:28,300 I'll set up a property which actually is going to be a object in my initial state. 22 00:01:28,620 --> 00:01:36,060 So in here I'll say filters and then instead of that filters, I will set up those state values and 23 00:01:36,060 --> 00:01:40,440 I'll start with my input and that one will be Texican. 24 00:01:40,680 --> 00:01:45,750 Naming is up to you, but I'm going to go with text and I'm just going to set this up as empty string. 25 00:01:46,120 --> 00:01:50,580 Remember, we have done this before where we're setting up those controlled inputs. 26 00:01:50,850 --> 00:01:55,490 The only thing that I'm doing right now is setting up those default values in the state. 27 00:01:55,770 --> 00:01:59,190 And the only difference, of course, is that I already have the set. 28 00:02:00,140 --> 00:02:03,930 And I'm setting up as a object then right after tax. 29 00:02:03,960 --> 00:02:10,460 I'm going to go with company and by default it is going to be equal to all, because if you take a look 30 00:02:10,460 --> 00:02:14,090 at our project, of course, I'm displaying this category as well. 31 00:02:14,450 --> 00:02:17,150 So for category, there's going to be a value of all. 32 00:02:17,330 --> 00:02:21,150 And the same is going to be for the company and colors and all that. 33 00:02:21,560 --> 00:02:25,640 So I'm going to go with company and by default it is going to be equal to all. 34 00:02:25,910 --> 00:02:30,570 Then the same is going to be for the category as well as the colors. 35 00:02:30,980 --> 00:02:36,490 So let's go here with all that is just going to be my default value and let's do the same thing for 36 00:02:36,490 --> 00:02:37,160 the color. 37 00:02:37,470 --> 00:02:38,870 And that's going to be Sartwell. 38 00:02:39,350 --> 00:02:46,010 Then we're going to have Monoprice Max Price and price and we'll have to add a little bit more functionality 39 00:02:46,220 --> 00:02:47,390 in a second. 40 00:02:47,630 --> 00:02:55,160 But as far as the default values, we're going to go in, underscore price is zero and then Max Price 41 00:02:55,430 --> 00:02:57,830 for the time being will also be zero. 42 00:02:58,160 --> 00:03:00,380 And then lastly, the actual price. 43 00:03:00,680 --> 00:03:03,740 So the price for displaying is also going to be zero. 44 00:03:04,220 --> 00:03:11,330 Now, if you're lost a little bit, notice here we have the range input and in the range and put out 45 00:03:11,330 --> 00:03:11,990 one display. 46 00:03:11,990 --> 00:03:15,410 Well, what is the minimal price as well as what is the max price? 47 00:03:15,650 --> 00:03:20,590 But this needs to match to whatever I have for my product. 48 00:03:20,990 --> 00:03:21,900 So that's important. 49 00:03:22,220 --> 00:03:23,540 It's not just some random price. 50 00:03:23,550 --> 00:03:27,970 It's actually the max price that I have for my product. 51 00:03:28,490 --> 00:03:33,320 And then there's also the actual price that I would like to see. 52 00:03:34,010 --> 00:03:39,650 So, for example, if I would want to see items that are less than one thousand, notice how I'm moving 53 00:03:39,650 --> 00:03:40,100 the price. 54 00:03:40,760 --> 00:03:47,210 So I'll filter based on this price or for that range input, I also would want to get the max price 55 00:03:47,450 --> 00:03:51,900 from my product and that's that little bit of work will have to do in a second. 56 00:03:52,130 --> 00:03:54,890 And then lastly, I also have a shipping. 57 00:03:55,820 --> 00:03:57,270 By default, it's going to be false. 58 00:03:57,290 --> 00:04:01,730 Now, when we talk about shipping, of course, I'm talking about this check box over here. 59 00:04:01,970 --> 00:04:03,590 So by default, that is false. 60 00:04:03,950 --> 00:04:07,550 And we're almost done setting up these default values. 61 00:04:07,560 --> 00:04:13,550 But like I said, I'm going to do a little bit of work where I would want a map over those products 62 00:04:13,790 --> 00:04:15,740 and get the actual price. 63 00:04:16,280 --> 00:04:19,380 Now, let's take a step back and think about it. 64 00:04:19,880 --> 00:04:22,400 When do we load our product? 65 00:04:23,260 --> 00:04:29,740 When we set up to use the correct when we had our first dispatch, so once the products change, we 66 00:04:29,740 --> 00:04:33,520 load our products and the products are in the payload. 67 00:04:33,970 --> 00:04:34,480 All right. 68 00:04:34,780 --> 00:04:35,800 So that makes sense. 69 00:04:36,130 --> 00:04:38,380 Knowledge and navigate to filter reducer. 70 00:04:39,470 --> 00:04:45,470 And let's just add a little bit of code over here, so once I load those products, I would also want 71 00:04:45,470 --> 00:04:51,240 to set up two values in my state more precisely in my filters. 72 00:04:51,740 --> 00:04:59,330 So once I load my product, I would want to map over, get the highest price and then just set it up 73 00:04:59,330 --> 00:05:04,280 over here as a max price value and the same I'm going to do for the price. 74 00:05:05,080 --> 00:05:08,870 Again, we're doing that because I don't want to add some random value. 75 00:05:09,060 --> 00:05:10,720 For example, three thousand. 76 00:05:11,030 --> 00:05:19,100 I actually want to set my match price to be equal to whatever is the max price of the products that 77 00:05:19,100 --> 00:05:19,720 are coming in. 78 00:05:20,210 --> 00:05:22,580 So let's navigate to filter reducer. 79 00:05:23,030 --> 00:05:26,920 And yes, we are turning the step that still stays the same. 80 00:05:27,260 --> 00:05:34,100 But I first would want to get the max price and we'll simply do that by Max Price is equal to action 81 00:05:34,120 --> 00:05:34,420 plug. 82 00:05:34,490 --> 00:05:37,050 Remember, products are in a payload, right? 83 00:05:37,490 --> 00:05:42,860 So I'm going to go with a map and for shortness, I'm just going to go with B, which represents the 84 00:05:42,860 --> 00:05:46,390 product and I would want to get all the prices over here. 85 00:05:46,700 --> 00:05:47,880 So say price. 86 00:05:48,140 --> 00:05:52,460 Now, if you want to can log just so you don't think that I'm cheating on him. 87 00:05:53,710 --> 00:05:58,930 Navigate to the bigger screen, I think it's going to be easier in here in the council, I should first 88 00:05:58,940 --> 00:06:00,100 see the array of zero. 89 00:06:00,560 --> 00:06:05,720 OK, nothing is happening here, but then eventually there's going to be an array of 17 items. 90 00:06:06,050 --> 00:06:08,870 And notice here how we're getting these values. 91 00:06:09,290 --> 00:06:16,670 And I just need to use the math that max method that comes with JavaScript where I would want to pass 92 00:06:16,670 --> 00:06:22,620 in these values and get me the max one now in the max method that we cannot pass in the right. 93 00:06:22,640 --> 00:06:25,010 That's why we'll use the spread operator. 94 00:06:25,340 --> 00:06:31,480 So the way it's going to look like when I get back, I have my max price and I'll leave the console. 95 00:06:31,520 --> 00:06:33,980 OK, just so I can see that it is for sure working. 96 00:06:34,250 --> 00:06:39,290 And we'll just say Max Price is equal to math, like I said, Max. 97 00:06:39,650 --> 00:06:44,210 So the math object that is coming with JavaScript and then we just use the max method. 98 00:06:44,330 --> 00:06:47,300 And then like I said, I cannot pass in that right directly. 99 00:06:47,510 --> 00:06:52,190 I need to use my spirt operator and then pass the max price. 100 00:06:52,400 --> 00:06:56,720 And once you can plug this is going to be that max price. 101 00:06:57,200 --> 00:07:05,090 So whatever errors, of course, I can go back and I believe it was three thousand and ninety nine dollars. 102 00:07:05,300 --> 00:07:13,340 So now, of course, what I would want is add this value to my state more precisely in the filters. 103 00:07:13,760 --> 00:07:21,560 I'll set my max price to be this value as well as the current price, because by default I would want 104 00:07:21,560 --> 00:07:26,070 to set up my range where I start with my max price over here. 105 00:07:26,300 --> 00:07:32,030 So this big dot, it's just going to be set equal to the max and then, of course, user notice can 106 00:07:32,030 --> 00:07:32,380 change. 107 00:07:32,600 --> 00:07:34,810 So my max still stays the same. 108 00:07:35,030 --> 00:07:37,070 My men who wish to zero. 109 00:07:37,310 --> 00:07:42,260 But then the price is the value that the user is controlling. 110 00:07:42,650 --> 00:07:44,300 So hopefully that makes sense. 111 00:07:44,450 --> 00:07:46,610 And in here I'll remove the control log. 112 00:07:46,930 --> 00:07:51,980 And remember, filters was already a object. 113 00:07:52,190 --> 00:07:52,630 Correct? 114 00:07:52,910 --> 00:07:55,550 So we go here with filters is equal. 115 00:07:55,760 --> 00:08:03,020 And now again, I would want to copy the previous values, so I don't want to overwrite it because if 116 00:08:03,020 --> 00:08:10,040 I set it up as Max price is equal to the price and the max price, then of course our move for us to 117 00:08:10,040 --> 00:08:13,320 the default values that we worked so hard to add. 118 00:08:13,730 --> 00:08:14,840 So it's an object. 119 00:08:15,560 --> 00:08:19,840 So say filters is equal to the that that state filters. 120 00:08:20,150 --> 00:08:26,400 So now, of course, again, we copy the old values and then we'll change too. 121 00:08:26,420 --> 00:08:27,650 Things will change. 122 00:08:27,650 --> 00:08:32,540 The max price here will say Max Price is equal to my variable by Max Price. 123 00:08:32,870 --> 00:08:36,380 And like I said, the same thing by default, I would want to set up my price. 124 00:08:36,680 --> 00:08:41,030 So I'll say here that the price is also equal to the max price. 125 00:08:41,450 --> 00:08:46,280 We save this one and now we could just go through the components. 126 00:08:46,760 --> 00:08:49,640 And of course we're looking in the filter provider. 127 00:08:49,880 --> 00:08:57,670 Notice we have the product we have filtered that still stays the same, but now we should have the filters. 128 00:08:58,100 --> 00:09:03,730 That is my object with my default values and Norrish text is empty string. 129 00:09:03,770 --> 00:09:08,750 Then I have company category and color set to all men. 130 00:09:08,750 --> 00:09:17,270 Price is still zero, but now I have my max price for the max price property as well as the price. 131 00:09:17,840 --> 00:09:21,950 And then of course shipping is still awesome. 132 00:09:22,370 --> 00:09:24,410 We're done setting up our default values. 133 00:09:24,680 --> 00:09:31,430 So now one by one, we'll start setting up our filter inputs over here.