Nicely done.
And once we have set up our filter context component.
Now, of course, I would want to work on my product page.
At the moment, that's all we have.
And in the product page, there is going to be a few separate components that are going to be responsible
for certain functionalities.
First, I would want to navigate to the pages.
Of course, I'm looking for product page, where it is, where it is, what it is, product page over
here.
And instead of this heading for now or when I return a wrapper and then we'll start with page zero or
not.
Sorry, my bad.
We're not going to return.
The wrapper will return the main first.
Then we're going to set up our page zero page here.
Now in this case, we're not passing in the product, so we'll just set up our title will be equal to
product and then we'll return our wrapper wrapper.
But I would want to add, of course, the class name as well, the global one, just so I have a little
bit of height.
So say your class name and then the page.
Now, I did import or I didn't get sometimes when you make a mess of it, imports right away the react
icon.
In this case, it didn't happen.
And then trap reporters are going to be three components filter, sort and product list.
So start by working on a product list and then sort and then eventually filter.
So let's go with deal with the class names of section center and product section center and product
classes instead of this idea of let's place our filters component so not the provider filters.
So because we're importing that from the components of course.
And then right after the filters, I'm going to go with another div and we'll place a short and the
product list, because we need to keep in mind that if we take a look at the complete application of
this, we have a grid layout.
So we have filters on one side, on a big screen.
And then I have sought and the actual product in the other column.
That's why we're doing this whole thing where we have filters and then there where we have two components,
soad component and then the product, a list component product.
And an list component, let's say this one, and we're going to navigate here the product page, and
once we're here, like I said, we have to call them out, we have one with filters and then the second
one with sort and product.
And first, I just want to work on the product list, and even that one will be divided in two videos
because we have multiple use cases.
First of all, we have grid layout and then the column layout notice this is going to be the column
and then we can also switch to the list layout where we display each product individually.
That's number one.
And then the second thing is going to be if we run out of the product, I also would want to display
that there are no products available.
So just text like this.
And that's why we'll start with the product list.
And, you know, for the time being, I will remove all the components were done essentially in the
products page.
We won't go back.
And now, of course, we're looking for the product list.
And in here there's going to be one return if we cannot display any product.
And then there's going to be another return where we either display the list for you or the grid view.
Now, we'll start with the grid view.
We'll just return grid you from this component and then eventually we'll set up the return for the empty
product as well as the list view.
So for now in the product list, what I would want you to do is just return a grid view component.
Don't worry, we'll set up rest of the functionality in the next video.
So grid view and we would want to get from the filter product, the actual product.
So let's go here.
We use filter context.
That is my context.
And before I can grab anything from that context, of course I would need to pass it and.
Correct.
So we navigate back to the filter context and instead of passing filter provider, of course, we go
back to the JavaScript, we set up our Curley's and we stay state.
So I'm passing in all my state, which at the moment is just filter product and all product arrays and
eventually of course, will add functions as well.
So in the product list now, I would want to invoke use filter context.
That is my hook and what I'm looking for is filtered product.
So I don't care about all products.
Since I would want to display the products that I'm filtering, I'll always look for filtered product
so filtered underscore products, but I'll give it an alias of products because it's just easier for
me and eventually there's going to be one more property for time being.
We won't care about it and we will go with use filter context like so.
So we invoke it.
And then of course I would want to pass in those product in the great deal.
So this is going to be the view where I display these columns.
So let me go back to the default and this is the view that I'm shooting for.
This is something that I would want to display.
That's why I'll go with product.
And I'll pass in my products that are coming from the context, and then, of course, I want to navigate
to my great view, so that's the component.
And of course, we'll set up our return and it's going to be extremely straightforward where I would
want to grab my product prop, then I'll return my wrapper.
So my styled component.
And inside of it there's going to be a div with a class of products, container products.
So and then in here we'll just iterate over the product and display the same product that we return
in a homepage.
So this is going to be the same deal now for the list.
Yes, there's going to be a little bit different set up.
But just for the grid layout, for the column, I will iterate over every item, remember is an object
and then I will just return and remember, the product component was just looking for the properties
that are coming from the product.
So since we have a list.
I need to a and remember, this is the same product that we're getting back, so there is going to be
a ID property and then DataDot and then product Lexia.
So I wrap this and I should see my label now, of course, on a small screen.
This is going to be the lock.
But once we go to the big screen, of course, it's going to look a bit different where we have the
actual columns.
So that should be our initial setup for the product page.