Great.
Once we add more fields and populate our API with more products our products page in our application
should look something like this where we have a bunch of products.
And even though it doesn't look bad you could probably see that even if we would add a simplified dimension
it would look a bit better where all our products are not stuffed in one page and we're going to do
that by setting up first our context.
So I'm going to navigate back to our project.
We're going to look for the context folder or directory and then we're looking for the product genius
and that's where we would like to work.
And then we still have the comments from the previous setup.
So I guess since we have code use effect quite a few times I think I can delete that.
Same goes for the product consumer.
And we're going to add some more state values.
Now I'm also going to collapse the use effect because we already have it and it's just taking up a bit
more space.
I'm gonna add some comments that these are gonna be extra stage values or whatever stage values so extra
state values.
And again we're gonna use used state.
We're going to start by adding these sorted and set sorted which is gonna be all right.
If you covered the previous projects where we covered filtering this should look very familiar where
we have the product but since we're going to set up the filtering as well as page nation well sorted
is going to serve as our main products and only when we would want to go back to default then we're
going to use the product again that should be something very similar to what we did before.
So we're gonna go with set sorted and of course we're going to use used state but we're gonna start
with an empty array that's gonna be our initial setup and we're also going to have a page and set page
value.
So const the value name is going to be page but the function name is gonna be set page that is gonna
be used for passive nation so react use state and initial value is gonna be zero.
So we're always gonna start with a page of zero and also we would want to work with filters because
eventually we're gonna have some voters here notice we're gonna have the item or the input as well as
the Select and also the checkbox and also the radio button.
So that's the reason why we're gonna set up our filters and this is just gonna be an object with some
empty values.
So cost then the name is going to be filters or you can call it filter set filters is the function and
then we're using react use state and then like I said we're gonna use an empty object where we're going
to passing the empty object and then within the object we're gonna have the values.
Now why I'm setting this up as an object because technically you could say well we could set up each
and every individual item here as the state value and we definitely could have done that but the reason
why I was doing it because later we're gonna set up a function and I just find it easier if we have
one function that deals with all of them.
That's the reason why I did that and I'm going to go with search.
My initial search value's just gonna be an empty string then I'm going to have the category.
So there is gonna be phone radio or the computer.
And for now I'm just gonna say all.
So show me all categories.
Then also shipping whether shipping is free initially is just gonna be false.
I'm gonna avoid shipping equal to False and last price I'm just gonna say that for the time being all
the prices should be shown as you can see that's my initial radio button and then eventually we have
zero to 300 and then 300 to 650 and over 650.
So we're just gonna start with all.
So show me all prices we're going to save that.
And I have the error because I didn't use the react since I didn't import it.
So let's go with the react use state.
We're going to save it.
Everything is fine.
We're gonna set up to place holders for a function.
One is gonna be change page.
Now it's gonna be used when we're doing pageant action and the other one is gonna be update filters.
Now update filters we're and run on change.
So each and every time we're going to do something with our radio buttons or I don't know with our select
line of course we're going to run the on change and we're going to run our update filters for now we're
just going to set them up as placeholders so cost change page is gonna be equal to an index.
So we're gonna pass the index and then from this function.
I don't know for the time being we're just gonna console log the index log.
Now we're going to go with index then another place holder is gonna be our update filters so const update
filters function as a parameter.
We're to pass in the event object and again for the time being we're just giving console logs something.
So let's go log on.
I don't know.
Let's console log our event once I have my state values as well as my place holders for the functions
in place.
I'm gonna pass them down so where I have the value prop while I'm gonna add more items.
So here I'm looking for all the items that I added so I'm gonna pass in sorted.
I'm gonna pass in page as well as we're gonna pass in filters so filters.
Then we also have a function of change page and we have the update filters.
We're gonna save that and last thing within the product context.
What I would like to add is set sorted.
And then of course I would want to pass on something because what happens right now we're gonna have
the empty array but since this is going to replace our product we need to pass in some kind of value
eventually.
So remember we had our use effect where we fetched the products.
Then we flatten them out and we had our products.
So before set products I'm also gonna use set sorted.
So we're gonna go set sorted and we're gonna pass in the same product.
And again this should look very very familiar because we already did that in the previous projects.
When we work with filtering so again we're gonna use sets or as our main products.
And if the user wants to go back to defaults then we're gonna use the product state value but until
that we're gonna use these sorted and just to show that there should be no difference since we're passing
in the same product.
I'm going to navigate to Pages directory of that I'm gonna look for product page and or destruction
products from our products context.
Now in this case I'm going to change this around and we're not gonna look for products we're going to
look for sorted because again we have right now the sorted state value and we're populating with the
same products that were fetching.
And you should see that once you save it and then of course obviously as you pass it in instead of products
within the product list.
So let me delete that.
Instead of product we're going to look for sorted save it and our products page should look exactly
the same.
So I can refresh and you see we're going to have the same product but now we're using different state
value.
Our sorted state value.