Amazing job.
We have some basic return in short, so now, of course, let's make it a bit more interesting and add
functionality to change the thing that is going to be easier.
And then we'll tackle this one of the select input and we'll start in the filter context.
We already have the state of play, which is great view, and by default it is true.
So now, of course, what I would want is to set up two functions that dispatch two options.
One is going to be said grid view.
So this is just going to set it equal to zero and then one is going to be set list view, which of course
will set it equal to false.
And then if that is the case, we already know that we will display the list.
Correct.
So right after the use of.
We're going to go to Functions Consed and I'll call this set grid view, and that one is equal to my
function, so I don't need to pass any parameters.
I'm just going to go with this patch, this patch over here.
And of course I would need some type and there is already a action variable for that.
So say set great view and we'll just copy and paste that.
So and of course our want to set up the set list.
You that's going to be another function.
And instead of set great view, of course I'll pass and set and that list.
So once I have both of these functions, I would want to pass them down since I would want to use them.
So say it's a great new set of Lesterville and now it's up to you.
If you want to set up the producer first, you can do it.
Or in my case, I'm just going to go and attach both of these functions to my buttons and then I'll
deal with them in the producer.
So let's say and again, we're looking for sort component, so we're done with the list, who we're
actually done with the product list as well.
And in the sort J.S., I would want to first grab both of these functions and remember, name was set
grid view and the second one was set list and then view.
And the first one is going to be the grid button.
That's why I'm here will say on unclick.
So once we click we get set grid view.
And then the second one of course, will be my list.
So again, we go on click and we'll go with set list view function.
So once I click on each of the buttons because I'm invoking different function, so save and we just
need to handle that in reducer.
And setup is pretty straightforward where once we navigate there in the filter context, I have two
actions set list you and grid you and I have one state variable, so you can already guess that we'll
just toggle that value.
So I'm going to go with action type is equal to a set view set grid view on underscore score grid view.
Then of course I would want to return my state, so let's go to return to that state.
But then the property, the grid underscore view property will be equal to now.
If the action is set list view you can already guess the grid.
You won't be set to false.
Let's copy paste.
We have set list for you.
This is going to be another action.
And then, of course, it's going to be set to force.
So now we should be able to navigate to the big screen and then once we click on the buttons, of course
there is.
Now, I have the list here and now I have a great year.
Why?
Well, because we're changing the value in the state, in the product list.
We're handling that again.
I'm going to go back to the components.
Just so you don't think that I'm cheating.
I have a filter provider and of course, introduce a notice grid view is true once you click.
This is false since this is false.
In a product list, we are returning a LESTERVILLE and since we attach this class of active to the buttons.
Now, of course, if the value matches to the one we're looking for because now the button is active.
So now this is the grid view and this is the list U.