So this all works.
We are able to show these image previews as on.
Now, one functionality that's missing here in our product
administration area is the functionality to delete products.
At the moment,
we always see a list of products we can view and edit them.
We can add new products, but deleting products,
that's not really possible.
And of course that should be possible.
So how can we make this work?
Well, in the end, it's the same process as always.
We need some backend code to support deletion,
which means that in our model,
we also have to add a methods that help us delete items.
Then we need a route and a controller action.
And then we need a way of triggering that action from the
front end.
For example, with a form submission.
Now let's start in the model though, in the product model,
of course.
There, we already got a bunch of code,
but now I want to add a new method maybe at the bottom,
which is called remove.
Because it should remove the product instance on which we're
calling this and it should remove it in the database
specifically.
Now, since we'll work with the database,
we can already turn this into an async function here,
since we'll use the await keyword soon.
And then in there, I do want to use my DB and call getDB,
reach out to the product collection and call deleteOne.
Which is one of the methods, the Mongo DB driver
supports for working with the Mongo DB database.
Delete one.
Then once an object where we have a key value pair that
identifies the item that should be deleted.
And here I want to delete by ID.
So here I then want to use the product ID we have for this
instance on which we call remove.
Therefore, I first of all,
want to create such ID as a Mongo dbId
by using new mongoDB.ObjectId and passing this Id to it.
So that we have such a product Id in this object Id format,
which I then use for identifying an item that should be
deleted in the database.
Now we did learn that this could fail,
but we'll handle the error later in the admin controller.
So that's then what I want to do here.
And we can now await this so that the overall function only
completes once does a done.
Alternatively, we don't use async await.
And instead we just manually return the promise that is
generated and yielded by delete one.
Then remove, still returns a promise,
but now we do it explicitly ourselves with the return
keyword.
Either way, we have a way of awaiting
the remove method in the place
where we call it to wait until deleting is done.
And I'll do it like this and just return this.
So this is now a very simple remove method that will delete
a product.
It won't delete the image that belongs to it.
But as mentioned earlier in an earlier lecture, I'm,
I'm fine with that.
We might want to keep all those uploaded images anyways.
And if not,
we can create some separate deletion process that runs every
day to pick up unused images and delete them.
Here I want to keep that simple
and just focus on the data in the database.
Now, of course, we need a controller action
that uses this remove method.
And for this and the admin controller at the very bottom,
we could add a function, delete product
name of course is up to you.
And there we get our request and response and to this next
function as always.
And we can add async and front of that so that we can use
the await keyword in there.
And then we can create a product by using new product.
So by instantiating our product class,
and then they are two new product,
we can pass all the data we need for creating that product.
Here however, of course, we want to work with a product
that exists already in the database and therefore,
I will actually not create my product myself with new
product, but instead use product,
find by ID to find a product by ID in the database.
And the idea when I use should be coming from my req params.
Because I expect this controller action to be triggered for
a route that has this ID dynamic route parameter in the URL.
So that's the ID that identifies a product
that should be deleted,
will be part of the URL to which this deletion
request will be sent.
That's my expectation.
And I can have this expectation because I'm the developer of
the site.
So I can make sure that this will be the case later.
Now find by ID returns a promise.
So we should await to just to get a product.
And of course this could fail.
So we actually want to wrap this with, try catch,
to handle possible errors and return next error here.
A return as always to make sure that no code thereafter
executes,
To make product available outside of try and not scope it to
try, I'll make it a variable, a functional wide variable.
Which has then set in, try and then for after try-catch,
if that succeeds,
we can use this product to call remove on it.
So to delete it.
And of course we can await this as well.
Now this could also fail and therefore,
we might just want to add to this here into this first try
block and simply wait for that in there as well.
And still, if you make past this try-catch block,
we know that finding and removing the product worked.
And in that case,
I just want to redirect to slash admin, slash products.
So true that all products overview page.
With that, we got the controller action.
We now need to make it available outside of this file by
again, adding it to this export object so to say.
And then by also adding our route that will trigger this
action for some requests.
So to achieve this,
we need to go to the admin routes and in there add a new
route.
And we could now add a post route so that we can
submit some forum in the front-end that will cost the
deletion here.
But I actually will not do that.
Instead, we will use a new HTTP method,
which we haven't used before in the course.
And that's the delete method.
I did mention these methods earlier in the Ajax asynchronous
front-end JavaScript driven HTTP request core section.
And there, I mentioned that besides get and post,
we can also use delete, patch,
put and so on when sending JavaScript driven HTTP requests
from the front end.
And indeed here, I plan to not submit a form
when this delete button is clicked,
but I do want to handle this with front-end JavaScript and
sends such an Ajax request and then manually update the dom
or what's on the screen after we got a success response.
Simply so that we can also practice this,
and of course also to avoid reloading this page,
if we just delete one of the products there.
Not that this would be a horrible if we reload the page,
but we should also know our alternatives so that we can use
those instead.
So here I want to handle delete requests and then will show
you how to send such requests in a couple of minutes.
Delete requests that are targeting slash products slash
then the ID of the product.
So same path as here,
but the HTTP method is a different one and they offered
these two routes won't clash.
Because this route only becomes active for incoming post
requests to this path.
This route becomes active for incoming delete requests to
this path.
And then here, I want to connect my admin controller,
delete product action.
So now in the next lecture,
we'll ensure that we handle clicks on delete and that we
then delete items on the server
when those delete buttons are clicked.