Nice work.
And up next, I would like to thank these filters, so at this point, we should be sorting in place
so we can display the product and we can sort based some data.
And of course, I would want to set up the filters where we can actually control the amount of products
that we are displaying.
And then, of course, we'll still sort based on some value.
Now, when we talk about filters, I want you to understand that we need to set them up as controlled
inputs.
So in a state, I'll have some initial value.
And then as I'm using the filters, of course I'll be changing those values in a state.
And then based on that, I will filter products product.
So I'll start by setting up those values, those state values.
And even though at the moment some of them might not make sense.
Just bear with me one by one.
We'll set up the filters.
And then, of course, it's going to be a bit clearer what we are doing and essentially how we want
to navigate back to the filter context.
Now, I have my initial state correct filter products.
I have all products, grid view and sort and things.
That is going to be a bunch of filters and I only would want to use one function.
I'll set up a property which actually is going to be a object in my initial state.
So in here I'll say filters and then instead of that filters, I will set up those state values and
I'll start with my input and that one will be Texican.
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.
Remember, we have done this before where we're setting up those controlled inputs.
The only thing that I'm doing right now is setting up those default values in the state.
And the only difference, of course, is that I already have the set.
And I'm setting up as a object then right after tax.
I'm going to go with company and by default it is going to be equal to all, because if you take a look
at our project, of course, I'm displaying this category as well.
So for category, there's going to be a value of all.
And the same is going to be for the company and colors and all that.
So I'm going to go with company and by default it is going to be equal to all.
Then the same is going to be for the category as well as the colors.
So let's go here with all that is just going to be my default value and let's do the same thing for
the color.
And that's going to be Sartwell.
Then we're going to have Monoprice Max Price and price and we'll have to add a little bit more functionality
in a second.
But as far as the default values, we're going to go in, underscore price is zero and then Max Price
for the time being will also be zero.
And then lastly, the actual price.
So the price for displaying is also going to be zero.
Now, if you're lost a little bit, notice here we have the range input and in the range and put out
one display.
Well, what is the minimal price as well as what is the max price?
But this needs to match to whatever I have for my product.
So that's important.
It's not just some random price.
It's actually the max price that I have for my product.
And then there's also the actual price that I would like to see.
So, for example, if I would want to see items that are less than one thousand, notice how I'm moving
the price.
So I'll filter based on this price or for that range input, I also would want to get the max price
from my product and that's that little bit of work will have to do in a second.
And then lastly, I also have a shipping.
By default, it's going to be false.
Now, when we talk about shipping, of course, I'm talking about this check box over here.
So by default, that is false.
And we're almost done setting up these default values.
But like I said, I'm going to do a little bit of work where I would want a map over those products
and get the actual price.
Now, let's take a step back and think about it.
When do we load our product?
When we set up to use the correct when we had our first dispatch, so once the products change, we
load our products and the products are in the payload.
All right.
So that makes sense.
Knowledge and navigate to filter reducer.
And let's just add a little bit of code over here, so once I load those products, I would also want
to set up two values in my state more precisely in my filters.
So once I load my product, I would want to map over, get the highest price and then just set it up
over here as a max price value and the same I'm going to do for the price.
Again, we're doing that because I don't want to add some random value.
For example, three thousand.
I actually want to set my match price to be equal to whatever is the max price of the products that
are coming in.
So let's navigate to filter reducer.
And yes, we are turning the step that still stays the same.
But I first would want to get the max price and we'll simply do that by Max Price is equal to action
plug.
Remember, products are in a payload, right?
So I'm going to go with a map and for shortness, I'm just going to go with B, which represents the
product and I would want to get all the prices over here.
So say price.
Now, if you want to can log just so you don't think that I'm cheating on him.
Navigate to the bigger screen, I think it's going to be easier in here in the council, I should first
see the array of zero.
OK, nothing is happening here, but then eventually there's going to be an array of 17 items.
And notice here how we're getting these values.
And I just need to use the math that max method that comes with JavaScript where I would want to pass
in these values and get me the max one now in the max method that we cannot pass in the right.
That's why we'll use the spread operator.
So the way it's going to look like when I get back, I have my max price and I'll leave the console.
OK, just so I can see that it is for sure working.
And we'll just say Max Price is equal to math, like I said, Max.
So the math object that is coming with JavaScript and then we just use the max method.
And then like I said, I cannot pass in that right directly.
I need to use my spirt operator and then pass the max price.
And once you can plug this is going to be that max price.
So whatever errors, of course, I can go back and I believe it was three thousand and ninety nine dollars.
So now, of course, what I would want is add this value to my state more precisely in the filters.
I'll set my max price to be this value as well as the current price, because by default I would want
to set up my range where I start with my max price over here.
So this big dot, it's just going to be set equal to the max and then, of course, user notice can
change.
So my max still stays the same.
My men who wish to zero.
But then the price is the value that the user is controlling.
So hopefully that makes sense.
And in here I'll remove the control log.
And remember, filters was already a object.
Correct?
So we go here with filters is equal.
And now again, I would want to copy the previous values, so I don't want to overwrite it because if
I set it up as Max price is equal to the price and the max price, then of course our move for us to
the default values that we worked so hard to add.
So it's an object.
So say filters is equal to the that that state filters.
So now, of course, again, we copy the old values and then we'll change too.
Things will change.
The max price here will say Max Price is equal to my variable by Max Price.
And like I said, the same thing by default, I would want to set up my price.
So I'll say here that the price is also equal to the max price.
We save this one and now we could just go through the components.
And of course we're looking in the filter provider.
Notice we have the product we have filtered that still stays the same, but now we should have the filters.
That is my object with my default values and Norrish text is empty string.
Then I have company category and color set to all men.
Price is still zero, but now I have my max price for the max price property as well as the price.
And then of course shipping is still awesome.
We're done setting up our default values.
So now one by one, we'll start setting up our filter inputs over here.