Nice work on setting up the initial functionality where we can control the state value using the select
now of course, I would want to sort my items depending on that value.
Now, what we need to understand is that we're not going to control the amount of items that one will
still stay sovereignty in our case, meaning the original array.
What we're controlling is the order.
So based on our value, we'll either sorted by the lower, by the highest, as well as the name.
Hopefully that is clear and also will rely heavily in this video on the sort method that comes with
JavaScript.
So if you need a refresher, please visit one of the links, since I'll try to explain in as much detail
as I possibly can.
But if some parts are still unclear, just utilize the external resources.
So I'm going to navigate back to my project.
And first, in a filter context, I would want to set up another action and this one is going to be
again in the user.
So what I would want is to have a user that runs every time we change this state value and also it runs
after we set up the product, because remember, initially this filtered product is an empty array.
And since our functionality will depend on this array, we also need to add product to that dependency.
Right now, of course, there is already a action variable for that.
And we just need to set up use the fact and eventually there's going to be filters here as well.
But for the time being, we just need to set up our user fact and in our dependency, right.
Let's write product.
So when the product changes, we will run this one as well as, of course, initial amount and also
when the state value offshore changes since that's when we click on the input.
Correct.
So we're going to go with state and then the value was sought.
So once that value changes, I would want to invoke the speech.
And then in this patch type will be and the name is update or I'm sorry sort product.
My apologies, sir.
So what product?
Of course, again, variable is coming from my actions just now.
We're not passing in any kind of payload.
We just dispatch the action.
And of course, we're going to get a big fat error because this is happening on initial month.
So we just simply need to go to a filter reducer and handle that.
And I'll start by simply setting up Dave and we're going to go with F action type is equal to.
And remember, the name was short product.
Well, then I would want to do something and this is going to be different, where we'll set up for
more if statements for every state value that we have, possibly for short.
Now, for the time being, I'm just going to return state so I don't get that annoying error like so.
So that should fix it.
We're just getting back our state and I will start by getting two values out of the state.
First out, I want to get the sort value.
So I would want to know how I should talk.
And then the second one will be those filtered product.
So we're going to go here with CONSED and I'm looking for short and then filtered and then product that
is coming from the state.
Of course, that's number one.
Now the second thing will be a temp product array, which will change depending on my state value for
my sort.
So in here let's say lot and then temp product since we will change it in each if statement, if of
course the condition matches and that is going to be empty right over here.
And then let's set up, like I said, for if statements, so say if short and now we need to again use
the same strings.
So price and lowest, lowest like zero.
And then for the time being, let's just cancel out the same thing so that we are aware of what is happening.
Price lowest.
And then I'm just going to copy and paste one, two, three, four.
Why am I doing that?
Because I have four possible values for the select one.
And then of course, this is going to be priced highest.
Correct.
So I'll change this one around.
Just make sure again that strings match exactly what you have here, but it's not going to make sense.
And now, of course, I would want to go with name.
So name A and and here we're going to go with a name Z, so name C I will say it, not Novik.
It to the big screen.
Just so we can see what is happening a bit clearer and of course, I have my issues affecting all that
and what we should see in a council that we have price lower.
Why?
Because that is my initial value in state.
Correct.
When I go price highest and I should meet the condition here.
And my second thought and of course, half price highest.
And then one by one, we just need to use sort of filtered products.
So the products that are currently displayed and of course I would want to change the order and then
I'll right away set up my ten products equal to that value to have four if statements.
And if the value matches, then of course, beautiful, I'll just add this up to be equal to whatever
I'm filtering.
OK, meaning more precisely sorting I guess.
So start with type products over here and that the product is, you know, I'll change my mind.
Filter product is just going to be dot the dot and filter products filtered and then products.
So I copied the values from the filter product that is going to be my ten product.
And then as far as the state well will return filtered products right now equal to my ten products.
So at the moment you're like, OK, wait a minute, what is happening?
Wigo go with filter products here.
So set it equal to the ten products and then you return the filter product equal to ten products.
Well, just in case, if there's some weird scenario where none of the match and at least I display
something otherwise if I'm just going to go with empty array over here for ten products and then I set
my filter products equal to an empty array, I'm not going to display any product.
Hopefully that is clear.
And then in the price lowest one I would want.
Well, I'm going to go with them product and we'll just overwrite that value will go with type products
and then let's use that sort.
Method on certain products is equal to a short function and insert function we pass in a callback function.
And in here, we can access to items meaning the one, the current one and the next one, and you can
use whatever parameters you want.
But in my case, I'm going to go with A and B, and honestly, the fastest way how we can write is simply
by setting up the implicit return.
So start with implicit return and I'll show you on the first one the long way.
And then hopefully it's going to be clear and then we can continue with shorter terms here as well.
So essentially, if you want to sort some items.
Starting with a smallest value, first, we just need to go with Ihram, which in our case, of course,
is the product.
I remember when we talked about the product and this is extremely important product where we got.
All right.
And then each item was that object.
So when we're using that sort, we're iterating over there.
Correct.
And what I would want to do is compare my items based on that price.
So A and B represent the current item and then the next item, meaning my product.
And then I would want to store them based on price by placing the smallest item first.
So that's why I'll go with a price minus B price.
So again, we first start with a shortcut and then I'll show you the long way how the functionality
works.
And what we should see is the fact that we're sorting items based on the price.
All right.
Now, if we want to sort by the largest items first, then we'll just copy and paste and we need to
flip through again.
Don't worry.
I will show you the long way.
But since some people might be familiar.
I'm just going to set up the functionality first here and then I'll go back and go line by line.
So if you want to set up your items, if you want to sort them by the highest number of first, meaning
the whatever price we have, then of course we go with B price.
So the second item minus the A price.
OK, so so we just flip it around.
And now, of course, once we click on the highest, we should display the highest item first.
So that should do it for the price.
Now when it comes to comparing by the name prior to the method that I'm about to show you, we needed
to write a few lines of code.
But with the arrival of this one, look now online compare, we simply have an option of One-Liner.
Again, if you want to find out more about this method, please visit the resources and what's really
cool about it that we don't even need to worry about of the casing and all that annoying stuff.
So we're simply passing one.
Now, you compare it to the second value and then if the output is the one that we're looking for,
then of course we just return new or all the items.
So where we have a name and then hyphen A just means that I would want to sort those items based on
the name that of course, starts with A, B and whatever.
And then the ones that start with Z are going to be all the way at the end.
So we simply need to again, grab these values here and copy and paste.
And I'm going to say sort of what I'm accessing.
And B, so that's going to be the current item.
And then the next item and here I'm just going to say that I would want to return a name and then Lacau
compare and then we're looking for Behnam.
So a name.
Lacau Compare and then we're comparing B names since that is the property, of course.
And for the names that start with Z, again, the setup is going to be extremely similar.
We just need to change it around where we're going to go with B name Lukow compare and then we pass
in the name and let me just double check whether functionality works and then we'll take a deep dive
into it.
So this is going to be my lowest first.
Then we can set up my highest course, then we can set up by name.
So this is going to compare the names.
And of course, if.
It starts with a. and of course, this is going to be the first one and then all the way down to D.C.
and if we would want to show the first ones that start with the and of course, we just set up our state
value equal to name Z.
So if you're familiar with it, you can probably move on to the next video, because now I'm just going
to go back to our code and I'm going to show you the long way how it works.
So we have a sort and we're comparing to ours.
We are comparing the current value and the next.
So now, of course, I will for now just delete that and we'll write it the long way and the way it's
going to look like we will first need to check on what is the value of A price and B price.
So we'll set up if a price, a not price is less than Bre-X price.
If the AI is less than B, then we need to return negative one.
Now, what that means is that A is going to be placed before B, however, if the AI is bigger.
So if I go it if a price.
It's bigger than the price that I would want to return, plus one meaning one, and if that is the case
now, the AI is going to be placed after Libby and then eventually we're just going to return and then
we set up here.
That should be it.
Now, in this case, I think I'm missing one perhaps to hear something like this.
And this is going to be the long war.
Now, what we need to understand, though, is that when we return, let's be price minus a price,
essentially.
This is exactly what we're doing.
So if the price is going to be bigger, then of course, we'll return positive if the price is going
to be bigger and of course, it is going to be negative.
So this is going to be the case where we're setting up the sort based on smallest value first.
So if the price is less than we price, we return negative one.
If we return negative one, A is placed before, B if the price is bigger.
So if the price is bigger and B, then of course we display it after.
So this is going to be for lowest number first.
Now, if the second item price is less than the first items price, then of course we're returning what
we are returning negative one, which is going to place that first item up front.
And the same works with our method of local compare where again, we are just returning a value from
that method, whether that is going to be negative one one or zero.
And then depending on that, of course, we are sorting.
So now, of course, I will say it again, please understand that first of all, we get filtered product
and I just copy and set them equal to the time products just in case I have some kind of value that
doesn't match.
And mine in all my statements, I'm just changing the value of that product.
And at the end I set back the filter product equal to a temp product.
And then in each if statement, I just check what is the value of the sort and if it matches, then
I just sort my items using the short function in here we just return A minus B or B minus.
I am on four names.
We use a nifty method look I'll compare, which also will return those a number of hours.
Again, you can technically use different set up.
You don't have to use local compare if you want, but I just find it to be the fastest one.
Since this one compares the casing and all that.
Hopefully we are on the same page and we can start working on the filters.