1
00:00:01,140 --> 00:00:04,680
‫So, let's start using our cart state

2
00:00:04,680 --> 00:00:07,713
‫by adding new pizzas to the cart.

3
00:00:09,090 --> 00:00:13,470
‫So, where exactly are we going to do that in our code?

4
00:00:13,470 --> 00:00:15,930
‫Well, here in the user interface,

5
00:00:15,930 --> 00:00:19,980
‫the user is able to add new pizzas to the cart

6
00:00:19,980 --> 00:00:23,280
‫simply by clicking here on these buttons.

7
00:00:23,280 --> 00:00:28,140
‫And so, all we have to do is to come to the menu items

8
00:00:28,140 --> 00:00:31,830
‫and then implement that functionality right there.

9
00:00:31,830 --> 00:00:33,510
‫So, here is where the cart

10
00:00:33,510 --> 00:00:36,720
‫and the menu features intersect a little bit.

11
00:00:36,720 --> 00:00:40,380
‫And so, we now need to implement some cart functionality

12
00:00:40,380 --> 00:00:42,570
‫here, in the item.

13
00:00:42,570 --> 00:00:45,630
‫But of course, things are never so linear

14
00:00:45,630 --> 00:00:47,880
‫in any real-world application.

15
00:00:47,880 --> 00:00:51,120
‫So carts cannot be completely separated

16
00:00:51,120 --> 00:00:52,980
‫from the menu feature.

17
00:00:52,980 --> 00:00:56,130
‫And so, yeah, sometimes we need to implement

18
00:00:56,130 --> 00:00:59,280
‫some parts of a feature inside another feature,

19
00:00:59,280 --> 00:01:03,153
‫because again, of course, these will intersect.

20
00:01:04,440 --> 00:01:05,940
‫Let's make this a bit smaller.

21
00:01:07,114 --> 00:01:08,610
‫This doesn't need to be so big.

22
00:01:08,610 --> 00:01:10,200
‫And I want to actually start

23
00:01:10,200 --> 00:01:13,110
‫by only rendering this button here

24
00:01:13,110 --> 00:01:16,650
‫in case that the pizza is not sold out.

25
00:01:16,650 --> 00:01:19,113
‫So if not sold out,

26
00:01:20,040 --> 00:01:21,750
‫then render this button.

27
00:01:21,750 --> 00:01:23,823
‫So here, we do not need that.

28
00:01:24,690 --> 00:01:27,690
‫Now here, we actually want to pass

29
00:01:27,690 --> 00:01:30,393
‫in now an on-click handler.

30
00:01:32,070 --> 00:01:35,280
‫So in regular buttons, so in HTML buttons

31
00:01:35,280 --> 00:01:39,363
‫we are able to pass in some function here into a button.

32
00:01:40,260 --> 00:01:42,750
‫Now our own button right now doesn't have

33
00:01:42,750 --> 00:01:47,750
‫that functionality yet, but let's do that in a second.

34
00:01:47,790 --> 00:01:50,790
‫Let's just immediately create that function here.

35
00:01:50,790 --> 00:01:54,303
‫So handle it to cart.

36
00:01:57,180 --> 00:02:00,570
‫And so here is where we create that event handler

37
00:02:00,570 --> 00:02:01,403
‫function

38
00:02:03,930 --> 00:02:05,340
‫just like this.

39
00:02:05,340 --> 00:02:09,900
‫But as I was saying, we now need to enable our own custom

40
00:02:09,900 --> 00:02:13,293
‫button to actually receive this on-click prop.

41
00:02:14,460 --> 00:02:18,236
‫So let's open that up and accept that here as yet,

42
00:02:18,236 --> 00:02:19,533
‫another prop.

43
00:02:20,430 --> 00:02:21,490
‫So, on click

44
00:02:23,220 --> 00:02:26,100
‫and now here what I'm gonna do is to

45
00:02:26,100 --> 00:02:27,393
‫do something similar.

46
00:02:28,821 --> 00:02:33,040
‫So, we'll copy this and say if there is on click

47
00:02:34,200 --> 00:02:38,973
‫then, return this button with the on-click handler.

48
00:02:43,710 --> 00:02:44,790
‫All right?

49
00:02:44,790 --> 00:02:48,900
‫And only if there is no two and no on-click prop

50
00:02:48,900 --> 00:02:51,150
‫then just return this regular button.

51
00:02:51,150 --> 00:02:53,763
‫So, this one without the on click.

52
00:02:54,990 --> 00:02:55,960
‫So, we have a bit

53
00:02:57,460 --> 00:02:58,293
‫of duplicate code right here,

54
00:02:58,293 --> 00:02:59,973
‫but this is really not a problem.

55
00:03:01,680 --> 00:03:02,520
‫Now right?

56
00:03:02,520 --> 00:03:05,253
‫And so, let's just check here.

57
00:03:06,540 --> 00:03:11,540
‫So, let's just console log the pizza ID here to the console.

58
00:03:11,565 --> 00:03:14,425
‫So, when we click here, we get one.

59
00:03:14,425 --> 00:03:16,425
‫When we click here, we get three.

60
00:03:16,425 --> 00:03:20,370
‫So basically, these pizzas here are in order.

61
00:03:20,370 --> 00:03:23,943
‫So, this one is number 10 and so on and so forth.

62
00:03:25,200 --> 00:03:27,420
‫And so now what we need to do is to

63
00:03:27,420 --> 00:03:29,760
‫create a new pizza object.

64
00:03:29,760 --> 00:03:33,933
‫So, a new item that has this exact shape, right here.

65
00:03:34,800 --> 00:03:36,423
‫So, actually let's copy this.

66
00:03:39,090 --> 00:03:40,593
‫Let's delete this.

67
00:03:41,940 --> 00:03:45,243
‫Let's call this a new item.

68
00:03:47,250 --> 00:03:51,900
‫And here of course, we will not hard code this value.

69
00:03:51,900 --> 00:03:54,453
‫So this is again, the current ID.

70
00:03:56,730 --> 00:04:00,780
‫Then here, the name is the name of the pizza.

71
00:04:00,780 --> 00:04:04,630
‫The quantity will initially be one, the unit price

72
00:04:05,486 --> 00:04:08,280
‫will be the unit price, and the total price will be

73
00:04:08,280 --> 00:04:11,190
‫the unit price times one.

74
00:04:11,190 --> 00:04:14,130
‫So, this one is of course not necessary, it's just

75
00:04:14,130 --> 00:04:18,663
‫to indicate that it is computed using these two values.

76
00:04:19,620 --> 00:04:24,243
‫And now, all we need to do is to again dispatch an action.

77
00:04:28,033 --> 00:04:32,130
‫So, we already know how that works at this point.

78
00:04:32,130 --> 00:04:37,130
‫So, we use the use dispatch hook provided by React Redux,

79
00:04:37,710 --> 00:04:41,190
‫and now we can dispatch actions from here.

80
00:04:41,190 --> 00:04:44,850
‫And this action object will be created by calling the

81
00:04:44,850 --> 00:04:47,700
‫at item action creator.

82
00:04:47,700 --> 00:04:52,700
‫So, this one that we export right here.

83
00:04:54,030 --> 00:04:55,230
‫Now, right?

84
00:04:55,230 --> 00:04:58,893
‫So, for at item then the payload needs to be the new item,

85
00:04:59,991 --> 00:05:02,160
‫which is exactly what we're going to pass in here.

86
00:05:02,160 --> 00:05:04,290
‫So, that one right there.

87
00:05:04,290 --> 00:05:09,290
‫So add item, make sure to import that interior pass

88
00:05:11,444 --> 00:05:13,050
‫in the new item.

89
00:05:13,050 --> 00:05:17,100
‫Alright, and this should already be working.

90
00:05:17,100 --> 00:05:21,480
‫So let's reload here and add this pizza.

91
00:05:21,480 --> 00:05:24,850
‫And we didn't get any errors, so that's already

92
00:05:25,718 --> 00:05:26,551
‫a great sign.

93
00:05:26,551 --> 00:05:30,030
‫But of course, also nothing happened in the UI, which is

94
00:05:30,030 --> 00:05:33,990
‫because nothing is really using this state yet.

95
00:05:33,990 --> 00:05:38,280
‫However, luckily for us we have the Redux dev tools.

96
00:05:38,280 --> 00:05:39,510
‫remember them?

97
00:05:39,510 --> 00:05:43,440
‫So we installed them way back in the Redux section.

98
00:05:43,440 --> 00:05:45,873
‫And so, let's get them back here.

99
00:05:47,250 --> 00:05:50,490
‫So we see that here the at item action was indeed

100
00:05:50,490 --> 00:05:51,570
‫dispatched.

101
00:05:51,570 --> 00:05:55,722
‫And so let's see what our state looks like right

102
00:05:55,722 --> 00:05:56,850
‫now.

103
00:05:56,850 --> 00:05:59,823
‫So we have our user, which is of course, still empty,

104
00:06:01,109 --> 00:06:02,423
‫and then here we have the cart state.

105
00:06:03,891 --> 00:06:05,063
‫And then in there we have the cart array.

106
00:06:06,777 --> 00:06:08,640
‫And so then, this is where we have these two items

107
00:06:10,524 --> 00:06:12,276
‫and we have two of them

108
00:06:12,276 --> 00:06:13,673
‫because this one is our initial state.

109
00:06:15,153 --> 00:06:16,133
‫And then, we just added this one.

110
00:06:17,391 --> 00:06:20,304
‫So we clicked here, which is pizza Romana,

111
00:06:20,304 --> 00:06:24,310
‫as it says here with a pizza ID of three, one

112
00:06:25,950 --> 00:06:29,040
‫and the price is 15,

113
00:06:29,040 --> 00:06:30,813
‫exactly as it says here.

114
00:06:32,250 --> 00:06:35,193
‫Beautiful. So this worked great.

115
00:06:36,338 --> 00:06:37,897
‫So let's try that again.

116
00:06:37,897 --> 00:06:39,870
‫Let's add this one as well.

117
00:06:39,870 --> 00:06:40,770
‫And there it is.

118
00:06:40,770 --> 00:06:43,860
‫And so now, if we come back here,

119
00:06:43,860 --> 00:06:45,843
‫indeed we have another one.

120
00:06:47,250 --> 00:06:48,720
‫So, this is working.

121
00:06:48,720 --> 00:06:52,050
‫And so next up, let's then use this new data,

122
00:06:52,050 --> 00:06:53,430
‫so all the pizzas

123
00:06:53,430 --> 00:06:57,540
‫in our cart to update this card overview down here.

124
00:06:57,540 --> 00:07:00,630
‫So, this is just fake dummy data for now

125
00:07:00,630 --> 00:07:03,873
‫but in the next video we will make this real data.