Okay, now it's time to take a look at how we can remove items from the cart because we want these buttons
to work.
Of course, we want to be able to click this button to remove the item completely, no matter what the
quantity from the cart, and we'll focus on that next.
So back to VS code then.
And first of all, let's go back to our basket API.
So we can deal with the query that we're making.
And we're going to need to do similar to what we did for the add item.
Of course we want our user interface to update, preferably immediately when they click on a minus button
to remove a quantity, or the X button to click item from the cart.
So let's go take a look at what we need to do in the remove basket item method.
Once again, we're going to need to make use of that on query started method.
And we'll add the colon and we'll say async and then open parentheses open curly brackets.
And for this one the arguments we need inside curly brackets are the product ID and the quantity.
That's the information we need to be able to remove an item from the basket.
And then in a comma and more curly brackets.
We need access to dispatch so that we can dispatch the action, and then we'll use the query fulfilled
once again.
And then just to the right of the parentheses we'll add the arrow open curly brackets.
So once again we'll create a variable called patch results.
And we'll use dispatch open parentheses.
And then inside the dispatch method we can make use of the basket API and the util.
And then we can use the update query data.
And we will use the fetch basket method which contains our basket items in our store.
And then we'll use the undefined as the second parameter.
And then as the third we use the draft.
So we'll specify draft and use an arrow open curly brackets.
And inside here we can do what we need to which is going to affect our Redux store and update our user
interface.
So first of all, we need to find the index of the item in our basket.
So I'll use const item index equals.
Then use draft dot items.
And we can use the find index method.
And then use item.
Use the arrow and say item dot product id that's equal to the product id we're passing in as a parameter.
Below this we can check to see if the item index is greater than or equal to zero, and if it is, that
means the item is in our basket and we wish to lower the quantity and or remove it.
If that lowering of the quantity reduces the quantity in the basket to zero for that item.
So we'll use draft dot items, and then we can use the item index to specify which item we wish to update.
And then use quantity and say minus equals quantity.
And then we can check the quantity now of the item, and if it's less than or equal to zero, then we
can remove it from the basket.
So we'll specify if draft dot items and the item index dot quantity and see if that is less than or
equal to zero.
And if that is the case we'll use draft dot items.
And to remove an item from an array we can use the splice method.
Specify.
We wish to remove the item at index what item index is and say we wish to remove one of them, and then
below the patch results we can use a try catch block.
So we'll just add the try catch.
And inside the try we'll just say await query fulfilled.
And inside the catch we'll just use console dot log error.
And we will use the patch results undo to undo any changes.
If we do encounter an error when we come back from our API, and then we just need to add the hook that
we need and we're going to use the use remove basket item mutation.
And now we're in a position to go and use this.
And we'll use this in our basket item component.
So let's open up that.
Next we'll open up the basket item dot TSX and I'll remove the others.
It's getting quite busy at the top there and inside this quite busy component actually at the top here
we're just going to use the hook and we'll say const in square brackets.
We'll say remove basket item equals and we'll use the use remove basket item mutation hook.
We don't really need to worry about mutations if we're updating our state optimistically as we are,
because there is no loading when the user clicks on a button.
The idea is that this immediately updates the UI, and if there is a problem when the API does come
back to us, then we just simply undo the change that we've made.
So let's just focus on the two buttons.
We have to remove the basket items, and the first one is going to be this icon button.
And let's bring things down inside here.
So I don't go off the edge of the screen inside the button here I'm just going to use the onclick and
add parentheses.
Add the arrow and then we can use the remove basket item method.
And inside the arguments here we need to send up the product ID and the quantity inside an object.
So I'll specify product id and this is going to be basket item.
And this is going to be item dot product ID.
And we'll also specify the quantity.
And this is a decrement button.
So we'll just have the quantity as one inside here.
And we'll also need the onclick for the other button which allows them to delete the entire item from
their basket.
And we'll add that.
So I'll just copy what we have here because it's going to be very similar.
But this icon button as well will add the onclick event, but this time full of quantity.
We'll just specify item dot quantity which will have the effect of removing this from the basket.
So with that in place we should be able to test our progress.
And I'll just refresh the page.
And first of all let's take a look at reducing an item quantity.
So this one's got three in my case.
So I'll click the minus button.
We see the quantity updating immediately.
We see that reflected in the navbar as well.
So that looks good.
If I take a look at the second one the blue hat I'll just use this minus button.
But we would expect this to be removed from the basket.
So I'll click minus and we see it go in the basket.
And also we see the nav bar updated as well.
And let's use this button to remove the react board in my case.
And I'll click this and it's gone from our basket.
And if I just click this one just to make sure that we do remove the two items and we want to see this
go to five.
In my case, I'll click that button.
And we do see that is the case.
I won't test a broken request this time.
I'll presume that if we do get an error back from the API, then it would undo the changes just as we
did before.
But please do feel free to test that on your app if you wish to do so.
So the next thing we're going to look at, which you would think would be quite straightforward, is
the add button.
But it's not as easy as you might think it is.
In fact, what I would encourage you to do is take a look at using or implementing this based on the
code that we currently have now, and see if you can figure out what kind of problem you're going to
get.
I don't expect you to be able to resolve this.
This is a little bit tricky what we're about to look at next, but I would encourage you to have a think
about what possible problems we could encounter simply by enabling this functionality.
And really it's TypeScript problems that we're going to look at.
So what we'll take a look at next is enabling that functionality.