Let's make sure we can also edit products. Now
as always, I'll copy my code to get access to the products collection and for editing,
I have actually two steps which I need to execute.
First of all, I need to get the product, that should already work because I reuse the logic I use for getting
it for the detail page and hence indeed the form here is pre-populated with the product data.
Now when we click that button, a request will be sent to dispatch route here and there,
I still need to add some code in this place to store the updated product in the database.
So I still get access to the products collection here but then I can call update one here to update one
product because I know I will only need to update one and I'll identify that product by the ID which again
is encoded in the request url.
So again I'll create a new objectid object and I pass my request params ID here, just as before,
so now this finds me the product I want to update.
Now you learned how you can update it and I will simply use $set here as a key name to define
the logic
I want to apply to update the product and I will update it by basically setting updated product because
here, I describe all the changes that should be required and we can confirm this by going into the shell
where I am connected to my database.
Here this is how the product is stored,
we have a name, description, price and image and that is exactly what I set here, name, description, price
and image.
So I set new values which are parsed from the incoming request for all these fields inside of the
document
I passed to set.
Now one thing I need to change however is here,
the product price should again be handled with decimal 128 from string
and for that, I first of all need to convert the price to a string like this.
So now I have all the logic I need to update a product, update one then also returns a promise. So
we can reuse that well-known error handling code which I have here,
so let's copy that over into our catch function down there and in the then block,
I get a result which I could output but I know at this point that we were successful,
so here I'll just return product updated and the ID,
well that is something I can get from my request params because I already use that ID for finding the
product.
With that out of the way, we can restart our backend server and now let's try changing the product,
let's add a couple of exclamation marks and let's change the price. If I click update product
now, here we don't see that, on the backend I didn't get an error though,
now let's look into our database through the shell
and indeed here we see something strange, a nested updated product was added with the updated data.
Now what's happening here?
Well the way I wrote my update code here, this is basically translated to this by Javascript,
so I'm passing an object to set where I instruct it to basically add a new field called updated product
with all that data.
So what I indeed want to do is I want to set set equal to updated product because updated product already
is an object describing the entire change,
so this is what I want to do.
Now to fix this manually,
I'll quickly go into the shell, take the object id of the product where I mess this up and then use
update one here by
calling update one like this, finding the product for this ID and then I can use $unset as
you learned to pass the key name which is updated product and set this to an empty string.
And now if I find all the products again, this was cleaned up and now with the code also fixed here, I just
need to restart my server
and now if we edit this again, add a couple of exclamation marks and change the price and I click update
product,
now this looks much better
and now if we also inspect this in our shell connected to our database, here of course we see there is no
redundant data
now, this was updated correctly.
So this is how we can update the data and how we should make sure that we well update it correctly I
guess.
Now one thing is missing and that is how we can delete a product.
Now I'll do this in this same lecture because it's really simple and of course feel free to pause and
do this on your own,
it's a great practice.
We do it of course in this delete router method
and we do it by first of all getting access to the products collection again,
like that, then we can call delete one here and again, we will identify the product by creating a new
objectId object to which I pass request params ID because we do extract the ID here too,
it will be part of the url
and then we have the then and the catch block, for errors we can use our well-known error handler and for
the success block here that we were successful, I'll move this response in there. And that should be all,
that should be all the code we need to delete a product from our products collection.
So as before, let's switch to our terminal where the backend server runs, quit it and restart it due to our
change and let's then simply hit delete.
Now was that successful?
Let's reload the page,
looks like it was. So the fact that it did update is just a little error in the react code,
you can fix it by going to that products.js file in the product folder in the pages folder in the source
folder
and there, grab all the code you find in the componentDidMount, copy it, then add a new function between
render and product delete handler which you can call fetch data, created like this
with this syntax, paste the code you copied in there and then inside componentDidMount,
you can call this fetch data like that and then you copy that call and also execute it here in the
then block
once something was deleted. With this tiny change made,
if you reload the react app and you delete the earrings, now this say page is updated.
So now we can add products, fetch them,
fetch a single product and also delete products and indeed if we go to the mongo shell and we look into
the database,
nothing is in there because we deleted it all.
Now let me show you how you could add pagination before we also add user authentication to our application
so that I can explain what's important there.