Beautiful job.
Our initial setup looks pretty cool, so we have one column layout on a small screen and as the screen
size increases also, so does the amount of columns that we're displaying.
And eventually, again, we have this main two column layout.
And then inside of the product list, we have this three column layout for all our products.
But I also would want to set up the list for you where if the user wants your she can change to this
list.
Vilayat, where we have one column layout all the way from the small screen to the big screen.
And now eventually we will change this dynamically, of course, but for the time being.
I would just want a hard code where in the state, in a filter context, I'll set up some kind of property
and initial value will be false.
So the grid view will be false.
And that's why we will display the list to you.
And then eventually, once we work on it, of course, we'll add functionality where the user can control.
Which view are we displaying?
So what I would want right now is go back to the filter context and then in the state after the all
product, I'm going to go with Grid Underscore and then you.
Now, eventually this will be true because that is my preference to showcase the grid layout by default.
But for the time being, just because I would want to set up the list for you, I'll set it up as.
Now we're already passing in the state, so we don't need to worry about that.
And now we would want to go back to the product list.
So not the grid view.
We're done with grid view.
We're going back to the product list.
And then not only we're getting the product from our context.
I also would want to get grid underscore view property and then I would want to set up one return if
I don't have any product, which at the moment we would need to change the values in a state in order
to see it.
And I'm not going to do that.
Just remember that as we're going to be filtering eventually, there's going to be the case where this
filtered product is going to be empty.
So if that is the case, then I would want to display some kind of text.
And if it's not a case, then of course, I'm going to go with either great view or I'm going to go
with listing.
So in here.
Let's say if a product is having a length of less than one, so if my filter product array is filtered
down to an empty array, then I would just want to return adding five and I'll cheat a little bit here
since I don't want to set up the stall component.
I'm just going to go with inline style and I'll say text transform none because my default on my headings
of the text transform of capitalized, I believe, and I'm just going to cheat a little bit and the
inline style where I wouldn't want to capitalize this one and I'll just say sorry, no products matched
your search search like so and we can have three dots if we want.
So of course this is going to be the case if we have empty right now.
I messed up a little bit and I didn't set up to return.
Now everything is correct.
Again, if you want to start out, navigate to filter reducer.
And just make sure that filter product is always going to be empty right now, by the way, there is
a faster way I can do something like this.
So once the products are changed, I'm not dispatching the action notice.
So if that is the case, sorry, no products matched your search because by default, of course, the
filter product is an empty array.
So I'll go back.
And of course, how uncommon that one am in the product list.
I would want to set up one more if statement where I'm going to go.
If the grid view, which again eventually will be controlled dynamically, is equal to false.
Of course, what I would want is to return a list view instead.
Now, if that is not the case, if it's going to be true, which eventually will be my default value,
then of course I'll be displaying the grid view.
So we go here with a list view and again we pass in the product.
So there's going to be a product prop equal to the product that I'm getting from my filter context.
And at the moment, notice nothing is there.
And since the grid view is false, we are displaying the list, your component and of course we just
need to set up our return.
So in the list view, I would want to access my product, the prop that I'm putting in.
And the case here is going to be that the product is going to look a little bit different.
So that's why I'm not going to grab the product component that I used in my grid.
I'm just going to set up a separate return.
So we'll go here with a rapper and then instead of this rapper will iterate over the products so products
online map, dot map and for every product I would want to return a item.
So I'll name the object to be product in my area and all the structures and properties out of it.
I'm going to say the image name price and then the description description.
So think of it as we're constructing another product component, however, the style is going to be
a bit different.
So I'm getting this out of this product.
And then for every product in my aura, I would want to return an article right away, a key, and that
one will be equal to my body and inside of this article.
We're going to go with the image that will be equal to an image and then as far as the name, while
we're getting the name from the product, correct.
So say it.
We should have this type of look where we have one column and then we just need to add other info.
So I have the idea right next to the ideal place, my div with a heading for of name name over here.
And there's also going to be earning five five and then instead of the starting five, let's just format
the price right away.
So our class name here and I'll set it equal to price and we'll go with format price and pass in the
price at Syrett.
We should see the name as well as the price, and then there's two more things, there's description
and there's also a link, of course, to the single product page.
Notice if we take a look at the complete project, we have the description and we'll do a little bit
of trickery over here because notice we're not displaying the whole thing and then also link to the
single product.
So the same like we had with a product component where we had a link here as an icon.
Now, of course, I'm just setting up a button, but the idea is exactly the same.
So right after the heading five, there's going to be a description and I'll do that trickery a little
bit later.
So for now, we'll just say a description.
So this is going to be, of course, the full description.
And then right after this paragraph, we're just going to go with link to.
And now remember, we need to set this up dynamically.
Correct.
So we have the link component from the reactor down.
And then this will be navigating to the products of forward slash product and then whatever it is that
ID, whatever is the product.
Now, in order to add a little bit of styling, we're going to go with class name and not beaten.
And then sort of it was just type of details like so details.
And then the last thing is the description, because I would want to make it shorter.
And JavaScript, the string property that we're looking for is the substring, which essentially just
returns a new string.
And what we're looking for is substring.
So we have the string, we invoke the method substring method.
And in here we just need to say, well, how many characters I would want to get on my case.
I'm going to start with zero.
So I'm going to start with the first character and all the way two hundred and fifty characters.
And then we'll just add a dot, dot, dot, dot.
So one.
And if we navigate to our current project, I have my list view as well.
So I'm going to navigate through the filter context and I'll start Ekert false because or I'm sorry.
True.
So I'll set it equal to zero and then once we set up, sort of course we'll control this dynamically.
So once the user presses on the list here, he or she sees the list.
You once he or she presses on a grid view, you get the point.
You can see the column layout.