1 00:00:01,170 --> 00:00:05,553 ‫Next in line is deleting pizzas from the cart. 2 00:00:06,810 --> 00:00:09,450 ‫And doing so is really easy 3 00:00:09,450 --> 00:00:13,350 ‫because the most difficult part is already done, 4 00:00:13,350 --> 00:00:16,800 ‫which is actually our reducer here. 5 00:00:16,800 --> 00:00:20,610 ‫So all we have to do is to now dispatch an action 6 00:00:20,610 --> 00:00:25,470 ‫that is created by the delete item action creator 7 00:00:25,470 --> 00:00:28,443 ‫each time that we click here, on this delete button. 8 00:00:29,730 --> 00:00:31,830 ‫So, let's go do that. 9 00:00:31,830 --> 00:00:36,090 ‫But before we blindly just attach an event handler 10 00:00:36,090 --> 00:00:39,300 ‫to this button, let's think about this. 11 00:00:39,300 --> 00:00:44,220 ‫So, we want to delete the pizza from the card right here 12 00:00:44,220 --> 00:00:48,630 ‫but the same thing might also be true in the menu. 13 00:00:48,630 --> 00:00:51,210 ‫So, if we go back to the menu, 14 00:00:51,210 --> 00:00:55,350 ‫then we might also want to delete a pizza right here. 15 00:00:55,350 --> 00:00:57,540 ‫So for example, let's say we added 16 00:00:57,540 --> 00:01:00,060 ‫one of these pizzas here by mistake. 17 00:01:00,060 --> 00:01:04,650 ‫And so if we then give the user a delete button immediately 18 00:01:04,650 --> 00:01:07,353 ‫that will then allow them to fix that error. 19 00:01:08,220 --> 00:01:10,860 ‫So, in other words, we want that delete button 20 00:01:10,860 --> 00:01:15,843 ‫not only in the cart, but also here in the menu item. 21 00:01:17,160 --> 00:01:18,540 ‫So, what this means 22 00:01:18,540 --> 00:01:22,053 ‫is that we should create a reusable component here. 23 00:01:23,010 --> 00:01:24,393 ‫So, let's do that. 24 00:01:25,230 --> 00:01:30,230 ‫So, new file here and then delete item.JSX. 25 00:01:34,170 --> 00:01:37,410 ‫And then basically we can take that delete button 26 00:01:37,410 --> 00:01:41,940 ‫that we already have here and place that right there, 27 00:01:41,940 --> 00:01:45,750 ‫in that component that we are building right now. 28 00:01:45,750 --> 00:01:50,750 ‫So, let's grab this and return that from here, 29 00:01:52,410 --> 00:01:56,523 ‫and of course we need to import that button here, 30 00:01:58,200 --> 00:02:03,030 ‫and yeah, let's actually just go back to the cart, 31 00:02:03,030 --> 00:02:05,913 ‫and so then we need to add that button back. 32 00:02:06,810 --> 00:02:09,963 ‫So, add it here to the cart item. 33 00:02:11,010 --> 00:02:13,710 ‫So that was right here, I believe. 34 00:02:13,710 --> 00:02:18,350 ‫And so delete item right here. 35 00:02:19,980 --> 00:02:23,490 ‫So, visually we have the same thing as before 36 00:02:23,490 --> 00:02:27,150 ‫but now we can also add this same button here 37 00:02:27,150 --> 00:02:29,610 ‫to each menu item. 38 00:02:29,610 --> 00:02:32,520 ‫But actually let's do that a bit later. 39 00:02:32,520 --> 00:02:35,730 ‫So, let's first actually worry here 40 00:02:35,730 --> 00:02:38,823 ‫about this delete item button itself. 41 00:02:40,350 --> 00:02:45,330 ‫So, here we will want to add the onClick prop 42 00:02:45,330 --> 00:02:46,950 ‫because here is where we want 43 00:02:46,950 --> 00:02:49,923 ‫to dispatch that delete action. 44 00:02:52,050 --> 00:02:55,030 ‫So, dispatch, which we need to get 45 00:02:56,430 --> 00:02:59,793 ‫as always from useDispatch. 46 00:03:01,500 --> 00:03:04,170 ‫And then we need our action creator, 47 00:03:04,170 --> 00:03:09,170 ‫which is deleteItem, just like this. 48 00:03:11,670 --> 00:03:15,210 ‫Here we have a duplicate const apparently, 49 00:03:15,210 --> 00:03:18,273 ‫and now let's think about this delete item. 50 00:03:19,919 --> 00:03:22,350 ‫So, remember that right here, 51 00:03:22,350 --> 00:03:26,250 ‫the payload in this reducer needs to be the pizza ID 52 00:03:26,250 --> 00:03:29,220 ‫because this pizza ID is necessary 53 00:03:29,220 --> 00:03:32,310 ‫to actually delete the item from the cart. 54 00:03:32,310 --> 00:03:36,090 ‫And so we need to pass that right here 55 00:03:36,090 --> 00:03:39,000 ‫into this delete item function call. 56 00:03:39,000 --> 00:03:42,390 ‫However, here we don't really have that data 57 00:03:42,390 --> 00:03:45,273 ‫and so we need to pass it in as a prop. 58 00:03:46,560 --> 00:03:50,260 ‫So, pizza ID here, and then we use that 59 00:03:51,270 --> 00:03:53,820 ‫and then back in the cart, 60 00:03:53,820 --> 00:03:57,120 ‫which I already closed for some reason. 61 00:03:57,120 --> 00:04:02,120 ‫So back here when we, yeah, or actually it is not even here, 62 00:04:02,850 --> 00:04:05,040 ‫it's in the cart item. 63 00:04:05,040 --> 00:04:07,470 ‫So here is where we include delete item. 64 00:04:07,470 --> 00:04:10,080 ‫And so here is where we now need to pass in 65 00:04:10,080 --> 00:04:12,840 ‫that pizza ID prop. 66 00:04:12,840 --> 00:04:17,473 ‫And so that is exactly called pizza ID. 67 00:04:18,930 --> 00:04:21,930 ‫All right, so the way the data flows here 68 00:04:21,930 --> 00:04:25,410 ‫through this application might be a little bit confusing. 69 00:04:25,410 --> 00:04:27,990 ‫So, if you have any doubts about this, 70 00:04:27,990 --> 00:04:31,140 ‫just make sure to pause the video at any point 71 00:04:31,140 --> 00:04:33,390 ‫and really analyze the data flow. 72 00:04:33,390 --> 00:04:35,460 ‫You can as always also use here, 73 00:04:35,460 --> 00:04:37,740 ‫the component tree for that. 74 00:04:37,740 --> 00:04:41,220 ‫But basically what happens is that in the cart, 75 00:04:41,220 --> 00:04:43,650 ‫we have a list of cart items 76 00:04:43,650 --> 00:04:47,640 ‫and each of the cart items receives indeed the item. 77 00:04:47,640 --> 00:04:50,640 ‫And so that includes the pizza ID, the name, 78 00:04:50,640 --> 00:04:52,980 ‫the quantity, and the total price, 79 00:04:52,980 --> 00:04:55,407 ‫which is all the things that we see here. 80 00:04:55,407 --> 00:04:58,380 ‫And so then we take that pizza ID 81 00:04:58,380 --> 00:05:01,830 ‫and pass it here into the delete item component 82 00:05:01,830 --> 00:05:04,500 ‫so that this component can then use it 83 00:05:04,500 --> 00:05:07,053 ‫to effectively delete that item. 84 00:05:09,000 --> 00:05:12,450 ‫So, let's add a few more here 85 00:05:12,450 --> 00:05:16,443 ‫just so we actually see this happening, 86 00:05:17,490 --> 00:05:21,240 ‫and so let's see what happens when we click. 87 00:05:21,240 --> 00:05:22,530 ‫Beautiful. 88 00:05:22,530 --> 00:05:25,650 ‫So, we had three pizzas, now we only have one, 89 00:05:25,650 --> 00:05:26,790 ‫and the reason for that 90 00:05:26,790 --> 00:05:29,670 ‫is that we had two times Pizza Romana, 91 00:05:29,670 --> 00:05:31,950 ‫which we are not supposed to have. 92 00:05:31,950 --> 00:05:35,040 ‫But again, we will fix that a little bit later, 93 00:05:35,040 --> 00:05:38,400 ‫and actually right in the next video. 94 00:05:38,400 --> 00:05:40,800 ‫So, let's just add another one here 95 00:05:40,800 --> 00:05:43,830 ‫and maybe this one, just to make sure. 96 00:05:43,830 --> 00:05:48,180 ‫And so now we can indeed delete them one by one. 97 00:05:48,180 --> 00:05:50,040 ‫And so then our cart is empty 98 00:05:50,040 --> 00:05:52,323 ‫and then we can add some other ones. 99 00:05:54,000 --> 00:05:58,350 ‫So, we placed all this code into the separate component 100 00:05:58,350 --> 00:06:02,160 ‫so that now we can reuse it in the menu item as well. 101 00:06:02,160 --> 00:06:04,350 ‫And so let's do that. 102 00:06:04,350 --> 00:06:06,090 ‫Let's close it here. 103 00:06:06,090 --> 00:06:08,673 ‫Let's just clean this up. 104 00:06:12,090 --> 00:06:15,663 ‫And then let's place that button right here. 105 00:06:18,060 --> 00:06:20,220 ‫For now, I will simply place it here, 106 00:06:20,220 --> 00:06:23,460 ‫which will create some problems, 107 00:06:23,460 --> 00:06:28,460 ‫as we will see, but let's actually wait for them. 108 00:06:29,910 --> 00:06:34,910 ‫So, delete item and it needs to receive the pizza ID 109 00:06:36,390 --> 00:06:40,320 ‫which here is actually just called ID, 110 00:06:40,320 --> 00:06:43,743 ‫and then we need to of course import that component. 111 00:06:46,770 --> 00:06:50,853 ‫So, import, delete item, 112 00:06:52,920 --> 00:06:56,970 ‫and then we need to go up and into the cart folder, 113 00:06:56,970 --> 00:07:00,003 ‫and then from there, delete item. 114 00:07:01,560 --> 00:07:06,560 ‫All right, and so now we have this button here always. 115 00:07:06,690 --> 00:07:09,150 ‫So all the components have this button, 116 00:07:09,150 --> 00:07:11,580 ‫which, of course, doesn't make a lot of sense 117 00:07:11,580 --> 00:07:15,210 ‫because most of these, or actually right now, 118 00:07:15,210 --> 00:07:18,510 ‫none of these pizzas is actually in the cart. 119 00:07:18,510 --> 00:07:22,140 ‫And so it doesn't make any sense that this button is here. 120 00:07:22,140 --> 00:07:26,430 ‫So for example, if I click here, then nothing happens, 121 00:07:26,430 --> 00:07:30,993 ‫or actually I think there was a new error or maybe not. 122 00:07:32,250 --> 00:07:35,760 ‫So yeah, actually really nothing happens, 123 00:07:35,760 --> 00:07:39,600 ‫but in any case, we only want to display this delete button 124 00:07:39,600 --> 00:07:42,453 ‫if the pizza is actually in the cart. 125 00:07:43,410 --> 00:07:45,930 ‫So, how can we do that? 126 00:07:45,930 --> 00:07:48,210 ‫Well, basically we need to determine 127 00:07:48,210 --> 00:07:51,780 ‫whether the quantity of each of these pizzas 128 00:07:51,780 --> 00:07:54,510 ‫is greater than zero in the cart. 129 00:07:54,510 --> 00:07:58,470 ‫And if it is, then we can display the delete button 130 00:07:58,470 --> 00:08:00,630 ‫and not the ADD TO CART button. 131 00:08:00,630 --> 00:08:03,330 ‫But if there is no pizza in the cart, 132 00:08:03,330 --> 00:08:05,553 ‫then we only show the add to cart. 133 00:08:07,380 --> 00:08:10,023 ‫So, let's try to do that up here. 134 00:08:12,150 --> 00:08:15,423 ‫So, basically we need the current quantity. 135 00:08:19,620 --> 00:08:23,583 ‫So, that can be used selector, 136 00:08:25,230 --> 00:08:27,930 ‫which for some reason is not importing. 137 00:08:27,930 --> 00:08:29,253 ‫Let's do that manually, 138 00:08:31,860 --> 00:08:35,130 ‫and then here we need to write some selector. 139 00:08:35,130 --> 00:08:37,800 ‫However, none of the selectors that we have yet 140 00:08:37,800 --> 00:08:40,860 ‫works in this situation because the only selector 141 00:08:40,860 --> 00:08:45,860 ‫that we have down here is to get the total quantity, 142 00:08:45,870 --> 00:08:50,400 ‫but not the quantity for each individual pizza, right? 143 00:08:50,400 --> 00:08:54,453 ‫And so we need to now, here, create another one. 144 00:08:55,590 --> 00:08:57,780 ‫So, the way we want this one to work 145 00:08:57,780 --> 00:09:00,330 ‫is getCurrentQuantityByID, 146 00:09:05,340 --> 00:09:10,140 ‫and then we want to pass in actually the current pizza ID. 147 00:09:10,140 --> 00:09:12,150 ‫So, this looks a bit confusing, 148 00:09:12,150 --> 00:09:16,503 ‫but let's now implement exactly this selector right here. 149 00:09:18,630 --> 00:09:23,630 ‫All right, so export const, getCurrenQquantityByID 150 00:09:28,560 --> 00:09:32,520 ‫and then remember that we passed in actually an ID here, 151 00:09:32,520 --> 00:09:34,920 ‫so the ID is the argument, 152 00:09:34,920 --> 00:09:39,363 ‫and then what this should return is a selector of this type. 153 00:09:40,650 --> 00:09:43,170 ‫So, a function that receives a state 154 00:09:43,170 --> 00:09:44,913 ‫and then returns something. 155 00:09:46,500 --> 00:09:50,280 ‫So, what we're gonna do is to try to find an item 156 00:09:50,280 --> 00:09:53,460 ‫in the cart with this pizza ID, 157 00:09:53,460 --> 00:09:57,390 ‫and if there is one, then we return the quantity, 158 00:09:57,390 --> 00:09:59,673 ‫otherwise we just return zero. 159 00:10:01,110 --> 00:10:05,620 ‫So, that is state.cart.cart.find 160 00:10:06,990 --> 00:10:11,990 ‫and then item where the item.pizza ID 161 00:10:14,100 --> 00:10:17,670 ‫is equal to the one that has been passed in. 162 00:10:17,670 --> 00:10:19,830 ‫And so then if this exists, 163 00:10:19,830 --> 00:10:22,020 ‫we use optional chaining for that, 164 00:10:22,020 --> 00:10:27,020 ‫we get the quantity, and if not, then we return zero. 165 00:10:29,190 --> 00:10:33,270 ‫All right, and so all we have to do now 166 00:10:33,270 --> 00:10:36,330 ‫is to then import this function, 167 00:10:36,330 --> 00:10:39,780 ‫which for some reason doesn't really work, 168 00:10:39,780 --> 00:10:42,693 ‫but we can also just add that here. 169 00:10:45,120 --> 00:10:49,200 ‫Now we get cannot access ID before initialization. 170 00:10:49,200 --> 00:10:51,873 ‫So, let's move that up here, 171 00:10:54,870 --> 00:10:58,293 ‫and now this should actually work. 172 00:10:59,130 --> 00:11:01,870 ‫So, let's just lock this value to the console 173 00:11:02,760 --> 00:11:04,920 ‫the current quantity, 174 00:11:04,920 --> 00:11:07,980 ‫and so now we should get a bunch of zeros. 175 00:11:07,980 --> 00:11:11,400 ‫So each of these here right now is zero times 176 00:11:11,400 --> 00:11:13,650 ‫in the cart, right? 177 00:11:13,650 --> 00:11:16,653 ‫So, let's clear this and then let's add this one here, 178 00:11:18,180 --> 00:11:20,400 ‫and so we see that the quantity 179 00:11:20,400 --> 00:11:24,930 ‫has indeed been updated to one for this one component. 180 00:11:24,930 --> 00:11:28,950 ‫So, we can see that actually by updating the cart state here 181 00:11:28,950 --> 00:11:31,770 ‫not the entire application is re-rendered 182 00:11:31,770 --> 00:11:34,200 ‫but really only this one component. 183 00:11:34,200 --> 00:11:37,800 ‫And so that's because of the internal optimizations 184 00:11:37,800 --> 00:11:41,673 ‫that Redux has now, all right? 185 00:11:43,050 --> 00:11:45,780 ‫So, now we can use this value here basically 186 00:11:45,780 --> 00:11:49,983 ‫to compute another state, which is just called isInCart. 187 00:11:52,530 --> 00:11:54,300 ‫And so here we can just say 188 00:11:54,300 --> 00:11:58,590 ‫if the current quantity is greater than zero. 189 00:11:58,590 --> 00:12:03,090 ‫So in this case, the component is in the cart, right? 190 00:12:03,090 --> 00:12:07,570 ‫And so basically we only want to display 191 00:12:07,570 --> 00:12:11,193 ‫this right here if isInCart. 192 00:12:15,930 --> 00:12:18,450 ‫And so with this, it disappeared from everywhere 193 00:12:18,450 --> 00:12:20,730 ‫except from this one here, 194 00:12:20,730 --> 00:12:23,043 ‫which we just added to the cart earlier. 195 00:12:23,970 --> 00:12:27,660 ‫Now here, we don't want to then display this button. 196 00:12:27,660 --> 00:12:29,460 ‫And so let's also say 197 00:12:29,460 --> 00:12:32,310 ‫that the ADD TO CART button should only be visible 198 00:12:32,310 --> 00:12:36,000 ‫if it's not sold out, and it is not in the cart. 199 00:12:36,000 --> 00:12:37,893 ‫So, it isInCart. 200 00:12:40,500 --> 00:12:41,670 ‫Great. 201 00:12:41,670 --> 00:12:44,370 ‫And so here we can now only delete this pizza 202 00:12:44,370 --> 00:12:47,943 ‫but not add another one, so at least not for now. 203 00:12:49,530 --> 00:12:52,800 ‫So, watch what happens when we add this one. 204 00:12:52,800 --> 00:12:55,710 ‫And so now in the cart, we should have one Margarita 205 00:12:55,710 --> 00:12:59,850 ‫one Romana, and let's try one Diavola here. 206 00:12:59,850 --> 00:13:02,673 ‫And indeed here we have the three of them. 207 00:13:03,600 --> 00:13:05,223 ‫Now here there's a problem. 208 00:13:06,480 --> 00:13:10,110 ‫So let's quickly try to fix that. 209 00:13:10,110 --> 00:13:13,113 ‫So inside a cart, maybe we don't have, 210 00:13:14,520 --> 00:13:18,147 ‫ah, here we have item.key and not item., 211 00:13:19,470 --> 00:13:22,833 ‫it's probably called ID, not sure about that. 212 00:13:25,320 --> 00:13:29,640 ‫So, let's just go back and then render this page again, 213 00:13:29,640 --> 00:13:31,653 ‫and so now the error is gone. 214 00:13:33,180 --> 00:13:34,740 ‫So, let's go back again, 215 00:13:34,740 --> 00:13:38,460 ‫and now as we delete this, nice, 216 00:13:38,460 --> 00:13:41,370 ‫then the ADD TO CART button is back. 217 00:13:41,370 --> 00:13:45,150 ‫And of course the pizza is also gone here from the cart. 218 00:13:45,150 --> 00:13:49,560 ‫So now we can basically toggle between these two states. 219 00:13:49,560 --> 00:13:51,210 ‫And you can also see down here 220 00:13:51,210 --> 00:13:54,330 ‫that the value then keeps updating. 221 00:13:54,330 --> 00:13:57,960 ‫So, here the complicated part was definitely 222 00:13:57,960 --> 00:14:02,960 ‫to get the information whether each pizza item 223 00:14:04,050 --> 00:14:07,290 ‫is actually in the cart or not. 224 00:14:07,290 --> 00:14:12,290 ‫So, we did that right here by writing this special selector. 225 00:14:12,420 --> 00:14:15,660 ‫So, here the selector function is actually a function 226 00:14:15,660 --> 00:14:17,440 ‫that returns another function 227 00:14:18,600 --> 00:14:21,990 ‫which is already pretty advanced JavaScript 228 00:14:21,990 --> 00:14:25,470 ‫but at this point, I'm sure this is nothing new, 229 00:14:25,470 --> 00:14:27,990 ‫and nothing complicated for you. 230 00:14:27,990 --> 00:14:31,380 ‫So, just make sure to review how this function here works, 231 00:14:31,380 --> 00:14:33,690 ‫and so I think that after that, 232 00:14:33,690 --> 00:14:35,850 ‫all of this will make sense to you. 233 00:14:35,850 --> 00:14:37,470 ‫And then all we have left to do 234 00:14:37,470 --> 00:14:41,703 ‫regarding our cart state is to update the quantities.