Amazing job.
We're almost done with our filters component.
I just wanted to add my check box for free shipping as well as this button to clear out all my filters.
So let's go here where we have end of price, will one more common shipping, and then, of course,
we'll copy and paste and we're going to go with and off shipping and inside of the comments.
Let's go with firm control and then there's going to be a little bit of extra styling.
That's why I'll add one more class, which is going to be shipping class and side of this day.
Let's go with label.
And in this case, there's going to be a D on the check box, that's why and here the value of shipping
and let's just say free shipping.
So and by the way, I have three P's.
I don't think I needed that.
And I'm going to go with my input.
Now, in this case, it is going to be a check box like so.
And for the name, of course, it needs to match a state which is shipping then is exactly the same.
So I'm going to go here with shipping since the label is looking for that.
And then I have the type, I have the name and I have the three.
So I only need on change and also out on display whether the check box is checked or not.
So let's say that we should see the check box.
There it is.
And of course now I can check it, but I would want it by default displayed whatever I have in the state.
So once I click on it, of course, I would want to invoke change first.
So on change and we're going to go update filters.
But also, of course, I would want to display whether the state value is true or false.
And in this case, we're not looking for the value.
We go with checked attribute and also this equal to our shipping value.
So if this value will be false, then of course the check box will be on click.
However, if the value will be true and of course, we'll display that we have checked on the check
box.
Now, the thing here is that, again, in the filter context, we're going to have to do a little bit
of magic where when we're talking about checkboxes, we are not getting the volume.
So similar issues like we had with buttons.
So in this case, again, we go with name.
And if that one is equal to a shipping or the checkbox, we're looking whether it is checked or not.
So we're going to go value is equal to eventer, target and then check.
So if this is true, then of course our value will be true.
If it's false, you get the point.
And now once everything is set up, we should see that by default it is false because of course our
values are false.
Then once I click, it is true.
If you want to double check your, you know, the drill we navigate to bigger screen because I think
it's easier to see we're looking for filters.
And if we click on the input, by the way, I would need to make this one a bit smaller here.
I'll check.
And now, of course, shipping is true once we click one more time.
Now, of course, it is going to be false.
And then since this is somewhat short video, why don't we also add the clear filters functionality
as well?
Because essentially the only thing we would want to do is just set it back to the default.
So we'll start in the filters component and in this case, I'm not placing this inside of the form,
so right outside of the form, I'm going to go with my button.
It is going to be a typical button.
So we're just going to say type is equal to a button.
Then let's add a class name of clear hyphen between and on Kaleck.
This is where I would want to invoke my Klinefelter's.
So once I click on this button, of course I'll run my function clear filters and can already guess
that the volume is going to be exactly the same color filters text inside of the button of where it
is.
That should be our button and then inside of the filter context where we have the clear filters function.
Now of course I would want this patch and action and that action will be clear filters.
So let's go here.
Dispatch and action is coming from my actions.
Yes, we say type and we go with clear filters.
Now, at the moment, we're not handling that, of course, in producer.
So the moment we'll click on a button, there's going to be a big fat error rule.
Fix that in a second.
So we navigate to filter reducer.
We scroll down.
Eventually we'll work on our filter product and I'm just going to set up a action and then that type
is equal to clear filters.
That's my action.
And what I would want is just to return the default values.
So I think it's going to be faster if we just copy and paste.
So grab all the filter values over here and navigate back to filter producer, jump to action the color
filters and now would want to return the state.
So I would want to return to that state.
So by mistake, I'm not overwriting any values and then I'm going to copy and paste my filters and we're
almost done.
But notice here how we have been priced mesero, max, presider as well as the price zero.
And that's not the setup that I would want to use.
Instead, I would want to leave the main price and max price to be whatever I have as a default, since
these are the two things that we wouldn't want to change.
That's why back in the filter reducer, I'll also say that first I would want to get all the properties
so state that filters so and I'm going to spread them out.
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
max one.
So if I remove this price, then of course I'll leave it the way it is.
So even though I'm going to be clearing the filters, my price will stay exactly the same because notice
I'm just copying the values and I'm overriding these ones.
I'm not overriding the price, meaning, of course, that is if I would remove the price, but instead
what I would want is the gold price and then let's access state filters and max price.
So essentially, we're just setting up that default value of the max price.
And now, of course, we can test that out.
For example, here, I'm going to write some text content.
I'll set up my category to be some kind of value as well as the company color and then the price and
free shipping.
And once we click on color filters, notice how we set our filters back to default.
And of course, if you want to double check that, as always.
Yes, make sure you go to components and in here, open up the filters, then do the same thing just
so you can double check that everything works because trust me, it is much easier to get these errors
here instead of when you actually start filtering, because even then something goes bananas.
It is much more hard to see that.
So I'm going to go with color filters because I have some kind of ours over here.
And once I press on color filters, I go back to my default values.
Beautiful.
Now we just need to set up a function that takes care of the filtering functionality and we're going
to be in good shape.