Okay.
I'm just going to demonstrate.
Now, how do you go about the delete product method.
Hopefully you gave this a go and you were successful.
And if you can delete a product and it updates the inventory, then please feel free to skip this.
All I'm going to do is literally demonstrate what we need to do to enable this delete product functionality.
So please feel free to skip if you've already got this functionality working.
There's no need to watch this, but just in case you didn't or don't want to, that's fine as well.
I'm going to run through what we need to do to achieve this, and I'm going to start off in the admin
API.
We need to add another method inside here of course to delete a product.
So I'll just go through and add another query to delete products.
And this is going to use the builder dot mutation.
And the first parameter here is what are we returning from a delete.
Well our delete method.
It doesn't return anything.
So we specify void as the first type parameter there.
And then we can specify number as the second parameter.
Because this is for a deletion or we need to send up is the id as the root parameter.
So we'll open parentheses curly brackets and we'll add a query in here.
It's going to take an ID that is a number.
We'll add the arrow open curly brackets and we can return in curly brackets the URL.
And this is going to be in Backticks.
We'll specify products forward slash and then dollar ID.
And then for the method we'll specify that this is a delete operation.
And do we need to do anything else in here.
Well all we need to do is just export our used delete product mutation.
So I'll add that to the exports here and say use delete product mutation.
So nothing outrageous there.
Pretty straightforward stuff.
And we'll go to our inventory page to handle this.
So inside our inventory page let's just add the hook that we need.
So we need the const and in square brackets we'll just say delete products and set it equal to use delete
product mutation inside here and we'll add a helper method for this.
Or at least I've chosen to, because we need to do two things here.
Really, we need to first of all delete the product using the hook.
But also we want to make use of the Refetch so that we update our inventory page as well, so that the
admin can see that this product is now gone from the inventory.
So I'll do this inside a helper method I'll just say const handle delete products.
And we'll make this an async method.
It will take the ID of number as a parameter.
I'll add the arrow.
And then inside here I'll just do this inside a try catch block and just console log any error.
And inside the try I'll just await and then use the delete product method and pass in the id.
And then I'll use the Refetch method so that the inventory page gets updated.
Of course, that does mean going out to our API again, and it's not the most efficient way to do this
because we could optimistically update our inventory page if we wish to do so.
I'm not going to go that far for simplicity, and because this is not a user facing really functionality,
it's just the admin that's going to use this.
And how often is a delete product activity going to take place?
These are all things that you can ask yourself and think, well, do I need optimistic updates for absolutely
everything?
You could say that this would be an example of no, I do not need any optimistic updating because for
sure, we know that our client knows what's been deleted.
And sure, we could and have seen how to do optimistic updates.
But I'm going to say no, we don't need it for this occasion.
And yes, you can call me lazy if you wish, but I have demonstrated how to do that earlier on, so
please do do that if you want to practice using an optimistic update here.
Now fully handle delete product method.
Let's go down to our action buttons and I'll use inside this button.
I'll give it the onclick and add parentheses.
And I'll just say handle delete products and just passed in the product.id as the parameter layer,
and that is that we'll have loading taking place or the loading indicator taking place automatically
because of our work that we've done in RTK query to handle that.
So that should be it really.
So let's go across and take a look.
So inside our inventory let's pick on the products that I have just created which is test product one.
I would like to see that disappear from this list.
So if I click delete we'll see the loading.
And we should see the product disappear from this list.
And we're back to 18 products now as well.
So that's it.
That's the delete method taken care of.
We've still got a 1 or 2 things to finish off in this section.
This final section.
And next we'll take a look at how we can I'm going to use the word secure even though it's not really
security.
We'll take a look at how we can protect our inventory from people like Bob who do not have the authority
to edit our products.
And we'll take a look at that next.