1
00:00:00,330 --> 00:00:01,150
Amazing job.

2
00:00:01,560 --> 00:00:08,760
We have some basic return in short, so now, of course, let's make it a bit more interesting and add

3
00:00:08,760 --> 00:00:12,420
functionality to change the thing that is going to be easier.

4
00:00:12,660 --> 00:00:18,630
And then we'll tackle this one of the select input and we'll start in the filter context.

5
00:00:18,930 --> 00:00:24,600
We already have the state of play, which is great view, and by default it is true.

6
00:00:25,140 --> 00:00:31,050
So now, of course, what I would want is to set up two functions that dispatch two options.

7
00:00:31,410 --> 00:00:33,260
One is going to be said grid view.

8
00:00:33,900 --> 00:00:40,050
So this is just going to set it equal to zero and then one is going to be set list view, which of course

9
00:00:40,050 --> 00:00:41,700
will set it equal to false.

10
00:00:41,700 --> 00:00:46,310
And then if that is the case, we already know that we will display the list.

11
00:00:46,440 --> 00:00:46,830
Correct.

12
00:00:47,190 --> 00:00:48,350
So right after the use of.

13
00:00:49,710 --> 00:00:57,390
We're going to go to Functions Consed and I'll call this set grid view, and that one is equal to my

14
00:00:57,390 --> 00:00:59,760
function, so I don't need to pass any parameters.

15
00:01:00,000 --> 00:01:02,970
I'm just going to go with this patch, this patch over here.

16
00:01:03,330 --> 00:01:09,310
And of course I would need some type and there is already a action variable for that.

17
00:01:09,570 --> 00:01:14,100
So say set great view and we'll just copy and paste that.

18
00:01:14,850 --> 00:01:18,300
So and of course our want to set up the set list.

19
00:01:18,330 --> 00:01:20,160
You that's going to be another function.

20
00:01:20,400 --> 00:01:26,250
And instead of set great view, of course I'll pass and set and that list.

21
00:01:26,910 --> 00:01:30,700
So once I have both of these functions, I would want to pass them down since I would want to use them.

22
00:01:31,050 --> 00:01:35,910
So say it's a great new set of Lesterville and now it's up to you.

23
00:01:36,150 --> 00:01:38,940
If you want to set up the producer first, you can do it.

24
00:01:39,360 --> 00:01:47,190
Or in my case, I'm just going to go and attach both of these functions to my buttons and then I'll

25
00:01:47,190 --> 00:01:48,870
deal with them in the producer.

26
00:01:49,170 --> 00:01:54,750
So let's say and again, we're looking for sort component, so we're done with the list, who we're

27
00:01:54,750 --> 00:01:57,450
actually done with the product list as well.

28
00:01:57,810 --> 00:02:04,610
And in the sort J.S., I would want to first grab both of these functions and remember, name was set

29
00:02:05,100 --> 00:02:09,840
grid view and the second one was set list and then view.

30
00:02:10,200 --> 00:02:13,290
And the first one is going to be the grid button.

31
00:02:13,560 --> 00:02:15,660
That's why I'm here will say on unclick.

32
00:02:15,870 --> 00:02:19,920
So once we click we get set grid view.

33
00:02:20,310 --> 00:02:23,040
And then the second one of course, will be my list.

34
00:02:23,040 --> 00:02:28,350
So again, we go on click and we'll go with set list view function.

35
00:02:28,600 --> 00:02:36,330
So once I click on each of the buttons because I'm invoking different function, so save and we just

36
00:02:36,330 --> 00:02:38,550
need to handle that in reducer.

37
00:02:38,550 --> 00:02:46,080
And setup is pretty straightforward where once we navigate there in the filter context, I have two

38
00:02:46,080 --> 00:02:53,370
actions set list you and grid you and I have one state variable, so you can already guess that we'll

39
00:02:53,370 --> 00:02:54,660
just toggle that value.

40
00:02:54,990 --> 00:03:05,100
So I'm going to go with action type is equal to a set view set grid view on underscore score grid view.

41
00:03:05,430 --> 00:03:10,320
Then of course I would want to return my state, so let's go to return to that state.

42
00:03:10,530 --> 00:03:17,430
But then the property, the grid underscore view property will be equal to now.

43
00:03:17,430 --> 00:03:22,740
If the action is set list view you can already guess the grid.

44
00:03:22,740 --> 00:03:24,810
You won't be set to false.

45
00:03:24,990 --> 00:03:26,010
Let's copy paste.

46
00:03:26,250 --> 00:03:28,350
We have set list for you.

47
00:03:28,740 --> 00:03:30,000
This is going to be another action.

48
00:03:31,210 --> 00:03:33,930
And then, of course, it's going to be set to force.

49
00:03:34,300 --> 00:03:41,350
So now we should be able to navigate to the big screen and then once we click on the buttons, of course

50
00:03:41,350 --> 00:03:41,940
there is.

51
00:03:41,980 --> 00:03:44,740
Now, I have the list here and now I have a great year.

52
00:03:44,800 --> 00:03:45,190
Why?

53
00:03:45,220 --> 00:03:49,430
Well, because we're changing the value in the state, in the product list.

54
00:03:49,470 --> 00:03:50,920
We're handling that again.

55
00:03:50,920 --> 00:03:52,360
I'm going to go back to the components.

56
00:03:52,360 --> 00:03:54,780
Just so you don't think that I'm cheating.

57
00:03:54,790 --> 00:04:01,140
I have a filter provider and of course, introduce a notice grid view is true once you click.

58
00:04:01,550 --> 00:04:03,700
This is false since this is false.

59
00:04:03,700 --> 00:04:12,660
In a product list, we are returning a LESTERVILLE and since we attach this class of active to the buttons.

60
00:04:13,120 --> 00:04:19,630
Now, of course, if the value matches to the one we're looking for because now the button is active.

61
00:04:19,960 --> 00:04:23,260
So now this is the grid view and this is the list U.