1 00:00:01,170 --> 00:00:02,220 ‫Alright. 2 00:00:02,220 --> 00:00:05,550 ‫So to finish this part where we are working 3 00:00:05,550 --> 00:00:09,963 ‫with the cart state, let's update the pizza quantities. 4 00:00:11,370 --> 00:00:13,590 ‫And this is going to be very similar 5 00:00:13,590 --> 00:00:17,940 ‫to what we did before with deleting pizzas from the cart. 6 00:00:17,940 --> 00:00:20,940 ‫So we will want to be able to increase 7 00:00:20,940 --> 00:00:23,580 ‫and to decrease the amount of pizzas 8 00:00:23,580 --> 00:00:27,750 ‫both in each of these menu items here, 9 00:00:27,750 --> 00:00:31,590 ‫and also right here in the cart items. 10 00:00:31,590 --> 00:00:34,110 ‫And so just like with delete item, 11 00:00:34,110 --> 00:00:38,400 ‫we will now create a reusable component for that. 12 00:00:38,400 --> 00:00:39,760 ‫So let's call this one 13 00:00:40,970 --> 00:00:45,970 ‫UpdateItemQuantity.JSX. 14 00:00:47,430 --> 00:00:51,840 ‫Our nice snippet here, and here, just like before. 15 00:00:51,840 --> 00:00:56,043 ‫We will also need to receive the current pizza ID. 16 00:00:56,940 --> 00:00:59,670 ‫Now here we will then have two buttons. 17 00:00:59,670 --> 00:01:02,883 ‫So one for decreasing and one for increasing. 18 00:01:04,740 --> 00:01:07,023 ‫So let's bring in our button here, 19 00:01:08,424 --> 00:01:10,440 ‫and the type will be a new one. 20 00:01:10,440 --> 00:01:12,633 ‫So we will create a round button. 21 00:01:14,100 --> 00:01:17,460 ‫And then for now let's not specify the onClick, 22 00:01:17,460 --> 00:01:19,770 ‫let's leave that for later. 23 00:01:19,770 --> 00:01:21,750 ‫So here we have the minus 24 00:01:21,750 --> 00:01:25,053 ‫and then another one for the plus. 25 00:01:27,330 --> 00:01:30,933 ‫And then let's immediately include that right here. 26 00:01:32,010 --> 00:01:34,293 ‫So before the delete item. 27 00:01:35,730 --> 00:01:38,370 ‫So update item quantity 28 00:01:38,370 --> 00:01:42,153 ‫with the pizza ID of pizza ID. 29 00:01:44,160 --> 00:01:46,440 ‫Just like this. 30 00:01:46,440 --> 00:01:48,720 ‫And there are our buttons. 31 00:01:48,720 --> 00:01:50,650 ‫Now we just need to 32 00:01:53,340 --> 00:01:55,623 ‫now create this new round type. 33 00:01:56,820 --> 00:01:58,773 ‫And so let's do that right here. 34 00:02:01,350 --> 00:02:05,310 ‫So adding a new entry into our styles object. 35 00:02:05,310 --> 00:02:08,580 ‫And this one will actually be pretty similar 36 00:02:08,580 --> 00:02:10,323 ‫to the small one. 37 00:02:12,660 --> 00:02:16,950 ‫Here let's just decrease these headings here a little bit. 38 00:02:16,950 --> 00:02:21,180 ‫So let's say 2.5 and one. 39 00:02:21,180 --> 00:02:22,750 ‫And then here, let's say 40 00:02:23,790 --> 00:02:28,790 ‫3.5 and two. 41 00:02:29,040 --> 00:02:32,463 ‫Let's make the text a bit bigger with text small. 42 00:02:33,300 --> 00:02:35,400 ‫And there we go. 43 00:02:35,400 --> 00:02:39,840 ‫Nice, now we just need some space between them. 44 00:02:39,840 --> 00:02:42,930 ‫And so let's add that right here. 45 00:02:42,930 --> 00:02:47,930 ‫So let's make this a flex container with a gap of one. 46 00:02:48,300 --> 00:02:51,360 ‫And since later we will add another item here, 47 00:02:51,360 --> 00:02:54,240 ‫or another child element, 48 00:02:54,240 --> 00:02:58,173 ‫let's also align items to the center. 49 00:02:59,190 --> 00:03:01,050 ‫So just like this. 50 00:03:01,050 --> 00:03:05,400 ‫And then as we have, or as we reach a bigger break point, 51 00:03:05,400 --> 00:03:07,743 ‫let's make the gap a bit bigger. 52 00:03:08,820 --> 00:03:10,140 ‫Beautiful. 53 00:03:10,140 --> 00:03:12,330 ‫So this is looking really cool. 54 00:03:12,330 --> 00:03:16,620 ‫And so let's now then add 55 00:03:16,620 --> 00:03:18,900 ‫our onClick event handlers. 56 00:03:18,900 --> 00:03:20,550 ‫And so just like before, 57 00:03:20,550 --> 00:03:24,153 ‫this is where we will now dispatch our actions. 58 00:03:26,730 --> 00:03:28,983 ‫So dispatch, 59 00:03:30,570 --> 00:03:35,103 ‫for which just like before, we need to get that function. 60 00:03:41,790 --> 00:03:46,710 ‫And then remember that right here 61 00:03:46,710 --> 00:03:51,120 ‫we have increased item quantity and decreased item quantity. 62 00:03:51,120 --> 00:03:55,110 ‫And both of them, as the payload, need the pizza ID. 63 00:03:55,110 --> 00:03:58,770 ‫So that's why we pass the pizza ID here 64 00:03:58,770 --> 00:04:00,333 ‫right into this component. 65 00:04:01,920 --> 00:04:05,480 ‫So here we dispatch decreaseItemQuantity 66 00:04:07,140 --> 00:04:08,883 ‫with the pizza ID. 67 00:04:10,721 --> 00:04:13,420 ‫And then here let's just grab this 68 00:04:14,520 --> 00:04:19,150 ‫and increase 69 00:04:20,340 --> 00:04:22,230 ‫just like this. 70 00:04:22,230 --> 00:04:25,770 ‫And so this should already be working. 71 00:04:25,770 --> 00:04:27,063 ‫So let's test this. 72 00:04:27,900 --> 00:04:29,730 ‫And, beautiful. 73 00:04:29,730 --> 00:04:33,420 ‫So notice how here the value went up, here as well, 74 00:04:33,420 --> 00:04:36,120 ‫and also the price increased. 75 00:04:36,120 --> 00:04:39,420 ‫And as we keep clicking here, then we keep going up. 76 00:04:39,420 --> 00:04:42,633 ‫So we have nine plus one now, which is exactly 10. 77 00:04:43,770 --> 00:04:46,740 ‫Now watch what happens when we do minus here 78 00:04:46,740 --> 00:04:48,933 ‫when we are already at one. 79 00:04:49,830 --> 00:04:54,830 ‫So (laughs) we basically go down to zero and to minus one, 80 00:04:54,840 --> 00:04:57,300 ‫and our cart then keeps getting cheaper 81 00:04:57,300 --> 00:05:00,630 ‫and we keep getting less and less pizzas. 82 00:05:00,630 --> 00:05:03,870 ‫So this, of course, should not be allowed. 83 00:05:03,870 --> 00:05:08,163 ‫And so let's actually prevent that right in our reducer. 84 00:05:10,230 --> 00:05:14,760 ‫So here what we can do, and remember that at this point 85 00:05:14,760 --> 00:05:18,210 ‫the item quantity has already been updated. 86 00:05:18,210 --> 00:05:21,180 ‫And so what we can do is to check 87 00:05:21,180 --> 00:05:26,180 ‫if the item.quantity is equal to zero, 88 00:05:26,700 --> 00:05:30,840 ‫then we want to completely delete the item from the cart. 89 00:05:30,840 --> 00:05:34,530 ‫So that's, again, a very common thing to see 90 00:05:34,530 --> 00:05:38,160 ‫in web applications like some online shopping. 91 00:05:38,160 --> 00:05:41,040 ‫So essentially when we decrease the quantity 92 00:05:41,040 --> 00:05:45,420 ‫from one to zero, then that element is taken out. 93 00:05:45,420 --> 00:05:48,480 ‫So basically here we want to then delete that item. 94 00:05:48,480 --> 00:05:53,160 ‫And so we could write exactly this logic right here. 95 00:05:53,160 --> 00:05:57,690 ‫However, we don't have to because we can reuse this logic 96 00:05:57,690 --> 00:06:02,310 ‫by using a really nice trick that I'm about to show you. 97 00:06:02,310 --> 00:06:04,088 ‫So we can do 98 00:06:04,088 --> 00:06:08,643 ‫cartSlice.casereducers, 99 00:06:10,650 --> 00:06:14,280 ‫reducers, and then we can basically manually 100 00:06:14,280 --> 00:06:16,383 ‫call one of these reducers. 101 00:06:17,580 --> 00:06:20,847 ‫So then let's call deleteItem 102 00:06:21,960 --> 00:06:26,793 ‫with the same state and action that we just received here. 103 00:06:29,100 --> 00:06:31,503 ‫Alright, so let's test this. 104 00:06:33,300 --> 00:06:35,790 ‫Let's add this one to the cart. 105 00:06:35,790 --> 00:06:38,250 ‫Now here we get, again, some problem. 106 00:06:38,250 --> 00:06:40,173 ‫But let's take care of that later. 107 00:06:41,640 --> 00:06:43,530 ‫So updating here still works, 108 00:06:43,530 --> 00:06:44,580 ‫so increasing. 109 00:06:44,580 --> 00:06:47,760 ‫And then watch what happens as we click here now. 110 00:06:47,760 --> 00:06:52,760 ‫So one less time as it is one right now, and nice. 111 00:06:53,910 --> 00:06:57,663 ‫So with that or pizza got deleted just like it should. 112 00:06:59,790 --> 00:07:02,640 ‫Now let's just see here about this error. 113 00:07:02,640 --> 00:07:07,200 ‫So let's add two different ones and then, 114 00:07:07,200 --> 00:07:11,040 ‫well, React, somehow, is not complaining anymore. 115 00:07:11,040 --> 00:07:15,393 ‫So not sure why that is, but better for us. 116 00:07:17,820 --> 00:07:20,610 ‫And now just to finish this component 117 00:07:20,610 --> 00:07:24,060 ‫let's actually also display here the current number 118 00:07:24,060 --> 00:07:26,820 ‫of pizzas between these two buttons. 119 00:07:26,820 --> 00:07:29,820 ‫So, again, something I'm sure you have seen. 120 00:07:29,820 --> 00:07:32,220 ‫So for that here we also need access 121 00:07:32,220 --> 00:07:33,933 ‫to the current quantity. 122 00:07:35,100 --> 00:07:38,613 ‫So let's call that actually currentQuantity. 123 00:07:39,570 --> 00:07:44,403 ‫And then, yeah, right here we need to pass that in. 124 00:07:45,540 --> 00:07:48,510 ‫So, how do we get access to that? 125 00:07:48,510 --> 00:07:53,027 ‫Well, we already wrote our selector for that earlier, right? 126 00:07:54,180 --> 00:07:56,040 ‫Right here in the menu item. 127 00:07:56,040 --> 00:08:00,060 ‫So we want exactly this here right now. 128 00:08:00,060 --> 00:08:02,973 ‫So I'm just grabbing it and pasting that here. 129 00:08:04,620 --> 00:08:08,280 ‫And then React will not like this, 130 00:08:08,280 --> 00:08:11,940 ‫so let's import this one 131 00:08:11,940 --> 00:08:14,523 ‫and also this function right here. 132 00:08:15,780 --> 00:08:19,503 ‫And here it is called pizza ID. 133 00:08:20,430 --> 00:08:22,440 ‫And so here we have the current quantity, 134 00:08:22,440 --> 00:08:25,863 ‫which we can now pass here into this component. 135 00:08:26,790 --> 00:08:31,790 ‫So current quantity is equal to current quantity, 136 00:08:31,830 --> 00:08:34,503 ‫which we can then display here in the middle. 137 00:08:35,490 --> 00:08:38,883 ‫So let's create some span element here. 138 00:08:40,290 --> 00:08:44,823 ‫Not with that, but with the current quantity. 139 00:08:45,720 --> 00:08:47,820 ‫Let's just style this a little bit. 140 00:08:47,820 --> 00:08:50,070 ‫Let's make the text smaller. 141 00:08:50,070 --> 00:08:55,070 ‫So text small, and also give it some more boldness. 142 00:08:55,470 --> 00:08:58,857 ‫So let's say font medium here, 143 00:08:58,857 --> 00:09:02,043 ‫and then maybe also increasing the gap. 144 00:09:03,780 --> 00:09:06,090 ‫Okay, nice. 145 00:09:06,090 --> 00:09:09,120 ‫However, for some reason, here we get zero. 146 00:09:09,120 --> 00:09:11,403 ‫So this is not really working. 147 00:09:13,740 --> 00:09:16,600 ‫So let's maybe try to lock this to the console here 148 00:09:19,257 --> 00:09:20,457 ‫to the current quantity. 149 00:09:23,580 --> 00:09:27,210 ‫And yeah, it always stays at zero somehow. 150 00:09:27,210 --> 00:09:29,940 ‫Ah, but I don't know why. 151 00:09:29,940 --> 00:09:32,760 ‫But here we are passing in an ID, 152 00:09:32,760 --> 00:09:35,793 ‫so that's not supposed, and now that works. 153 00:09:36,840 --> 00:09:39,360 ‫Great, so in this case 154 00:09:39,360 --> 00:09:42,540 ‫we might think that this value is not really necessary 155 00:09:42,540 --> 00:09:45,240 ‫because we already have it up here. 156 00:09:45,240 --> 00:09:47,670 ‫But just like the delete button, 157 00:09:47,670 --> 00:09:50,130 ‫we now actually want to reuse this 158 00:09:50,130 --> 00:09:53,730 ‫in the menu right here. 159 00:09:53,730 --> 00:09:54,720 ‫And so here, of course, 160 00:09:54,720 --> 00:09:59,040 ‫we will not know how many pizzas are already in the menu. 161 00:09:59,040 --> 00:10:02,820 ‫And so, not in the menu but in the cart. 162 00:10:02,820 --> 00:10:07,820 ‫And so let's also, of course, include that right here. 163 00:10:07,980 --> 00:10:12,810 ‫So along the DeleteItem button. 164 00:10:12,810 --> 00:10:16,653 ‫So let's wrap this here in some div. 165 00:10:18,120 --> 00:10:20,493 ‫We then need to close here in the end. 166 00:10:25,260 --> 00:10:28,377 ‫And then let's do UpdateItemQuantity. 167 00:10:31,890 --> 00:10:36,453 ‫So let's, again, then import that manually. 168 00:10:38,310 --> 00:10:39,410 ‫So UpdateItemQuantity. 169 00:10:44,430 --> 00:10:47,070 ‫And there we can already see something. 170 00:10:47,070 --> 00:10:49,473 ‫All we have to do is to pass in the prompts. 171 00:10:50,610 --> 00:10:55,140 ‫So the pizza ID should be pizza ID. 172 00:10:55,140 --> 00:10:57,681 ‫And then the currentQuantity, 173 00:10:57,681 --> 00:10:59,973 ‫in this case we already have it. 174 00:11:03,570 --> 00:11:05,400 ‫Here it's called ID, 175 00:11:05,400 --> 00:11:06,960 ‫but there we go. 176 00:11:06,960 --> 00:11:09,933 ‫Now we just need some styling here as well. 177 00:11:11,190 --> 00:11:12,023 ‫So let's make this 178 00:11:12,023 --> 00:11:14,693 ‫a flex container items. 179 00:11:17,640 --> 00:11:22,050 ‫Center it here, and then some gap. 180 00:11:22,050 --> 00:11:23,490 ‫So gap of three. 181 00:11:23,490 --> 00:11:26,700 ‫And then in the small view port 182 00:11:26,700 --> 00:11:30,510 ‫let's immediately increase this by a lot. 183 00:11:30,510 --> 00:11:32,823 ‫So let's say gap eight. 184 00:11:35,310 --> 00:11:37,023 ‫Alright, nice. 185 00:11:38,310 --> 00:11:40,230 ‫So let's delete this here, 186 00:11:40,230 --> 00:11:42,933 ‫and this one as well, and start from scratch. 187 00:11:44,730 --> 00:11:48,000 ‫Let's just reload to get rid of those errors, 188 00:11:48,000 --> 00:11:50,790 ‫and then let's add this one. 189 00:11:50,790 --> 00:11:52,590 ‫Ah, beautiful. 190 00:11:52,590 --> 00:11:55,980 ‫So now we have exactly one item in our cart, and we can, 191 00:11:55,980 --> 00:12:00,980 ‫of course, delete it like this, or we can keep adding more. 192 00:12:01,110 --> 00:12:02,817 ‫So then they appear down here. 193 00:12:02,817 --> 00:12:06,330 ‫And just like before, as soon as we reach zero 194 00:12:06,330 --> 00:12:09,720 ‫then the item is completely deleted from the cart, 195 00:12:09,720 --> 00:12:12,570 ‫we no longer have in the overview here, 196 00:12:12,570 --> 00:12:15,663 ‫and we get back the button of adding to cart. 197 00:12:16,560 --> 00:12:19,110 ‫Now, alright, and so there you have it. 198 00:12:19,110 --> 00:12:21,540 ‫This is basically how we can implement 199 00:12:21,540 --> 00:12:25,020 ‫a very simple shopping cart using Redux. 200 00:12:25,020 --> 00:12:28,140 ‫So this feels really real world right now 201 00:12:28,140 --> 00:12:32,130 ‫because in many of the shopping apps that you have used 202 00:12:32,130 --> 00:12:35,250 ‫they will probably work exactly like this. 203 00:12:35,250 --> 00:12:38,790 ‫So I hope that you really liked doing this part. 204 00:12:38,790 --> 00:12:42,780 ‫But, of course, we are still not done here 205 00:12:42,780 --> 00:12:47,190 ‫because now we actually need to use exactly this data 206 00:12:47,190 --> 00:12:49,140 ‫to then submit an order. 207 00:12:49,140 --> 00:12:50,613 ‫So here in the next page. 208 00:12:51,540 --> 00:12:53,640 ‫Here, again, we have some problem. 209 00:12:53,640 --> 00:12:57,063 ‫So let's again go to cart here. 210 00:12:58,590 --> 00:13:03,590 ‫And so maybe here it is not ID, but pizza ID. 211 00:13:05,670 --> 00:13:09,000 ‫Alright, so let's go back here 212 00:13:09,000 --> 00:13:11,100 ‫and then open the cart again. 213 00:13:11,100 --> 00:13:14,580 ‫And so maybe (laughs) now it is fixed. 214 00:13:14,580 --> 00:13:16,680 ‫But in any case, as I was saying, 215 00:13:16,680 --> 00:13:18,480 ‫now as we order the pizzas 216 00:13:18,480 --> 00:13:21,690 ‫we actually want to use exactly the pizzas 217 00:13:21,690 --> 00:13:24,570 ‫that are in the cart to submit the order. 218 00:13:24,570 --> 00:13:26,400 ‫And that shouldn't be too hard. 219 00:13:26,400 --> 00:13:29,793 ‫And so let's quickly do that right in the next video.