1
00:00:00,400 --> 00:00:01,070
Awesome job.

2
00:00:01,090 --> 00:00:08,590
We've got some buttons, and as we're clicking on them, we change our view, I think now it's a great

3
00:00:08,590 --> 00:00:17,410
time to work on the select and there are few steps to get the select working where we can support our

4
00:00:17,410 --> 00:00:18,550
product on.

5
00:00:18,550 --> 00:00:21,910
The first one will be setting up the controlled input.

6
00:00:22,300 --> 00:00:26,440
So I would want to have some kind of value in the state.

7
00:00:26,980 --> 00:00:32,070
And then as I'm clicking on the select, of course I'll change that value.

8
00:00:32,410 --> 00:00:38,710
And the second thing is going to be setting up the user that runs every time we change state value.

9
00:00:39,220 --> 00:00:44,530
And then, of course, we'll sort our products, which of course at the moment are all our products.

10
00:00:44,530 --> 00:00:48,980
But eventually it will depend on the filters as well.

11
00:00:49,420 --> 00:00:56,620
So let's start by setting up that state value so it's not going to be in a field producer, but in the

12
00:00:56,620 --> 00:01:02,530
filter context, I'm going to start by setting up a value with the name of sort.

13
00:01:02,920 --> 00:01:09,310
Now, if you name it differently, just keep in mind to use the same name and now I would need to go

14
00:01:09,310 --> 00:01:17,040
with some kind of default value and the default value needs to match to one of the options to my case.

15
00:01:17,050 --> 00:01:23,550
The options that I have are price, lowest price, highest naming names.

16
00:01:24,550 --> 00:01:32,380
So just make sure that if you're going with different value, it matches one of the value values in

17
00:01:32,380 --> 00:01:34,300
the option element.

18
00:01:34,570 --> 00:01:36,870
So in my case, I'm going to go with price lowest.

19
00:01:37,150 --> 00:01:41,050
So just set it up as price and then hyphen.

20
00:01:42,010 --> 00:01:44,710
And then lost, so that's going to be my thought.

21
00:01:45,010 --> 00:01:48,530
Now, remember, for controlled input, there were two things.

22
00:01:49,060 --> 00:01:55,870
First of all, there was a state value and the second one was the function that we run every time there's

23
00:01:55,870 --> 00:01:57,640
a change in the input.

24
00:01:57,640 --> 00:01:58,090
Correct.

25
00:01:58,420 --> 00:02:05,590
So in this case, I'm going to name this update and sort and I'm going to be looking for that event

26
00:02:05,590 --> 00:02:06,020
object.

27
00:02:06,190 --> 00:02:09,340
So in this case, it's going to be extremely important.

28
00:02:09,680 --> 00:02:16,450
And for the time being, I would just want to set up two things name which is going to be equal to Event

29
00:02:16,450 --> 00:02:23,020
Target and the name, because remember, once we add this update sort of on our select.

30
00:02:23,810 --> 00:02:30,530
And one target points to the select input, and I can get a few things out of it and Mike, I'm going

31
00:02:30,530 --> 00:02:35,690
to be looking for the name, which is going to be short, and then the second thing is going to be the

32
00:02:35,690 --> 00:02:36,060
value.

33
00:02:36,260 --> 00:02:41,220
So what is the actual value, the option that the user is using?

34
00:02:41,480 --> 00:02:47,960
So that will be equal to cost and then value and then this is going to be equal to event target.

35
00:02:47,960 --> 00:02:50,720
And of course, it is sitting in the value.

36
00:02:51,200 --> 00:02:52,550
Now, we need to parse this down.

37
00:02:52,760 --> 00:02:57,530
So say update sort as well as the sort.

38
00:02:57,530 --> 00:03:04,370
But of course, sort we are already passing in the state and then in sort of course, we would want

39
00:03:04,370 --> 00:03:05,360
to access both of them.

40
00:03:05,780 --> 00:03:07,010
So let's do that.

41
00:03:07,250 --> 00:03:11,400
I'm just going to make sure that I access sort of that sort.

42
00:03:11,810 --> 00:03:12,890
So let's grow up.

43
00:03:13,160 --> 00:03:20,360
We're looking for sort of an update sort every time we're changing the value and then we'll scroll down

44
00:03:20,360 --> 00:03:20,710
again.

45
00:03:21,440 --> 00:03:27,440
And in this case, where we have the select first of all, as far as the value, I'll pass in the sort.

46
00:03:27,890 --> 00:03:32,360
So this is the value that is coming from the state, which in my case, again, is going to be priced

47
00:03:32,360 --> 00:03:32,690
lower.

48
00:03:32,780 --> 00:03:33,220
Correct.

49
00:03:33,470 --> 00:03:41,210
So set it equal to sort and then on change will be equal to my update and then sort.

50
00:03:41,330 --> 00:03:48,080
And for now I just see what is the result so I'm can navigate the bigger screen.

51
00:03:48,470 --> 00:03:51,450
And remember, we are logging some values here.

52
00:03:51,770 --> 00:03:55,430
So once you click check it out, there's going to be two things.

53
00:03:56,330 --> 00:03:58,290
By the way, I don't know why it didn't happen.

54
00:03:58,970 --> 00:04:00,800
Maybe there's some kind of mess up here.

55
00:04:01,370 --> 00:04:02,900
And again, nothing is happening.

56
00:04:03,560 --> 00:04:08,960
That's interesting to update sort of on the select.

57
00:04:09,680 --> 00:04:11,140
I grabbed it over here.

58
00:04:11,150 --> 00:04:12,170
Let me just double check.

59
00:04:12,170 --> 00:04:17,950
Maybe my name was incorrect and of course, I'm not so long and that's why nothing's happening.

60
00:04:18,260 --> 00:04:19,970
So name and value.

61
00:04:19,970 --> 00:04:20,720
My apologies.

62
00:04:20,750 --> 00:04:23,770
I said I'm going to cancel log and of course I forgot about it.

63
00:04:24,080 --> 00:04:27,170
So I have my price, which at the moment is lowest.

64
00:04:27,170 --> 00:04:28,150
But then check it out.

65
00:04:28,460 --> 00:04:34,890
Once you click, you get two values back, you get sort and then you get the price highest.

66
00:04:35,270 --> 00:04:41,450
So this is the value, meaning this is what the user selected and this is the name of the input.

67
00:04:41,840 --> 00:04:44,540
Now, I have to be honest with you in this case.

68
00:04:45,760 --> 00:04:52,780
If we take a look at the sort, it doesn't really matter, so the name here is Sword, but since there's

69
00:04:52,780 --> 00:04:58,790
only one property in my state, so the name here is, of course, short, it doesn't matter.

70
00:04:58,810 --> 00:04:59,530
I know that.

71
00:04:59,770 --> 00:05:01,120
I'm just looking for the value.

72
00:05:01,370 --> 00:05:06,640
Now, the reason why I showed you this one, because later when we work with filters, it is going to

73
00:05:06,640 --> 00:05:10,220
matter because there's going to be multiple properties in this case.

74
00:05:10,240 --> 00:05:15,280
We only have one select and the value in the state is just stored.

75
00:05:15,550 --> 00:05:24,040
But you'll see the filters where it is extremely important that you have the same name as you have in

76
00:05:24,040 --> 00:05:24,540
the state.

77
00:05:24,880 --> 00:05:31,930
In this case, though, honestly, we only care about the value, but I will leave this one and I'll

78
00:05:31,930 --> 00:05:39,010
say just for demonstration or something along those lines for demonstration for them on.

79
00:05:40,180 --> 00:05:47,350
Tradition here, and I'll come this out, so yes, I said that we need to have a name, but this was

80
00:05:47,350 --> 00:05:53,050
just to showcase what is going to be the name, because later with filters, it's going to be extremely

81
00:05:53,050 --> 00:05:53,470
important.

82
00:05:53,470 --> 00:05:56,040
In this case, we only care about the value.

83
00:05:56,410 --> 00:06:00,250
And now, of course, every time I do something with my select.

84
00:06:01,290 --> 00:06:04,020
I would want to update my state, correct?

85
00:06:04,330 --> 00:06:09,890
I would want to change this value resort because at the moment it is hard coded as priceless.

86
00:06:10,140 --> 00:06:13,080
And not to do that, we would need to dispatch an action.

87
00:06:13,410 --> 00:06:13,820
Correct.

88
00:06:14,220 --> 00:06:21,180
So that's why in the filter context will say that there's going to be an action by the name of update

89
00:06:21,330 --> 00:06:21,870
sort.

90
00:06:22,290 --> 00:06:23,880
So we just go with dispatch.

91
00:06:24,220 --> 00:06:26,790
And then, of course, this action is already imported.

92
00:06:26,920 --> 00:06:30,150
I'm not going to do the whole song and dance where we're getting from.

93
00:06:30,300 --> 00:06:32,370
Hopefully it is already clear by now.

94
00:06:32,610 --> 00:06:37,640
So we have variable coming from the actions and the name is update and then short.

95
00:06:37,920 --> 00:06:41,610
Now, as far as the payload, I would want to pass in the value.

96
00:06:42,090 --> 00:06:46,010
So whatever option I have selected, I would want to pass this in.

97
00:06:46,140 --> 00:06:52,740
Now, again, when I say value, we need to understand that each option has the value attribute and

98
00:06:52,740 --> 00:06:58,340
here I have some kind of tax and in order to access it, I'm using event target and then that value.

99
00:06:58,800 --> 00:07:04,370
So whatever string I'm getting back, I would want to pass it in as a payload.

100
00:07:04,650 --> 00:07:06,990
So say payload is equal to the value.

101
00:07:07,380 --> 00:07:13,080
And now of course in my producer, I would want to handle that because at the moment, of course, it

102
00:07:13,080 --> 00:07:13,620
will click.

103
00:07:13,770 --> 00:07:18,600
We should get a big fat error because we're not handling that in our producer.

104
00:07:19,350 --> 00:07:20,130
So let's do that.

105
00:07:20,550 --> 00:07:23,070
We're going to navigate to the producer.

106
00:07:23,760 --> 00:07:28,540
And instead of the producer, of course, we would want to check for that particular action.

107
00:07:28,770 --> 00:07:31,290
I have one for Greenview, one for Lesterville.

108
00:07:31,830 --> 00:07:32,310
Awesome.

109
00:07:32,550 --> 00:07:35,130
And now I'd want one for updates state.

110
00:07:35,400 --> 00:07:41,010
So then we go with action and then type is equal to update.

111
00:07:41,020 --> 00:07:44,670
And so again, we're importing that variable from the actions.

112
00:07:45,210 --> 00:07:52,320
And then of course, I would want to change the state value of the sort of state value depending on

113
00:07:52,350 --> 00:07:56,220
what is the string that is coming back by default is going to be price lowest.

114
00:07:56,460 --> 00:07:59,550
But then as we're clicking on input, of course it will change.

115
00:07:59,820 --> 00:08:05,940
So in here we go return again, we return all the properties untouched in the state, and then we just

116
00:08:05,940 --> 00:08:06,910
change the sort.

117
00:08:06,930 --> 00:08:10,970
And so it will be equal to our action and then payload.

118
00:08:11,220 --> 00:08:16,500
So now of course, I can navigate the big screen because it's going to be easier to see in my components.

119
00:08:16,800 --> 00:08:18,030
I have my filter one.

120
00:08:18,950 --> 00:08:25,320
And I have my producer and notice here, by default, this is price lowest and then, of course, as

121
00:08:25,400 --> 00:08:32,330
I'm clicking n now, this is going to be priced higher than we'll have A to Z and Z to.