1 00:00:00,600 --> 00:00:08,220 We've got our default values, so now one by one, I want to set up the focus, not the reason why I'm 2 00:00:08,220 --> 00:00:15,480 setting up everything one by one, because I think it's just going to be easier for you to follow along 3 00:00:15,990 --> 00:00:19,590 if we don't dump all of them at once. 4 00:00:20,130 --> 00:00:24,600 And the way we'll set this up, we're going to navigate back to the filter context. 5 00:00:25,020 --> 00:00:30,870 And remember, we have a value that we're putting down and we right away have the state. 6 00:00:31,260 --> 00:00:33,480 So we shouldn't worry about the filters, how our. 7 00:00:34,500 --> 00:00:39,510 There's going to be two more methods, and I would want to right away set them up as placeholders so 8 00:00:39,510 --> 00:00:46,840 that way I can pass them down since we'll start by again the structuring everything in the filters component. 9 00:00:47,120 --> 00:00:49,800 So for the time being, they're just going to be placeholders. 10 00:00:50,070 --> 00:00:53,010 And then eventually, of course, we'll add more functionality. 11 00:00:53,430 --> 00:01:00,570 The first method name will be update and filters and this one will be equal to my error function. 12 00:01:00,780 --> 00:01:07,320 Now I'm going to be looking for event object and you can think of this function as a function we're 13 00:01:07,320 --> 00:01:10,320 going to call every time we change something. 14 00:01:10,650 --> 00:01:17,880 So add on change on all of them, on all our inputs, and then the moment something changes. 15 00:01:18,090 --> 00:01:20,770 This is the function we are going to invoke. 16 00:01:20,790 --> 00:01:24,900 So the moment we click on our filters, we'll invoke this function. 17 00:01:26,090 --> 00:01:32,300 And I can tell you right away that it's going to be extremely similar to the update, so that's why 18 00:01:32,330 --> 00:01:34,180 also the timing is somewhat similar. 19 00:01:34,550 --> 00:01:41,660 And then also I would want to clear filters, which essentially just set back the filters back to the 20 00:01:41,660 --> 00:01:42,130 default. 21 00:01:42,710 --> 00:01:48,730 And you can already guess that Bush will invoke it once we click on this cooler air filters. 22 00:01:49,180 --> 00:01:52,900 And it's not exactly that clear filters. 23 00:01:52,910 --> 00:01:57,770 And we'll just this part an action, not a moment, not going to worry about this action. 24 00:01:58,130 --> 00:02:00,430 We're just going to have a empty arrow function. 25 00:02:00,770 --> 00:02:06,320 And once we have both of these suckers in place now, I would want to add them to my value. 26 00:02:06,620 --> 00:02:11,380 So update filters and comma, clear filters as well. 27 00:02:12,530 --> 00:02:18,500 And then, like I said, we just need to navigate back to the filters at the moment, I just have my 28 00:02:18,500 --> 00:02:22,180 heading for and I'll start by grabbing my contacts. 29 00:02:22,550 --> 00:02:27,620 And now one of the structure, all of those things out of the state. 30 00:02:28,500 --> 00:02:34,920 So remember, we have filters object, and then I would want to get all those default ones, plus I 31 00:02:34,920 --> 00:02:39,930 would want to get both of the methods and all the products as well. 32 00:02:40,270 --> 00:02:43,430 And you'll see why we actually need all the products. 33 00:02:43,770 --> 00:02:49,760 And I'll start here with a wrapper just so I have a better looking component over here. 34 00:02:50,190 --> 00:02:55,590 And let me see let me see them navigate right now to the products just so we can see right away here 35 00:02:55,590 --> 00:02:56,250 side by side. 36 00:02:56,640 --> 00:02:58,700 This should be our filters. 37 00:02:58,710 --> 00:02:59,160 Beautiful. 38 00:02:59,490 --> 00:03:00,390 And then, like I said. 39 00:03:01,280 --> 00:03:07,150 We have used filter context, of course, that is the hook that provides our context, and then we have 40 00:03:07,150 --> 00:03:08,060 few functions. 41 00:03:08,300 --> 00:03:16,270 We have get unique values for my price, as well as the icon from react icons. 42 00:03:16,670 --> 00:03:19,670 And as far as this one is a function, get unique powers. 43 00:03:19,730 --> 00:03:20,770 Of course we'll work on it. 44 00:03:20,990 --> 00:03:25,370 And then for my price, I just use it when I was setting up my range. 45 00:03:25,770 --> 00:03:31,820 Let's start with annoying work where I would want to structure that from the use filter context or use 46 00:03:31,820 --> 00:03:32,600 filter context. 47 00:03:32,600 --> 00:03:38,990 I invoke my hook because I have access to whatever I have in the value and more specifically have my 48 00:03:38,990 --> 00:03:39,680 state, of course. 49 00:03:39,890 --> 00:03:47,350 And in that state I have the filters properly and that is an object itself. 50 00:03:47,360 --> 00:03:54,440 So then I go by text category and then one by one company, whatever names we had. 51 00:03:54,450 --> 00:04:04,700 Order color men underscore price price and Max underscore price as well as the shipping. 52 00:04:05,240 --> 00:04:08,600 So all those properties I'm getting out of the filters object. 53 00:04:09,640 --> 00:04:18,130 Awesome and also, like I said, I would want to get all my methods, so update filters, clean air 54 00:04:18,700 --> 00:04:26,260 filters, as well as all products, so all products, not products, is going to be used when we're 55 00:04:26,260 --> 00:04:28,020 getting those unique values. 56 00:04:28,420 --> 00:04:35,290 So I'll save it over here and then we'll just scroll down a little bit where we have the wrapper. 57 00:04:35,740 --> 00:04:40,720 And we'll start by setting up a div with a class of content on here. 58 00:04:41,020 --> 00:04:44,580 And then instead of this content, let's go right away with form. 59 00:04:44,920 --> 00:04:51,100 And since it's going to be for him, I also have this default action where essentially once we press 60 00:04:51,100 --> 00:04:55,060 on enter, we refresh the page and I would want to avoid that. 61 00:04:55,240 --> 00:05:00,400 That's why I'll say on submit on here and we'll just set up our function. 62 00:05:00,790 --> 00:05:03,510 So once we submit the form, I would want to prevent the default. 63 00:05:03,520 --> 00:05:09,640 That's all I would want to do, because everything else we're controlling in a state or the moment we're 64 00:05:09,640 --> 00:05:09,880 not. 65 00:05:09,880 --> 00:05:12,010 But eventually we will soon here. 66 00:05:12,010 --> 00:05:18,990 Let's just pass in the arrow function on pass in my event object and we simply say prevent default. 67 00:05:19,120 --> 00:05:22,660 And again, the only reason why we're doing that, because we'll be setting up the form. 68 00:05:23,540 --> 00:05:30,650 And the default behavior of the form is once we submit the form, of course, there's a hard page refresh 69 00:05:30,800 --> 00:05:31,830 and I don't want that. 70 00:05:32,030 --> 00:05:35,200 That's why right away prevent that default. 71 00:05:35,630 --> 00:05:40,190 And then instead of this form, like I said, I'll set up everything one by one. 72 00:05:40,310 --> 00:05:42,740 I'm the first one is the search input. 73 00:05:43,040 --> 00:05:50,540 So we're going to go here with search input, copy paste, and we'll set it up as a kind of search input. 74 00:05:50,810 --> 00:05:54,560 And then I just want to go with this with a class of control. 75 00:05:54,920 --> 00:05:56,660 But this is just for styling. 76 00:05:56,840 --> 00:05:59,720 So all of them look somewhat the same. 77 00:05:59,930 --> 00:06:05,900 And then inside of this div, I'm going to go with my input, which is just going to be a text input. 78 00:06:06,290 --> 00:06:14,870 Now, what's important is to have a name and this name needs to have the same exact value like we have 79 00:06:15,140 --> 00:06:16,310 in the state. 80 00:06:16,850 --> 00:06:21,230 So remember, filter context, remember when we were setting up those default values? 81 00:06:21,590 --> 00:06:26,700 So text needs to match exactly what you have over here picture. 82 00:06:27,050 --> 00:06:33,440 So if you have different name, please make sure that name attribute has that same exact value. 83 00:06:34,540 --> 00:06:41,530 So in here, we have typed text name is also a text, and then let's go with Placeholder and as far 84 00:06:41,530 --> 00:06:45,640 as the placeholder, I'll say search over here. 85 00:06:45,940 --> 00:06:54,160 And as far as the styling, we're going to go with search, search and then hyphen and input. 86 00:06:54,700 --> 00:06:57,910 So at the moment, it is not controlled input. 87 00:06:58,300 --> 00:06:59,890 That's why nothing is happening. 88 00:07:00,340 --> 00:07:04,760 But and by the way, why I'm setting up Klinefelter's, I should be class now. 89 00:07:04,760 --> 00:07:10,360 And that's why we have no styling once we have class name properly, because we have nice styling. 90 00:07:10,370 --> 00:07:13,220 But this is not controlled input. 91 00:07:14,020 --> 00:07:15,700 Hopefully we all understand that. 92 00:07:16,090 --> 00:07:22,180 Now, in order to set this up as controlled input, we needed what we needed a value. 93 00:07:23,100 --> 00:07:29,790 So the value attribute with our default value coming from the state and the second one was, of course, 94 00:07:29,790 --> 00:07:30,490 the change. 95 00:07:30,930 --> 00:07:37,160 So once something changes, then I would want to run my update filters. 96 00:07:37,170 --> 00:07:37,560 Correct. 97 00:07:38,470 --> 00:07:41,300 So let's do it, people, we're going to go with value. 98 00:07:41,350 --> 00:07:46,960 So this is going to be my empty string coming from the state and then the second thing is going to be 99 00:07:46,960 --> 00:07:48,550 my own change. 100 00:07:48,890 --> 00:07:52,590 And now, of course, I would want to run my update filters method. 101 00:07:52,990 --> 00:07:53,520 Beautiful. 102 00:07:53,920 --> 00:07:55,370 That's a perfect start. 103 00:07:55,630 --> 00:08:01,990 So now, of course, we would want to navigate back to the filter context and add some functionality 104 00:08:02,350 --> 00:08:07,540 in the update filters, because at the moment, yes, I can type some values over here. 105 00:08:07,750 --> 00:08:14,560 But notice, since we're not running the update filters, nothing is happening in my state because I 106 00:08:14,560 --> 00:08:18,070 get my value from the state that is set to be empty string. 107 00:08:18,280 --> 00:08:22,550 That's why whatever we type over here is not displayed. 108 00:08:22,900 --> 00:08:25,420 And again, that's something we have done already before. 109 00:08:26,410 --> 00:08:32,170 Where I'm going to scroll down, I purposely getting the event object, and I remember using that event 110 00:08:32,170 --> 00:08:39,940 object, I can access the input or a element that is calling that on change. 111 00:08:40,810 --> 00:08:42,580 So in this case, it is an input. 112 00:08:42,580 --> 00:08:48,220 But of course, later it's going to be buttons is going to be checkboxes and all that and not just start 113 00:08:48,220 --> 00:08:52,450 simply saying name and we're going to grab the event target. 114 00:08:52,780 --> 00:08:54,310 So that gets me that element. 115 00:08:54,670 --> 00:09:02,920 And since I added the name attribute in the filters, remember the name attribute and it was set equal 116 00:09:02,920 --> 00:09:03,360 to text. 117 00:09:03,370 --> 00:09:09,700 So this value should be in my dot name so I can access the name. 118 00:09:09,910 --> 00:09:12,840 And the second thing, of course, I would also want to get the value. 119 00:09:13,150 --> 00:09:14,770 So whatever I'm typing. 120 00:09:15,010 --> 00:09:18,880 So I'm going to go here with let's value is equal to event. 121 00:09:19,870 --> 00:09:29,160 Target and then the value and again, let's start simply by just console logging some name and the value. 122 00:09:29,650 --> 00:09:37,960 So I'm going to navigate the bigger screen and here open up my console as we're typing, we should see 123 00:09:37,960 --> 00:09:39,880 in the console those values. 124 00:09:40,660 --> 00:09:47,040 So this is going to be the name, which, of course, is the text and this is the value that I'm typing. 125 00:09:47,530 --> 00:09:56,230 So now, of course, I would want to dispatch an action that again changes that state value, something 126 00:09:56,230 --> 00:09:58,540 that we did already in sort. 127 00:09:58,930 --> 00:10:03,100 And the way we do that in this case, it does matter the name. 128 00:10:03,100 --> 00:10:08,440 Remember previously I said I showed you how to access the name, but actually, since there was only 129 00:10:08,440 --> 00:10:11,870 one value, I passed in as a payload my value. 130 00:10:12,340 --> 00:10:18,310 Now, in this case, it does matter because Filters is an object with multiple properties. 131 00:10:18,910 --> 00:10:27,940 And I would want to change only the property that matches to the element to the value of the name that 132 00:10:27,940 --> 00:10:30,250 is coming from the element here. 133 00:10:31,340 --> 00:10:41,810 Let's go with this patch, and the type is going to be equal to update filters, update and underscore 134 00:10:41,810 --> 00:10:48,830 filters and again, the action is coming from actions J.S. And in this case, payload will be an object 135 00:10:48,830 --> 00:10:54,290 because there's two properties that I would want to pass and I would want to pass in my name and my 136 00:10:54,290 --> 00:10:54,670 value. 137 00:10:55,100 --> 00:11:00,380 So both of these suckers over here and now, of course, we would need to navigate to filter producer 138 00:11:00,680 --> 00:11:02,650 and handle it over there. 139 00:11:03,230 --> 00:11:06,380 So we're going to go to a filter producer. 140 00:11:07,410 --> 00:11:12,710 We're going to keep on scrolling, keep on scrolling, and, of course, we will set up our action. 141 00:11:12,900 --> 00:11:22,410 So if the name of the action is Humpday filters, so if action, that type is equal to update filters, 142 00:11:22,650 --> 00:11:23,700 what I would want to do? 143 00:11:24,270 --> 00:11:29,760 Well, that I would want to the structure, both of these things from the payload because of course 144 00:11:29,760 --> 00:11:31,680 I'm passing it as a object. 145 00:11:32,010 --> 00:11:39,330 So here, let's go with CONSED and we're looking for name and the value and that is coming from action. 146 00:11:39,600 --> 00:11:47,610 And of course that payload and in the filters, I would want to update those values just like we did 147 00:11:47,880 --> 00:11:54,990 when we worked with or remember previously here we had updates and we just said that sought value to 148 00:11:54,990 --> 00:11:58,190 whatever is coming as epilog. 149 00:11:58,500 --> 00:12:03,660 Now, in this case, of course, it's a little bit different because filters is an object itself. 150 00:12:03,930 --> 00:12:05,460 So we're going to go here with the return. 151 00:12:05,460 --> 00:12:10,860 First, I would want to return my whole state just in case there's some other properties, which, of 152 00:12:10,860 --> 00:12:11,580 course, we have. 153 00:12:12,490 --> 00:12:17,980 Then remember, filters was an object, so again, we need to do the same dance where we go with that 154 00:12:18,160 --> 00:12:22,910 and then state filters so we don't lose out any other values. 155 00:12:23,290 --> 00:12:30,610 And then finally, if I would want to access the property dynamically, I simply go with name. 156 00:12:31,120 --> 00:12:34,480 So whatever I'm passing in and then the value again. 157 00:12:34,840 --> 00:12:42,700 If you need to refresh on how to set up dynamic properties, please go to my JavaScript Nugget series 158 00:12:42,730 --> 00:12:44,660 where I cover this in greater detail. 159 00:12:45,040 --> 00:12:50,110 We have covered this already quite a few times and since I wouldn't want to repeat myself, I'm just 160 00:12:50,110 --> 00:12:56,770 going to say here that we are setting up that property dynamically since filters is an object. 161 00:12:57,040 --> 00:13:04,550 I'm just saying whatever name value I'm passing in access to that property and set it to my value. 162 00:13:04,840 --> 00:13:09,720 Now, in our case, of course, what that means is now have the controlled input. 163 00:13:09,940 --> 00:13:12,640 And I'll show you that, of course, and my components. 164 00:13:13,910 --> 00:13:19,440 Where notice I have my filter provider, that's cool, I'm not in the filters. 165 00:13:19,670 --> 00:13:20,330 Check it out. 166 00:13:20,720 --> 00:13:22,310 So I have my text over here. 167 00:13:22,320 --> 00:13:22,670 Right. 168 00:13:23,160 --> 00:13:29,330 And once I type something in, the search on change is invoked. 169 00:13:29,720 --> 00:13:35,880 And as I'm invoking the on change, notice how the state is also changing. 170 00:13:36,170 --> 00:13:42,850 So it's really cool that we are dynamically accessing this state since we'll have multiple. 171 00:13:43,040 --> 00:13:47,530 And that's why we have right now a successful controlled input. 172 00:13:47,990 --> 00:13:50,980 And the last thing that I would want to add in this video. 173 00:13:51,960 --> 00:13:55,330 Is the placeholder 40 filter product. 174 00:13:55,740 --> 00:14:01,830 Remember when we worked with SORT, we had the use effect, correct? 175 00:14:02,160 --> 00:14:05,370 We had a year's effect where we were sorting product. 176 00:14:05,820 --> 00:14:11,870 Now all we want to do the same thing as we are actually updating the filters. 177 00:14:12,210 --> 00:14:17,910 So we ran this every time our sort value change as well as the product. 178 00:14:18,390 --> 00:14:22,740 Now we want to do the same thing when my filters change. 179 00:14:23,050 --> 00:14:27,750 Now, again, we're not going to set up the functionality yet because I would want to leave it as the 180 00:14:27,750 --> 00:14:29,810 last thing we do for the filters. 181 00:14:30,150 --> 00:14:37,320 But what I would want you to see is that every time we run this, our user will run and our placeholder 182 00:14:37,470 --> 00:14:38,290 will run as well. 183 00:14:38,310 --> 00:14:41,260 And then, of course, eventually we'll set up the functionality. 184 00:14:41,610 --> 00:14:49,590 So where I have the user, not only Independencia, I'll add product and then state support, but also 185 00:14:49,590 --> 00:14:54,300 at DOT and then state and filter. 186 00:14:55,340 --> 00:14:57,630 I believe or no, it was my bad. 187 00:14:57,920 --> 00:15:04,960 So every time the value in the subject changes, course I will run this shoes. 188 00:15:05,570 --> 00:15:13,510 Now, I can technically jam everything in a short product, but I much rather one set up another action. 189 00:15:13,970 --> 00:15:18,440 So of course, I created that action already in my action. 190 00:15:18,440 --> 00:15:25,440 Jazz and the name of this action is going to be, uh, type an unfiltered product. 191 00:15:25,820 --> 00:15:28,580 Now, again, for the time being, there's just going to be a placeholder. 192 00:15:28,580 --> 00:15:32,180 Essentially, we'll set up a council log that just logs that. 193 00:15:32,450 --> 00:15:38,750 You can see that every time we do something in our filters, we run of that function. 194 00:15:39,110 --> 00:15:42,890 So let me save it over here and not in a filter reducer. 195 00:15:43,070 --> 00:15:47,540 Notice right now, I'll have a big fat error because we're not handling that. 196 00:15:47,780 --> 00:15:49,100 So in here, let's say if. 197 00:15:50,120 --> 00:15:57,860 Action then type is equal to filter product, then, of course, I'll just return a state more here 198 00:15:57,930 --> 00:16:03,110 like so, but before I do so, at least for the time being, you can see that something is happening. 199 00:16:03,380 --> 00:16:07,220 Also filtering and product. 200 00:16:07,670 --> 00:16:09,620 Just so you don't think that I'm cheating. 201 00:16:09,950 --> 00:16:15,890 And I would suggest placing a dispatch before the product. 202 00:16:16,340 --> 00:16:21,770 I think in my opinion, it just makes more sense where we are clearly stating that first we filter the 203 00:16:21,770 --> 00:16:29,090 product and only then we sort because filter will change the amount of product that we're displaying. 204 00:16:29,090 --> 00:16:34,490 And then sorting is just responsible for sorting the items as far as the list. 205 00:16:34,820 --> 00:16:37,460 So now, of course, I'm going to go to the bigger screen. 206 00:16:38,400 --> 00:16:40,810 And I would want you to see that right away. 207 00:16:40,930 --> 00:16:45,410 Filtering product and that as I'm typing, I'm also calling the function. 208 00:16:45,750 --> 00:16:50,430 So we have our first controlled input, which is going to be our text input. 209 00:16:50,610 --> 00:16:58,170 And then also every time I set something up in that input, I'm filtering the product, which at the 210 00:16:58,170 --> 00:17:00,710 moment is just console logging. 211 00:17:01,100 --> 00:17:02,010 That's a great start. 212 00:17:02,200 --> 00:17:07,620 And now, of course, we can move on and work on the next filters as well.