Beautiful.
And once we can display two types of products, one analyst view and one in a grid view.
Now I want to work on a store.
Why?
Well, because it's going to have a lot of functionality that is similar to the filters, but it's not
going to be as extensive.
So in my opinion, we're going to get a good taste of what's to come, but we're not going to be overwhelmed
by the time we get to the filters.
We should be already familiar with everything that we're going to do.
And I think it's just going to be easier to understand since.
Again, it's not that the functionality is complicated in filters is just a lot of it.
OK, hopefully we are square.
And what we're looking for is the component of sort and in there will push two buttons, so these will
control the view general display the paragraph that just says how many products we currently have and
notice as will be changing the filters.
This value will also change because, of course, we'll be just checking for the length of the filtered
product.
All right.
And then lastly, we have a sort select input where, of course, we can sort the current product,
whether by price, by name, and hopefully get the gist.
So.
Let's navigate to that component and yeah, I think I'm going to start over there, we'll just navigate
to the component and eventually in future videos, we'll set up some new state values as well.
In the filter context.
For now, I would just want to work on return and learn slowly but surely will the functionality.
So I have my support component in here.
Of course, we want to have access to the filter context.
That's why I have imported the hook.
And also I have two icons because there's going to be two buttons, one for Greenview and then one for
you, as well as the stealth component for restyling purposes.
So start with my wrapper here.
And then as far as what values am I looking for from the filter context?
Well, I'm going to start with filter product as well as the grid view.
Now, there's more things coming, but for the time being that you do it.
So, again, we're going to go filtered and underscore products.
And right away, let's give an analysis of product, which is going to be easier.
And the second thing is the grid view, because I would want to check what is the current status of
the grid view?
Is it false or is it true?
And we're going to set is equal to a use for the context.
We will invoke it.
And then inside of this wrapper, let's just start by setting up our buttons.
So in the wrapper, I'm going to go with the day with the class of BTC and container.
And then instead of this content, there's going to be two buttons.
Now, eventually they both will have on KLECK.
So, of course, it will change that view of the property essentially in our context.
But for now, we just want to control the class name because we need to understand that both buttons,
yes, we'll have the same class, but the active one will have different colours.
Notice here how the background is black and then the colours white.
Well, of course, that is going to be for the active class.
And if we want to check out the class, just keep on scrolling.
Notice here I have button container, I have the button.
So these are just going to be the general styles and then for the active one.
Notice how the values are a bit different.
So let's start here in the button container where I would want to first display the button and I'll
just add a type here.
Type is going to be equal to a button and as far as the class name, well, it's going to be styled
right away but will control the active one.
So both will be styled the same way regardless.
But depending which one is going to be active is going to have that class name of active and in the
first one will pass in this one, the bootstrap feel grateful.
So this one let me just type correctly.
So this is going to be the icon that will display in the first one and let me copy and paste and the
second one will have different value.
Of course, this is going to be just a list.
So bootstrap UNendorsed.
So these are my two icons.
Again, the moment we can click all day long and nothing is going to happen.
What I would want to do though, is that active class dynamically depending on what is the value for
a great view.
And this is going to be different for each of the buttons.
So let's just go here with a class name.
And I still would want to add this, of course, dynamically.
That's why I'll have my expression.
I'll go to the template strand here and I'll say if the great view of the property that is coming from
the state is true, then of course I would want to add the active class to my button.
Correct.
So say if greybeards true, then the active class.
If not, well then just add no.
So then I won't be active class now for the second one is going to be a little bit different because
I would want to add the active class if this is false and the way we set this up.
Simply say that if great view is false, then we'll have the act of class.
So now you're right away.
I noticed that since the great view is true, the first one has the act of class.
Again, if you want to test it out, navigate back to the filter context and add false, of course,
or change this value dynamically.
But for the time being, you can see that since Greedo is false.
Now this one gets the act of class.
So go back to true and back in the subcomponent right after the death of container.
I would want to set up my products or display how many products I have currently in my filter products.
So there's going to be a element, the paragraph element and I will simply say products, length, product
and line length and we'll just say product and found separate.
And it should tell us that we currently have 17 products, of course, as will be filtering.
Of course this value will change.
Then we're going to have the horizontal line.
And then, of course, I would want to set up my solek again at the moment, no functionality, just
some kind of UI and we're going to go with form now.
There's no action.
We don't care about that.
And then instead of the swarm, let's go for label.
Now, we will add them all for attribute.
And since I know the idea is going to be sort of set the right sort and also sought by and now we just
need to set up our select.
So let's go and select as far as the name.
I'll set it assort.
And this is extremely important because later we will depend on that value.
So make sure it is sought and as far as it will stay with the sort as well.
Now at the moment it won't be controlled the input.
So I'm not going to worry about that right now.
Eventually, yes, there's going to be a value and on change for now, I would just want the class name
of sort, hyphen, input and line inside of it.
Let's add four option elements.
So the way we set it up, we go with option and then what is going to be the value?
And again, this is important that use the same naming.
So I'm going to go with the price lowest and the text is really up to you as long as the value match
is exactly what I have you, you'll be in good shape.
And here I'll just say price and then the parentheses and we're going to go with the lowest like so
so I'm going to copy and paste.
There's going to be four of them and the second one will be price highest.
So say how you like.
So that's going to be my text then I'm going to go with the name and I'm just going to say name hyphen
A that means starting from A to Z and then of course there's going to be named Z.
That's just going to signal that we'll sort by the name starting with Z and then all the way to the
end.
Now I do want to change my text as well.
So here, of course, it's not going to be lowest anymore.
We're going with the highest line as far as text over here, of course, is going to be name.
And we're going to go with A to Z and the last one, you guys, that is just going to be name and we're
going to be looking forward to a so let's change this one around and we should have this again.
Nothing is happening at the moment.
We just display the select input, that's all.
And once we're done with sample, you are set up, of course, now we can start slowly adding functionality.