WEBVTT 00:00.020 --> 00:04.820 Okay, now it's time to take a look at how we can remove items from the cart because we want these buttons 00:04.820 --> 00:05.390 to work. 00:05.420 --> 00:09.680 Of course, we want to be able to click this button to remove the item completely, no matter what the 00:09.680 --> 00:13.550 quantity from the cart, and we'll focus on that next. 00:13.550 --> 00:14.900 So back to VS code then. 00:14.900 --> 00:17.540 And first of all, let's go back to our basket API. 00:17.570 --> 00:19.820 So we can deal with the query that we're making. 00:19.820 --> 00:24.020 And we're going to need to do similar to what we did for the add item. 00:24.050 --> 00:30.950 Of course we want our user interface to update, preferably immediately when they click on a minus button 00:30.950 --> 00:35.690 to remove a quantity, or the X button to click item from the cart. 00:35.690 --> 00:40.310 So let's go take a look at what we need to do in the remove basket item method. 00:40.430 --> 00:44.330 Once again, we're going to need to make use of that on query started method. 00:44.330 --> 00:51.290 And we'll add the colon and we'll say async and then open parentheses open curly brackets. 00:51.290 --> 00:57.260 And for this one the arguments we need inside curly brackets are the product ID and the quantity. 00:57.260 --> 01:01.760 That's the information we need to be able to remove an item from the basket. 01:01.760 --> 01:05.300 And then in a comma and more curly brackets. 01:05.300 --> 01:12.350 We need access to dispatch so that we can dispatch the action, and then we'll use the query fulfilled 01:12.890 --> 01:14.300 once again. 01:14.300 --> 01:19.370 And then just to the right of the parentheses we'll add the arrow open curly brackets. 01:19.370 --> 01:22.790 So once again we'll create a variable called patch results. 01:22.790 --> 01:27.140 And we'll use dispatch open parentheses. 01:27.140 --> 01:33.830 And then inside the dispatch method we can make use of the basket API and the util. 01:33.860 --> 01:36.980 And then we can use the update query data. 01:37.520 --> 01:45.680 And we will use the fetch basket method which contains our basket items in our store. 01:45.710 --> 01:48.680 And then we'll use the undefined as the second parameter. 01:48.680 --> 01:53.480 And then as the third we use the draft. 01:53.480 --> 01:59.030 So we'll specify draft and use an arrow open curly brackets. 01:59.030 --> 02:07.450 And inside here we can do what we need to which is going to affect our Redux store and update our user 02:07.450 --> 02:07.990 interface. 02:07.990 --> 02:13.960 So first of all, we need to find the index of the item in our basket. 02:13.960 --> 02:18.400 So I'll use const item index equals. 02:18.460 --> 02:21.580 Then use draft dot items. 02:21.640 --> 02:24.640 And we can use the find index method. 02:24.640 --> 02:26.320 And then use item. 02:26.320 --> 02:34.150 Use the arrow and say item dot product id that's equal to the product id we're passing in as a parameter. 02:34.570 --> 02:42.670 Below this we can check to see if the item index is greater than or equal to zero, and if it is, that 02:42.670 --> 02:48.910 means the item is in our basket and we wish to lower the quantity and or remove it. 02:48.910 --> 02:54.790 If that lowering of the quantity reduces the quantity in the basket to zero for that item. 02:54.790 --> 03:02.260 So we'll use draft dot items, and then we can use the item index to specify which item we wish to update. 03:02.260 --> 03:06.250 And then use quantity and say minus equals quantity. 03:06.250 --> 03:14.380 And then we can check the quantity now of the item, and if it's less than or equal to zero, then we 03:14.380 --> 03:15.910 can remove it from the basket. 03:15.910 --> 03:24.880 So we'll specify if draft dot items and the item index dot quantity and see if that is less than or 03:24.880 --> 03:26.230 equal to zero. 03:27.070 --> 03:30.280 And if that is the case we'll use draft dot items. 03:30.280 --> 03:34.660 And to remove an item from an array we can use the splice method. 03:34.690 --> 03:35.560 Specify. 03:35.560 --> 03:44.680 We wish to remove the item at index what item index is and say we wish to remove one of them, and then 03:44.680 --> 03:48.580 below the patch results we can use a try catch block. 03:48.580 --> 03:50.530 So we'll just add the try catch. 03:50.560 --> 03:55.030 And inside the try we'll just say await query fulfilled. 03:55.090 --> 03:59.470 And inside the catch we'll just use console dot log error. 03:59.590 --> 04:04.870 And we will use the patch results undo to undo any changes. 04:05.380 --> 04:11.290 If we do encounter an error when we come back from our API, and then we just need to add the hook that 04:11.290 --> 04:16.570 we need and we're going to use the use remove basket item mutation. 04:17.950 --> 04:20.560 And now we're in a position to go and use this. 04:20.560 --> 04:23.620 And we'll use this in our basket item component. 04:23.620 --> 04:24.670 So let's open up that. 04:24.670 --> 04:30.760 Next we'll open up the basket item dot TSX and I'll remove the others. 04:30.760 --> 04:37.720 It's getting quite busy at the top there and inside this quite busy component actually at the top here 04:37.720 --> 04:43.960 we're just going to use the hook and we'll say const in square brackets. 04:43.990 --> 04:53.200 We'll say remove basket item equals and we'll use the use remove basket item mutation hook. 04:53.800 --> 04:59.950 We don't really need to worry about mutations if we're updating our state optimistically as we are, 04:59.950 --> 05:02.980 because there is no loading when the user clicks on a button. 05:02.980 --> 05:09.310 The idea is that this immediately updates the UI, and if there is a problem when the API does come 05:09.310 --> 05:12.670 back to us, then we just simply undo the change that we've made. 05:12.670 --> 05:15.850 So let's just focus on the two buttons. 05:15.850 --> 05:22.480 We have to remove the basket items, and the first one is going to be this icon button. 05:23.710 --> 05:26.260 And let's bring things down inside here. 05:26.260 --> 05:34.900 So I don't go off the edge of the screen inside the button here I'm just going to use the onclick and 05:34.930 --> 05:35.890 add parentheses. 05:35.920 --> 05:40.150 Add the arrow and then we can use the remove basket item method. 05:40.510 --> 05:47.740 And inside the arguments here we need to send up the product ID and the quantity inside an object. 05:47.740 --> 05:52.960 So I'll specify product id and this is going to be basket item. 05:54.040 --> 05:57.160 And this is going to be item dot product ID. 05:57.640 --> 06:00.100 And we'll also specify the quantity. 06:00.100 --> 06:02.470 And this is a decrement button. 06:02.470 --> 06:06.700 So we'll just have the quantity as one inside here. 06:07.720 --> 06:14.860 And we'll also need the onclick for the other button which allows them to delete the entire item from 06:14.860 --> 06:15.940 their basket. 06:16.210 --> 06:17.440 And we'll add that. 06:17.440 --> 06:20.100 So I'll just copy what we have here because it's going to be very similar. 06:20.100 --> 06:25.170 But this icon button as well will add the onclick event, but this time full of quantity. 06:25.200 --> 06:31.500 We'll just specify item dot quantity which will have the effect of removing this from the basket. 06:31.530 --> 06:37.140 So with that in place we should be able to test our progress. 06:37.140 --> 06:39.090 And I'll just refresh the page. 06:39.240 --> 06:43.230 And first of all let's take a look at reducing an item quantity. 06:43.260 --> 06:45.150 So this one's got three in my case. 06:45.150 --> 06:47.040 So I'll click the minus button. 06:47.220 --> 06:49.680 We see the quantity updating immediately. 06:49.680 --> 06:51.870 We see that reflected in the navbar as well. 06:51.870 --> 06:52.800 So that looks good. 06:52.830 --> 06:57.240 If I take a look at the second one the blue hat I'll just use this minus button. 06:57.240 --> 07:00.420 But we would expect this to be removed from the basket. 07:00.420 --> 07:02.880 So I'll click minus and we see it go in the basket. 07:02.880 --> 07:06.750 And also we see the nav bar updated as well. 07:06.780 --> 07:11.580 And let's use this button to remove the react board in my case. 07:11.580 --> 07:14.790 And I'll click this and it's gone from our basket. 07:14.820 --> 07:20.040 And if I just click this one just to make sure that we do remove the two items and we want to see this 07:20.040 --> 07:21.210 go to five. 07:21.240 --> 07:23.160 In my case, I'll click that button. 07:23.160 --> 07:26.070 And we do see that is the case. 07:26.070 --> 07:28.290 I won't test a broken request this time. 07:28.290 --> 07:33.990 I'll presume that if we do get an error back from the API, then it would undo the changes just as we 07:33.990 --> 07:34.530 did before. 07:34.530 --> 07:38.340 But please do feel free to test that on your app if you wish to do so. 07:38.340 --> 07:43.920 So the next thing we're going to look at, which you would think would be quite straightforward, is 07:43.920 --> 07:46.200 the add button. 07:46.200 --> 07:50.310 But it's not as easy as you might think it is. 07:50.310 --> 07:59.220 In fact, what I would encourage you to do is take a look at using or implementing this based on the 07:59.220 --> 08:04.560 code that we currently have now, and see if you can figure out what kind of problem you're going to 08:04.560 --> 08:04.710 get. 08:04.710 --> 08:06.450 I don't expect you to be able to resolve this. 08:06.450 --> 08:12.090 This is a little bit tricky what we're about to look at next, but I would encourage you to have a think 08:12.090 --> 08:17.550 about what possible problems we could encounter simply by enabling this functionality. 08:17.550 --> 08:20.340 And really it's TypeScript problems that we're going to look at. 08:20.340 --> 08:24.510 So what we'll take a look at next is enabling that functionality.