We've got our default values, so now one by one, I want to set up the focus, not the reason why I'm
setting up everything one by one, because I think it's just going to be easier for you to follow along
if we don't dump all of them at once.
And the way we'll set this up, we're going to navigate back to the filter context.
And remember, we have a value that we're putting down and we right away have the state.
So we shouldn't worry about the filters, how our.
There's going to be two more methods, and I would want to right away set them up as placeholders so
that way I can pass them down since we'll start by again the structuring everything in the filters component.
So for the time being, they're just going to be placeholders.
And then eventually, of course, we'll add more functionality.
The first method name will be update and filters and this one will be equal to my error function.
Now I'm going to be looking for event object and you can think of this function as a function we're
going to call every time we change something.
So add on change on all of them, on all our inputs, and then the moment something changes.
This is the function we are going to invoke.
So the moment we click on our filters, we'll invoke this function.
And I can tell you right away that it's going to be extremely similar to the update, so that's why
also the timing is somewhat similar.
And then also I would want to clear filters, which essentially just set back the filters back to the
default.
And you can already guess that Bush will invoke it once we click on this cooler air filters.
And it's not exactly that clear filters.
And we'll just this part an action, not a moment, not going to worry about this action.
We're just going to have a empty arrow function.
And once we have both of these suckers in place now, I would want to add them to my value.
So update filters and comma, clear filters as well.
And then, like I said, we just need to navigate back to the filters at the moment, I just have my
heading for and I'll start by grabbing my contacts.
And now one of the structure, all of those things out of the state.
So remember, we have filters object, and then I would want to get all those default ones, plus I
would want to get both of the methods and all the products as well.
And you'll see why we actually need all the products.
And I'll start here with a wrapper just so I have a better looking component over here.
And let me see let me see them navigate right now to the products just so we can see right away here
side by side.
This should be our filters.
Beautiful.
And then, like I said.
We have used filter context, of course, that is the hook that provides our context, and then we have
few functions.
We have get unique values for my price, as well as the icon from react icons.
And as far as this one is a function, get unique powers.
Of course we'll work on it.
And then for my price, I just use it when I was setting up my range.
Let's start with annoying work where I would want to structure that from the use filter context or use
filter context.
I invoke my hook because I have access to whatever I have in the value and more specifically have my
state, of course.
And in that state I have the filters properly and that is an object itself.
So then I go by text category and then one by one company, whatever names we had.
Order color men underscore price price and Max underscore price as well as the shipping.
So all those properties I'm getting out of the filters object.
Awesome and also, like I said, I would want to get all my methods, so update filters, clean air
filters, as well as all products, so all products, not products, is going to be used when we're
getting those unique values.
So I'll save it over here and then we'll just scroll down a little bit where we have the wrapper.
And we'll start by setting up a div with a class of content on here.
And then instead of this content, let's go right away with form.
And since it's going to be for him, I also have this default action where essentially once we press
on enter, we refresh the page and I would want to avoid that.
That's why I'll say on submit on here and we'll just set up our function.
So once we submit the form, I would want to prevent the default.
That's all I would want to do, because everything else we're controlling in a state or the moment we're
not.
But eventually we will soon here.
Let's just pass in the arrow function on pass in my event object and we simply say prevent default.
And again, the only reason why we're doing that, because we'll be setting up the form.
And the default behavior of the form is once we submit the form, of course, there's a hard page refresh
and I don't want that.
That's why right away prevent that default.
And then instead of this form, like I said, I'll set up everything one by one.
I'm the first one is the search input.
So we're going to go here with search input, copy paste, and we'll set it up as a kind of search input.
And then I just want to go with this with a class of control.
But this is just for styling.
So all of them look somewhat the same.
And then inside of this div, I'm going to go with my input, which is just going to be a text input.
Now, what's important is to have a name and this name needs to have the same exact value like we have
in the state.
So remember, filter context, remember when we were setting up those default values?
So text needs to match exactly what you have over here picture.
So if you have different name, please make sure that name attribute has that same exact value.
So in here, we have typed text name is also a text, and then let's go with Placeholder and as far
as the placeholder, I'll say search over here.
And as far as the styling, we're going to go with search, search and then hyphen and input.
So at the moment, it is not controlled input.
That's why nothing is happening.
But and by the way, why I'm setting up Klinefelter's, I should be class now.
And that's why we have no styling once we have class name properly, because we have nice styling.
But this is not controlled input.
Hopefully we all understand that.
Now, in order to set this up as controlled input, we needed what we needed a value.
So the value attribute with our default value coming from the state and the second one was, of course,
the change.
So once something changes, then I would want to run my update filters.
Correct.
So let's do it, people, we're going to go with value.
So this is going to be my empty string coming from the state and then the second thing is going to be
my own change.
And now, of course, I would want to run my update filters method.
Beautiful.
That's a perfect start.
So now, of course, we would want to navigate back to the filter context and add some functionality
in the update filters, because at the moment, yes, I can type some values over here.
But notice, since we're not running the update filters, nothing is happening in my state because I
get my value from the state that is set to be empty string.
That's why whatever we type over here is not displayed.
And again, that's something we have done already before.
Where I'm going to scroll down, I purposely getting the event object, and I remember using that event
object, I can access the input or a element that is calling that on change.
So in this case, it is an input.
But of course, later it's going to be buttons is going to be checkboxes and all that and not just start
simply saying name and we're going to grab the event target.
So that gets me that element.
And since I added the name attribute in the filters, remember the name attribute and it was set equal
to text.
So this value should be in my dot name so I can access the name.
And the second thing, of course, I would also want to get the value.
So whatever I'm typing.
So I'm going to go here with let's value is equal to event.
Target and then the value and again, let's start simply by just console logging some name and the value.
So I'm going to navigate the bigger screen and here open up my console as we're typing, we should see
in the console those values.
So this is going to be the name, which, of course, is the text and this is the value that I'm typing.
So now, of course, I would want to dispatch an action that again changes that state value, something
that we did already in sort.
And the way we do that in this case, it does matter the name.
Remember previously I said I showed you how to access the name, but actually, since there was only
one value, I passed in as a payload my value.
Now, in this case, it does matter because Filters is an object with multiple properties.
And I would want to change only the property that matches to the element to the value of the name that
is coming from the element here.
Let's go with this patch, and the type is going to be equal to update filters, update and underscore
filters and again, the action is coming from actions J.S. And in this case, payload will be an object
because there's two properties that I would want to pass and I would want to pass in my name and my
value.
So both of these suckers over here and now, of course, we would need to navigate to filter producer
and handle it over there.
So we're going to go to a filter producer.
We're going to keep on scrolling, keep on scrolling, and, of course, we will set up our action.
So if the name of the action is Humpday filters, so if action, that type is equal to update filters,
what I would want to do?
Well, that I would want to the structure, both of these things from the payload because of course
I'm passing it as a object.
So here, let's go with CONSED and we're looking for name and the value and that is coming from action.
And of course that payload and in the filters, I would want to update those values just like we did
when we worked with or remember previously here we had updates and we just said that sought value to
whatever is coming as epilog.
Now, in this case, of course, it's a little bit different because filters is an object itself.
So we're going to go here with the return.
First, I would want to return my whole state just in case there's some other properties, which, of
course, we have.
Then remember, filters was an object, so again, we need to do the same dance where we go with that
and then state filters so we don't lose out any other values.
And then finally, if I would want to access the property dynamically, I simply go with name.
So whatever I'm passing in and then the value again.
If you need to refresh on how to set up dynamic properties, please go to my JavaScript Nugget series
where I cover this in greater detail.
We have covered this already quite a few times and since I wouldn't want to repeat myself, I'm just
going to say here that we are setting up that property dynamically since filters is an object.
I'm just saying whatever name value I'm passing in access to that property and set it to my value.
Now, in our case, of course, what that means is now have the controlled input.
And I'll show you that, of course, and my components.
Where notice I have my filter provider, that's cool, I'm not in the filters.
Check it out.
So I have my text over here.
Right.
And once I type something in, the search on change is invoked.
And as I'm invoking the on change, notice how the state is also changing.
So it's really cool that we are dynamically accessing this state since we'll have multiple.
And that's why we have right now a successful controlled input.
And the last thing that I would want to add in this video.
Is the placeholder 40 filter product.
Remember when we worked with SORT, we had the use effect, correct?
We had a year's effect where we were sorting product.
Now all we want to do the same thing as we are actually updating the filters.
So we ran this every time our sort value change as well as the product.
Now we want to do the same thing when my filters change.
Now, again, we're not going to set up the functionality yet because I would want to leave it as the
last thing we do for the filters.
But what I would want you to see is that every time we run this, our user will run and our placeholder
will run as well.
And then, of course, eventually we'll set up the functionality.
So where I have the user, not only Independencia, I'll add product and then state support, but also
at DOT and then state and filter.
I believe or no, it was my bad.
So every time the value in the subject changes, course I will run this shoes.
Now, I can technically jam everything in a short product, but I much rather one set up another action.
So of course, I created that action already in my action.
Jazz and the name of this action is going to be, uh, type an unfiltered product.
Now, again, for the time being, there's just going to be a placeholder.
Essentially, we'll set up a council log that just logs that.
You can see that every time we do something in our filters, we run of that function.
So let me save it over here and not in a filter reducer.
Notice right now, I'll have a big fat error because we're not handling that.
So in here, let's say if.
Action then type is equal to filter product, then, of course, I'll just return a state more here
like so, but before I do so, at least for the time being, you can see that something is happening.
Also filtering and product.
Just so you don't think that I'm cheating.
And I would suggest placing a dispatch before the product.
I think in my opinion, it just makes more sense where we are clearly stating that first we filter the
product and only then we sort because filter will change the amount of product that we're displaying.
And then sorting is just responsible for sorting the items as far as the list.
So now, of course, I'm going to go to the bigger screen.
And I would want you to see that right away.
Filtering product and that as I'm typing, I'm also calling the function.
So we have our first controlled input, which is going to be our text input.
And then also every time I set something up in that input, I'm filtering the product, which at the
moment is just console logging.
That's a great start.
And now, of course, we can move on and work on the next filters as well.