Nicely done.
We successfully have a single product page where we can display info stars, also change the colors
that we're going to add to the cart or the amount.
Now, let's focus on the product page.
And before we start setting anything up, we just go over why we're setting up separate context, because
technically, like I have already mentioned, probably quite a few times, you can jam everything in
a product.
We already have functionality for the sidebar.
Correct.
We already fetching the product, so we might as well set up the filter functionality and sort and everything
else there as well.
But it's going to be harder and harder to manage.
So that's why we'll set up another context, which is just going to be responsible for filtering, for
sorting and then also changing the view.
So there's going to be a great view and a list.
You again, let me just be very clear.
The whole reason why we're doing that is because I would want to make it easier as our project gets
bigger, because then I know if I have to set up something in the filters, I just look for that context,
set up to functionality over there.
And I'm in good shape.
Technically, if you want to, you can still jam everything in the product.
So we're going to navigate to my filter context, which at the moment should have only the boilerplate.
And now there's one more thing that I would want you to think about when it comes to filtering, we
really need two things.
We need all the products, but we also need this default value.
So essentially, if I start filtering notice at some point, I would want to go back to all the products.
Right.
Otherwise, if I just start filtering and eventually user gets the one product and he or she wants to
go back to the default, how am I going to do that if there is no such option?
So of course we have the option to clearing the filters.
That's why it is going to be very important for us to set up two instances with product.
So we're going to have one instance in a product in which we are going to filter social change.
Well, how big is the IRA, for example, if it matches the filters, then, of course, there's going
to be returned.
If not, then we'll dump it from that.
All right.
But there's always this default threat that has all the product.
So if we ever have to, we can go back to the default scenarios.
In this case, we have three products and we go back to default.
And the Gotcher here is how we can get those products from the products context to the filter context,
because I would want to have a separate context for my product page.
So if we navigate back course, I have filter context and if I take a look at the product context where
I have all the products course that is in the products property right here, which in the beginning
is an empty array, and then eventually we fetch all the product.
Now the gotcha here that of course we are using the hook.
Correct.
We have this hook where it is, where it is.
We have used product context.
That's the hook.
And the thing is, I cannot go to the filter reducer because we also have reducer for filter, which
we're going to use.
I cannot go over here and just grab those products and add to the state.
Why?
Well, because it is a hook and this is a simple function.
So remember rules of Hock's when we had a hook, we could either invoke it and a react component or
in another hook.
Now when it comes to filter reducer, it's neither is just a simple function.
So what we're going to have to do is set up a action that actually takes those products from the product
context and dumps them into the filter context.
And you can probably already guess that I set up that action.
So if we take a look at the actions, just file now after we have get single product, we have load
product action.
And this is the action that we're going to set up in the filter context.
So let's navigate back.
We have our filter producer where we'll set up all the filtering functionality and we also have the
filter context.
And also as a quick side note, you also want to have multiple contexts in this case because you don't
want to jump all the functionality in one producer as well.
So it goes both ways.
You want to have a cleaner context file where it's easier to navigate around and the same goes for producer.
Can you jam everything in one?
Like I have already said 20 thousand times.
Yes, but it might come back and bite you as your project gets bigger and bigger.
So in the filter context, for the time being, I would just want to set up to stay two hours.
I have my natural state.
I don't have a user, Doozer, but I would want to set up two properties.
One is going to be four filtered products.
So that's going to be the array.
That's always going to be changing as the user changes the values in filters.
And for the time being, it's going to have to be an empty array.
And the second one will be that all product one.
So this is going to be the case where if I ever need to go back to the default, I will have this value
as a product.
So we have to start.
And the next one is, of course, the user reducer, so let's go here with CONSED and then State and
of course we're getting back to dispatch.
Remember that was the case and this is going to be equal to my use and mine reducer and will pass.
And the producer in this case, it is a filter producer and we pass in the initial state.
Correct.
Now before we do anything, let's just drop our application.
So we're going to navigate to it next year.
And the key here is place the filter provider inside of the product provider.
OK, that is extremely, extremely important because what we're trying to do is get some info from the
product into the filter.
That's why we need to make sure that we wrap our filter provider in our products provider.
So we go here with filter provider and we're just going to wrap our app.
So that just ensures that we'll always have access to the data that is coming from the product provider
and that in filter context.
Now we want to do two things.
I would first want to get my product from the product context that let me go over one more time.
Remember, in the product context, we had all the product in the state of our correct name was product.
So now I would want to grab them.
And I kind just pass them into the filter reducer.
It's impossible, I would need to do it through the filter provider or component screen here.
First, let me grab those products so consed and I'm just looking for the products properly here and
that is going to be equal to my use and products context.
I invoke it, but then remember, I cannot just pass it into the state directly.
I cannot say, hey, listen, put those products into this initial step.
That's not going to work.
What I would want is to set up my usufruct.
So when this component mounts, then I would want to dispatch an action which is going to be lowed products.
And the way is going to look like we're going to go with use effect.
And then, of course, we have our callback function.
But the gotcha is that, remember, product initially is just going to be empty or even in the product
context.
That's why our dependency will pass in the product.
So as this changes, as we fetch the product that again, we invoke the same thing.
We invoke the dispatch with a type of product, meaning load products are not the type.
So we're going to go with dispatch here, this patch.
And then, like I said, the type will be load product.
And then as far as the payload will, that will be equal to this product.
Initially, it is going to be an empty array, remember?
And then once we fetch, well, then we will invoke usufruct one more time.
And as far as the payload, we pass in the product.
So now, of course, we just need to handle that in our producer.
So let's navigate to the producer and let's say, where is my producer?
I'm going to go to the filter or I'm sorry, reducers, and I'm looking for filter reducer at the moment,
I'm just going to return state since, of course, we're not handling that action yet.
And I'm going to say if action.
And that type is equal to load products, so triple equals and we're looking for load product, if that
is the case, then of course I would want to change my state values and the way I'm going to change
them, I'm going to go return and value that state since there's going to be more properties in there.
And this is the biggest Gocha, where, remember, we have two properties.
We have all products and filter products.
Now, I would want to set my products that are coming as a payload equal to both of them, but we need
to use the spread operator in here.
Let's go with all products is equal to dot, dot, dot and action and then payload because remember,
that's where the products are located.
Now, why we're doing this is because if we all just set it equal to all products and the same for filter
product.
What is going to happen is that once you filter the products, you kind of go back to the default because
the way the job market works will point to the same place in the memory.
So if we use the spread operator now, we're just copying the virus.
And that is extremely, extremely important.
If you won't do that, your whole functionality will eventually go bananas.
Trust me, I learned the hard way and we're going to go with action and payload again.
Both of them are equal to my products that are coming from the payload, but I'm using the spread operator,
so I'm just copying the values.
I'm not referencing to the same place in the memory.
And I think we're in good shape so I can remove this short term state.
We won't need this anymore.
I would want to throw the error if we're not handling the action and if we want to double check, if
all our functionality is correct, then of course we would need to navigate back to our project and
again to look for components.
And now notice how I have a product provider, which of course has all my state powers.
But then I also have the filter provider because I placed that filter provider inside of the product
on correct.
So on the provider.
Notice how again, initially it is empty.
All right.
We already know that.
I'm not going to share that one more time, but once we're done with our of now, notice all products
and filter products is.
And by the way.
My bad think I messed up, it should be filter product or here, let me just double check and filter
products.
My apologies.
Not both of them are arrays of 17 items.
And this is the one that will change as we filtering and this one will always stay with default.
And if we ever need to go back to the default, then of course, we'll just set default our products
equal to all product.
Hopefully everything is clear and now we can start slowly setting up the return in the product page.