1
00:00:00,150 --> 00:00:00,690
Beautiful.

2
00:00:01,320 --> 00:00:09,270
And once we can display two types of products, one analyst view and one in a grid view.

3
00:00:09,750 --> 00:00:11,590
Now I want to work on a store.

4
00:00:11,910 --> 00:00:12,290
Why?

5
00:00:12,340 --> 00:00:19,230
Well, because it's going to have a lot of functionality that is similar to the filters, but it's not

6
00:00:19,230 --> 00:00:20,730
going to be as extensive.

7
00:00:21,270 --> 00:00:28,560
So in my opinion, we're going to get a good taste of what's to come, but we're not going to be overwhelmed

8
00:00:29,080 --> 00:00:30,360
by the time we get to the filters.

9
00:00:30,690 --> 00:00:34,400
We should be already familiar with everything that we're going to do.

10
00:00:34,780 --> 00:00:38,800
And I think it's just going to be easier to understand since.

11
00:00:38,850 --> 00:00:44,960
Again, it's not that the functionality is complicated in filters is just a lot of it.

12
00:00:45,350 --> 00:00:46,830
OK, hopefully we are square.

13
00:00:47,690 --> 00:00:56,150
And what we're looking for is the component of sort and in there will push two buttons, so these will

14
00:00:56,150 --> 00:01:02,620
control the view general display the paragraph that just says how many products we currently have and

15
00:01:02,620 --> 00:01:04,550
notice as will be changing the filters.

16
00:01:04,820 --> 00:01:10,520
This value will also change because, of course, we'll be just checking for the length of the filtered

17
00:01:10,520 --> 00:01:11,060
product.

18
00:01:11,100 --> 00:01:11,500
All right.

19
00:01:11,750 --> 00:01:19,220
And then lastly, we have a sort select input where, of course, we can sort the current product,

20
00:01:19,610 --> 00:01:23,640
whether by price, by name, and hopefully get the gist.

21
00:01:23,660 --> 00:01:24,050
So.

22
00:01:24,920 --> 00:01:31,520
Let's navigate to that component and yeah, I think I'm going to start over there, we'll just navigate

23
00:01:31,520 --> 00:01:37,970
to the component and eventually in future videos, we'll set up some new state values as well.

24
00:01:38,270 --> 00:01:39,280
In the filter context.

25
00:01:39,410 --> 00:01:45,610
For now, I would just want to work on return and learn slowly but surely will the functionality.

26
00:01:46,130 --> 00:01:49,140
So I have my support component in here.

27
00:01:49,160 --> 00:01:52,340
Of course, we want to have access to the filter context.

28
00:01:52,370 --> 00:01:55,070
That's why I have imported the hook.

29
00:01:55,400 --> 00:02:01,850
And also I have two icons because there's going to be two buttons, one for Greenview and then one for

30
00:02:02,120 --> 00:02:06,770
you, as well as the stealth component for restyling purposes.

31
00:02:07,070 --> 00:02:08,660
So start with my wrapper here.

32
00:02:09,790 --> 00:02:15,310
And then as far as what values am I looking for from the filter context?

33
00:02:15,460 --> 00:02:19,020
Well, I'm going to start with filter product as well as the grid view.

34
00:02:19,270 --> 00:02:22,960
Now, there's more things coming, but for the time being that you do it.

35
00:02:23,230 --> 00:02:27,100
So, again, we're going to go filtered and underscore products.

36
00:02:27,100 --> 00:02:30,890
And right away, let's give an analysis of product, which is going to be easier.

37
00:02:31,210 --> 00:02:38,470
And the second thing is the grid view, because I would want to check what is the current status of

38
00:02:38,470 --> 00:02:39,070
the grid view?

39
00:02:39,220 --> 00:02:41,430
Is it false or is it true?

40
00:02:41,770 --> 00:02:44,880
And we're going to set is equal to a use for the context.

41
00:02:44,890 --> 00:02:46,090
We will invoke it.

42
00:02:46,330 --> 00:02:51,160
And then inside of this wrapper, let's just start by setting up our buttons.

43
00:02:51,320 --> 00:02:56,650
So in the wrapper, I'm going to go with the day with the class of BTC and container.

44
00:02:57,100 --> 00:03:00,800
And then instead of this content, there's going to be two buttons.

45
00:03:00,850 --> 00:03:03,430
Now, eventually they both will have on KLECK.

46
00:03:03,830 --> 00:03:09,000
So, of course, it will change that view of the property essentially in our context.

47
00:03:09,430 --> 00:03:14,920
But for now, we just want to control the class name because we need to understand that both buttons,

48
00:03:14,930 --> 00:03:19,910
yes, we'll have the same class, but the active one will have different colours.

49
00:03:20,260 --> 00:03:23,440
Notice here how the background is black and then the colours white.

50
00:03:23,800 --> 00:03:26,850
Well, of course, that is going to be for the active class.

51
00:03:26,860 --> 00:03:29,740
And if we want to check out the class, just keep on scrolling.

52
00:03:29,740 --> 00:03:33,180
Notice here I have button container, I have the button.

53
00:03:33,460 --> 00:03:37,570
So these are just going to be the general styles and then for the active one.

54
00:03:37,840 --> 00:03:40,230
Notice how the values are a bit different.

55
00:03:40,570 --> 00:03:46,360
So let's start here in the button container where I would want to first display the button and I'll

56
00:03:46,360 --> 00:03:47,440
just add a type here.

57
00:03:48,740 --> 00:03:55,330
Type is going to be equal to a button and as far as the class name, well, it's going to be styled

58
00:03:55,340 --> 00:03:58,670
right away but will control the active one.

59
00:03:59,030 --> 00:04:01,670
So both will be styled the same way regardless.

60
00:04:02,030 --> 00:04:07,940
But depending which one is going to be active is going to have that class name of active and in the

61
00:04:07,940 --> 00:04:13,270
first one will pass in this one, the bootstrap feel grateful.

62
00:04:13,760 --> 00:04:16,820
So this one let me just type correctly.

63
00:04:17,220 --> 00:04:23,510
So this is going to be the icon that will display in the first one and let me copy and paste and the

64
00:04:23,510 --> 00:04:25,340
second one will have different value.

65
00:04:25,720 --> 00:04:27,710
Of course, this is going to be just a list.

66
00:04:28,100 --> 00:04:30,880
So bootstrap UNendorsed.

67
00:04:31,280 --> 00:04:32,890
So these are my two icons.

68
00:04:32,900 --> 00:04:36,680
Again, the moment we can click all day long and nothing is going to happen.

69
00:04:37,050 --> 00:04:45,190
What I would want to do though, is that active class dynamically depending on what is the value for

70
00:04:45,200 --> 00:04:45,760
a great view.

71
00:04:46,160 --> 00:04:49,580
And this is going to be different for each of the buttons.

72
00:04:49,590 --> 00:04:52,460
So let's just go here with a class name.

73
00:04:52,850 --> 00:04:55,580
And I still would want to add this, of course, dynamically.

74
00:04:55,590 --> 00:04:57,770
That's why I'll have my expression.

75
00:04:58,070 --> 00:05:04,700
I'll go to the template strand here and I'll say if the great view of the property that is coming from

76
00:05:04,700 --> 00:05:11,060
the state is true, then of course I would want to add the active class to my button.

77
00:05:11,240 --> 00:05:11,720
Correct.

78
00:05:11,990 --> 00:05:15,800
So say if greybeards true, then the active class.

79
00:05:16,040 --> 00:05:18,930
If not, well then just add no.

80
00:05:19,400 --> 00:05:24,890
So then I won't be active class now for the second one is going to be a little bit different because

81
00:05:24,890 --> 00:05:30,200
I would want to add the active class if this is false and the way we set this up.

82
00:05:31,390 --> 00:05:37,190
Simply say that if great view is false, then we'll have the act of class.

83
00:05:37,600 --> 00:05:38,690
So now you're right away.

84
00:05:38,690 --> 00:05:43,250
I noticed that since the great view is true, the first one has the act of class.

85
00:05:43,280 --> 00:05:48,760
Again, if you want to test it out, navigate back to the filter context and add false, of course,

86
00:05:48,760 --> 00:05:50,440
or change this value dynamically.

87
00:05:50,680 --> 00:05:54,190
But for the time being, you can see that since Greedo is false.

88
00:05:54,520 --> 00:05:56,620
Now this one gets the act of class.

89
00:05:57,040 --> 00:06:04,890
So go back to true and back in the subcomponent right after the death of container.

90
00:06:05,180 --> 00:06:12,550
I would want to set up my products or display how many products I have currently in my filter products.

91
00:06:12,800 --> 00:06:20,200
So there's going to be a element, the paragraph element and I will simply say products, length, product

92
00:06:20,200 --> 00:06:26,110
and line length and we'll just say product and found separate.

93
00:06:26,410 --> 00:06:31,820
And it should tell us that we currently have 17 products, of course, as will be filtering.

94
00:06:31,840 --> 00:06:33,250
Of course this value will change.

95
00:06:33,650 --> 00:06:36,550
Then we're going to have the horizontal line.

96
00:06:37,820 --> 00:06:43,550
And then, of course, I would want to set up my solek again at the moment, no functionality, just

97
00:06:43,550 --> 00:06:47,830
some kind of UI and we're going to go with form now.

98
00:06:47,870 --> 00:06:48,610
There's no action.

99
00:06:48,620 --> 00:06:49,640
We don't care about that.

100
00:06:49,880 --> 00:06:53,000
And then instead of the swarm, let's go for label.

101
00:06:53,270 --> 00:06:56,300
Now, we will add them all for attribute.

102
00:06:56,300 --> 00:07:04,670
And since I know the idea is going to be sort of set the right sort and also sought by and now we just

103
00:07:04,670 --> 00:07:06,190
need to set up our select.

104
00:07:06,470 --> 00:07:08,720
So let's go and select as far as the name.

105
00:07:09,050 --> 00:07:10,220
I'll set it assort.

106
00:07:10,220 --> 00:07:14,800
And this is extremely important because later we will depend on that value.

107
00:07:14,810 --> 00:07:19,640
So make sure it is sought and as far as it will stay with the sort as well.

108
00:07:20,090 --> 00:07:22,220
Now at the moment it won't be controlled the input.

109
00:07:22,490 --> 00:07:24,500
So I'm not going to worry about that right now.

110
00:07:24,530 --> 00:07:29,960
Eventually, yes, there's going to be a value and on change for now, I would just want the class name

111
00:07:29,960 --> 00:07:34,070
of sort, hyphen, input and line inside of it.

112
00:07:34,370 --> 00:07:37,480
Let's add four option elements.

113
00:07:37,760 --> 00:07:41,330
So the way we set it up, we go with option and then what is going to be the value?

114
00:07:41,510 --> 00:07:44,200
And again, this is important that use the same naming.

115
00:07:44,300 --> 00:07:49,520
So I'm going to go with the price lowest and the text is really up to you as long as the value match

116
00:07:49,520 --> 00:07:52,910
is exactly what I have you, you'll be in good shape.

117
00:07:53,120 --> 00:07:59,990
And here I'll just say price and then the parentheses and we're going to go with the lowest like so

118
00:08:00,230 --> 00:08:01,600
so I'm going to copy and paste.

119
00:08:01,610 --> 00:08:06,170
There's going to be four of them and the second one will be price highest.

120
00:08:06,680 --> 00:08:08,390
So say how you like.

121
00:08:08,430 --> 00:08:15,350
So that's going to be my text then I'm going to go with the name and I'm just going to say name hyphen

122
00:08:15,350 --> 00:08:20,740
A that means starting from A to Z and then of course there's going to be named Z.

123
00:08:21,290 --> 00:08:29,070
That's just going to signal that we'll sort by the name starting with Z and then all the way to the

124
00:08:29,070 --> 00:08:29,250
end.

125
00:08:29,540 --> 00:08:32,330
Now I do want to change my text as well.

126
00:08:32,330 --> 00:08:34,990
So here, of course, it's not going to be lowest anymore.

127
00:08:35,450 --> 00:08:41,060
We're going with the highest line as far as text over here, of course, is going to be name.

128
00:08:42,530 --> 00:08:50,450
And we're going to go with A to Z and the last one, you guys, that is just going to be name and we're

129
00:08:50,450 --> 00:08:57,010
going to be looking forward to a so let's change this one around and we should have this again.

130
00:08:57,260 --> 00:08:58,760
Nothing is happening at the moment.

131
00:08:58,970 --> 00:09:02,840
We just display the select input, that's all.

132
00:09:03,230 --> 00:09:10,130
And once we're done with sample, you are set up, of course, now we can start slowly adding functionality.