1
00:00:00,390 --> 00:00:01,000
Nicely done.

2
00:00:01,380 --> 00:00:05,910
And once we have set up our filter context component.

3
00:00:06,510 --> 00:00:10,340
Now, of course, I would want to work on my product page.

4
00:00:10,500 --> 00:00:12,990
At the moment, that's all we have.

5
00:00:13,470 --> 00:00:21,090
And in the product page, there is going to be a few separate components that are going to be responsible

6
00:00:21,090 --> 00:00:23,400
for certain functionalities.

7
00:00:23,880 --> 00:00:25,980
First, I would want to navigate to the pages.

8
00:00:25,980 --> 00:00:33,360
Of course, I'm looking for product page, where it is, where it is, what it is, product page over

9
00:00:33,360 --> 00:00:33,690
here.

10
00:00:34,050 --> 00:00:41,780
And instead of this heading for now or when I return a wrapper and then we'll start with page zero or

11
00:00:41,790 --> 00:00:42,100
not.

12
00:00:42,250 --> 00:00:42,960
Sorry, my bad.

13
00:00:43,800 --> 00:00:44,610
We're not going to return.

14
00:00:44,610 --> 00:00:47,070
The wrapper will return the main first.

15
00:00:47,530 --> 00:00:52,090
Then we're going to set up our page zero page here.

16
00:00:52,110 --> 00:00:58,430
Now in this case, we're not passing in the product, so we'll just set up our title will be equal to

17
00:00:58,440 --> 00:01:03,930
product and then we'll return our wrapper wrapper.

18
00:01:04,170 --> 00:01:09,750
But I would want to add, of course, the class name as well, the global one, just so I have a little

19
00:01:09,750 --> 00:01:10,410
bit of height.

20
00:01:10,810 --> 00:01:13,870
So say your class name and then the page.

21
00:01:13,890 --> 00:01:21,780
Now, I did import or I didn't get sometimes when you make a mess of it, imports right away the react

22
00:01:21,780 --> 00:01:22,140
icon.

23
00:01:22,410 --> 00:01:23,760
In this case, it didn't happen.

24
00:01:24,210 --> 00:01:30,210
And then trap reporters are going to be three components filter, sort and product list.

25
00:01:30,660 --> 00:01:36,790
So start by working on a product list and then sort and then eventually filter.

26
00:01:37,560 --> 00:01:44,970
So let's go with deal with the class names of section center and product section center and product

27
00:01:44,970 --> 00:01:52,260
classes instead of this idea of let's place our filters component so not the provider filters.

28
00:01:52,560 --> 00:01:56,330
So because we're importing that from the components of course.

29
00:01:56,790 --> 00:02:04,170
And then right after the filters, I'm going to go with another div and we'll place a short and the

30
00:02:04,170 --> 00:02:09,180
product list, because we need to keep in mind that if we take a look at the complete application of

31
00:02:09,180 --> 00:02:11,310
this, we have a grid layout.

32
00:02:11,700 --> 00:02:14,550
So we have filters on one side, on a big screen.

33
00:02:14,850 --> 00:02:19,490
And then I have sought and the actual product in the other column.

34
00:02:19,740 --> 00:02:25,110
That's why we're doing this whole thing where we have filters and then there where we have two components,

35
00:02:25,110 --> 00:02:30,780
soad component and then the product, a list component product.

36
00:02:32,050 --> 00:02:40,390
And an list component, let's say this one, and we're going to navigate here the product page, and

37
00:02:40,390 --> 00:02:46,510
once we're here, like I said, we have to call them out, we have one with filters and then the second

38
00:02:46,510 --> 00:02:48,450
one with sort and product.

39
00:02:49,240 --> 00:02:57,160
And first, I just want to work on the product list, and even that one will be divided in two videos

40
00:02:57,580 --> 00:02:59,850
because we have multiple use cases.

41
00:03:00,250 --> 00:03:05,470
First of all, we have grid layout and then the column layout notice this is going to be the column

42
00:03:05,770 --> 00:03:13,190
and then we can also switch to the list layout where we display each product individually.

43
00:03:13,570 --> 00:03:14,580
That's number one.

44
00:03:15,130 --> 00:03:21,520
And then the second thing is going to be if we run out of the product, I also would want to display

45
00:03:21,760 --> 00:03:23,880
that there are no products available.

46
00:03:24,490 --> 00:03:26,770
So just text like this.

47
00:03:26,940 --> 00:03:29,800
And that's why we'll start with the product list.

48
00:03:30,220 --> 00:03:34,570
And, you know, for the time being, I will remove all the components were done essentially in the

49
00:03:34,570 --> 00:03:35,350
products page.

50
00:03:35,530 --> 00:03:36,490
We won't go back.

51
00:03:36,880 --> 00:03:40,420
And now, of course, we're looking for the product list.

52
00:03:40,780 --> 00:03:46,450
And in here there's going to be one return if we cannot display any product.

53
00:03:46,690 --> 00:03:52,530
And then there's going to be another return where we either display the list for you or the grid view.

54
00:03:52,960 --> 00:03:54,640
Now, we'll start with the grid view.

55
00:03:55,120 --> 00:04:02,650
We'll just return grid you from this component and then eventually we'll set up the return for the empty

56
00:04:02,650 --> 00:04:05,970
product as well as the list view.

57
00:04:06,310 --> 00:04:13,100
So for now in the product list, what I would want you to do is just return a grid view component.

58
00:04:13,120 --> 00:04:16,800
Don't worry, we'll set up rest of the functionality in the next video.

59
00:04:16,990 --> 00:04:25,130
So grid view and we would want to get from the filter product, the actual product.

60
00:04:25,570 --> 00:04:26,650
So let's go here.

61
00:04:26,680 --> 00:04:28,360
We use filter context.

62
00:04:28,520 --> 00:04:29,470
That is my context.

63
00:04:29,770 --> 00:04:34,600
And before I can grab anything from that context, of course I would need to pass it and.

64
00:04:34,610 --> 00:04:35,080
Correct.

65
00:04:35,500 --> 00:04:41,950
So we navigate back to the filter context and instead of passing filter provider, of course, we go

66
00:04:41,950 --> 00:04:46,060
back to the JavaScript, we set up our Curley's and we stay state.

67
00:04:46,450 --> 00:04:54,190
So I'm passing in all my state, which at the moment is just filter product and all product arrays and

68
00:04:54,190 --> 00:04:56,960
eventually of course, will add functions as well.

69
00:04:57,310 --> 00:05:02,670
So in the product list now, I would want to invoke use filter context.

70
00:05:02,680 --> 00:05:07,030
That is my hook and what I'm looking for is filtered product.

71
00:05:07,240 --> 00:05:08,860
So I don't care about all products.

72
00:05:09,280 --> 00:05:16,160
Since I would want to display the products that I'm filtering, I'll always look for filtered product

73
00:05:16,180 --> 00:05:21,400
so filtered underscore products, but I'll give it an alias of products because it's just easier for

74
00:05:21,400 --> 00:05:24,760
me and eventually there's going to be one more property for time being.

75
00:05:24,760 --> 00:05:29,980
We won't care about it and we will go with use filter context like so.

76
00:05:30,100 --> 00:05:31,090
So we invoke it.

77
00:05:31,630 --> 00:05:36,360
And then of course I would want to pass in those product in the great deal.

78
00:05:36,790 --> 00:05:40,350
So this is going to be the view where I display these columns.

79
00:05:40,630 --> 00:05:44,880
So let me go back to the default and this is the view that I'm shooting for.

80
00:05:45,070 --> 00:05:46,840
This is something that I would want to display.

81
00:05:47,230 --> 00:05:49,390
That's why I'll go with product.

82
00:05:50,340 --> 00:05:58,560
And I'll pass in my products that are coming from the context, and then, of course, I want to navigate

83
00:05:58,560 --> 00:06:02,010
to my great view, so that's the component.

84
00:06:02,280 --> 00:06:08,010
And of course, we'll set up our return and it's going to be extremely straightforward where I would

85
00:06:08,010 --> 00:06:13,140
want to grab my product prop, then I'll return my wrapper.

86
00:06:13,140 --> 00:06:14,670
So my styled component.

87
00:06:14,970 --> 00:06:21,660
And inside of it there's going to be a div with a class of products, container products.

88
00:06:23,400 --> 00:06:31,020
So and then in here we'll just iterate over the product and display the same product that we return

89
00:06:31,290 --> 00:06:32,120
in a homepage.

90
00:06:32,580 --> 00:06:35,110
So this is going to be the same deal now for the list.

91
00:06:35,130 --> 00:06:37,380
Yes, there's going to be a little bit different set up.

92
00:06:37,380 --> 00:06:45,750
But just for the grid layout, for the column, I will iterate over every item, remember is an object

93
00:06:45,960 --> 00:06:52,260
and then I will just return and remember, the product component was just looking for the properties

94
00:06:52,260 --> 00:06:53,490
that are coming from the product.

95
00:06:54,030 --> 00:06:55,590
So since we have a list.

96
00:06:56,460 --> 00:07:01,590
I need to a and remember, this is the same product that we're getting back, so there is going to be

97
00:07:01,590 --> 00:07:05,790
a ID property and then DataDot and then product Lexia.

98
00:07:06,180 --> 00:07:11,880
So I wrap this and I should see my label now, of course, on a small screen.

99
00:07:12,210 --> 00:07:13,290
This is going to be the lock.

100
00:07:13,500 --> 00:07:18,480
But once we go to the big screen, of course, it's going to look a bit different where we have the

101
00:07:18,480 --> 00:07:19,580
actual columns.

102
00:07:19,590 --> 00:07:24,180
So that should be our initial setup for the product page.