And once we have our UI in place, so essentially once we have all the filters and we can successfully
change the state values as we are choosing different options now, of course, let's set up the function
that is going to filter our products.
And of course, our function is in the filter reducer.
And we're looking for this action of filter product.
And we need to keep in mind that, of course, we're calling this function every time we have changes
in the state filters.
So every time we apply some kind of change here in the filters, we dispatched the action filter product.
And now we just need to, of course, take care of that in reducer, because at the moment we just have
filtering products and the first thing probably is going to be the most important one.
And then one by one and functionality for the filters, but what I would definitely want you to understand
is that we need to have two values, so we need to have a filter product.
So essentially we need to have the array that is going to have the results of our filter product.
But then we always, always need to have this all product, because remember, when we set up our first
action, the load product I purposely set up to stage one is for filter product, and that is the one
that we are using to display our filter product array in the UI.
So this array will always be changing.
You are going to get smaller, bigger or whatever, and then this one will always, always, always
have the value of all the product.
And that is crucial when you're setting up the filtering.
Otherwise the functionality won't make sense because you need to keep in mind that if you have only
one array like this, then of course within a matter of seconds you will run out of this product because
you always need to have that fresh copy of all the product.
So basically all your data.
That's why I will scroll down.
And of course, there is our filter product and I'm going to start simply by getting all the products
out of the state.
So say here like this, all an underscore product that is equal to a state.
And then I'm going to set up minora and I'm going to call this let temp products, because you'll see
in a second that we will overwrite every time we have some kind of filter functionality.
And that one is equal to dot, dot, dot and then all products.
So before I filter anything, I always start with a fresh copy of all the product.
And then when I'm done, I'm returning to state.
And in this case, of course, the name was Filter Product.
Now this will be equal to a ten product.
So the array.
And it's going to be responsible for filtering out the product again.
I know it might look confusing right now, but the whole point is we always want to start with fresh
set of data where we have all the products and only once we're done with our functionality.
So once we're done filtering, we're here.
Once we're done setting up all our functionality, then we want to return filter product equal to whatever
rate we're getting back.
So, for example, if we're going to go back to default in all the filters, then essentially we're
just getting all the product.
But this is not going to work.
If you are going to get a filter product from the state and then you filter more and then return it.
It's not just going to work.
Eventually you will run out this product.
So that's why before you filter anything, you want to start with fresh set of data.
And then once you're done setting up your functionality, then you just return this.
All right.
Now, of course, there's going to be cases where this array also is just going to be empty.
All right.
That's fine.
But if you want to start from scratch every time again, your functionality won't work.
That's something you need to remember that every time you set up some kind of filtering, you always,
always need to have access to that default data.
Otherwise, it's just not going to work.
And once I'm done repeating the same sentence pretty much 70000 times now, of course, I also would
want to get those filters out of my state because, yeah, this is a new era.
Everything was great.
But of course, I would want to check those values as well.
Remember the ones we were setting up over here that a text company category color and all that.
So in the filter, Rudisha, right after I had the structure, all the products, I also would want
to get CONSED and I'll set it equal to state filters, state and filters just because I don't want to
do the nested destruction.
I find it to be annoying in this case.
So we're going to go text and then category again, all the state values.
Pretty straightforward company.
And of course I just need to learn how to type company and then we're looking for color and price and
shipping.
Now you want your grandson to log.
Again, these values will change as we are changing the filters, because remember, we were on this
action, so we dispatched this action every time there is a chance here.
So if you want, you can cancel it.
But I can just tell you that, of course, you'll get back the same values that we already looked at
previously when I was showing you the component, essentially my state.
And now let's start filtering.
So I'll start with the text, since that is my first filter.
So in here, I'm just going to set up a bunch of if statements, by the way, I want to do it below
the 10 products, so below the comment on filtering.
And here I'm going to say if text is anything but empty string, then of course I would want to filter
my ten products on the way.
It's going to look like I'm going to say that product is equal to a ten product.
So essentially I'm going to filter my new value right now is going to be whatever I'm getting back from
this filter.
And then you can already see that I'm setting up my filter product, the ones that I'm displaying equal
to this one.
So whatever I'm going to get back from this filter is going to be that value displayed in my product
page.
So on here, let's go with them products and filter.
And notice, of course, that's why I use letter here, because essentially in every statement, we
are overriding the value of the product.
So we are setting it up equal to a new value.
And of course, we have our callback function.
I'll name each item here a product.
And then as far as the return can do, implicit return if I were want.
But in this case, I'm just going to go explicitly with return.
And in this case, what I would want is to return only the items that start with the text that I have
in the text input.
So, for example, if I type A B, I would want to check for items that start with a B, correct.
Now where I can check the name in the product.
Property is name correct.
So I go here with product and then name and I just want to make sure that there's no casing issues.
So that's my.
All right.
I say to lower case, make sure that the casing matches and then I will use the string method by the
name of starts start and then with and then of course I just want to pass in that text.
So the text that is coming from my state.
So if the product starts with a text, which is then I'm returning the product.
If not.
Then the product is going to be removed from the array, and once I save and once we navigate to the
bigger screen, what we should see, that the moment I start typing out, I'm getting only the products
that match my search again.
Hopefully that makes sense where we're getting all the products.
So all the data, not the filter data, but all the data, whatever it is at the moment, it is 17 items.
Then hopefully I'm going to add more product to the API than is going to be twenty five thirty or whatever.
So every time I dispatch the filter product, I always start from the scratch.
I always start by setting up my temp product equal to all the products and only when I'm done with my
functionality, only when I filter out my aura quite a few times.
So essentially for every street value I have, then I return the filter product equal to whatever I
have.
And if you want, you can start out, you can switch this around.
If you don't believe me, you can go with filter products over here and then also set it to ten products
and you'll see how functionality will go bananas quickly because essentially you're not starting from
scratch.
Every time you're filtering, you already base your current values on the previous ones.
And the filter, of course, that means that you're getting less and less and less product every time.
OK, hopefully that is clear.
We can see how we can do it with a text.
And now, of course, we just need to add those other options as well.
So we start with text, then we have category, we have company, we have color, price and of course,
the free shipping as well.
And check it out if, of course, I'm going to back to the default.
Of course, I am dispatching the action because there was a change in my state.
Correct.
In the state filters more precisely.
And then since I'm going back to the default, I'm sending back to all the product.
And then this one will be false.
Correct.
Because if I remove everything now, I'm getting all the product.
Why then let's go over one more time and then for the next ones, I'm not going to spend so much time
on it.
But the reason why this is happening, because we have the components over here, we have a filter provider
and then check it out in the filters.
Right now, my text value is what it is, an empty string.
And I start here with all the product.
But then this one is false.
So this condition is not met, and then, of course, as far as return, I just returned my filtered
product back to all the product since this is my current value.
So that's why when I'm typing something, of course, I'm changing the state value and notice eventually
I do run out of products because there are no products that start with the F.
But then once I remove, the condition is not met.
And again, we're just display all the products.
Hopefully that is clear because essentially that is the hardest part in the setup.
Everything else is just adding more and more conditions and the idea is going to be exactly the same,
that if the value is not equal to all, then I would want to filter.
If the value is equal to all, then of course I would want to return all the products because of course
I would want to see all the categories, all the companies and colors and all that.