So now that we can view all products, the details of a single product and delete a product and add a product,
of course we want to be able to edit a product too.
This is again an awesome time for you
to practice this because we'll only use things we did thus far
after a short pause which you can use to pause the video, we can of course continue together.
So were you successful?
Let's do this together. Now for editing,
we start on the edit products.js page or on that file
and first of all, we need to ensure that initially, we will load the detailed data for the product that
should be edited correctly.
Now we get that code to load such data in the product.js
file where we already load some product detail data, so we can just copy that entire code here essentially
and yes, you could of course refactor this to outsource it into one file,
I'll go with the more verbose approach here to make this really clear where I'm using what and now
I'm getting access to the collection,
I'm finding the right product here, convert it to an array because I have a cursor here, get my product,
convert the native types and then I just need to make sure I set my state correctly,
so the error handler is all right,
we can leave it as it is
but here I want to ensure that I set my state like this, I set isLoading to false
and then I retrieve my product data, that toString conversion here is not required anymore but the rest
should be fine.
Now we can get rid of that axios code down there
and we can save this file.
Now if I click on edit, yes this works,
it fills out the blanks for us.
So now we are loading the data,
now we just have to make sure that the update product button works
and for that, we of course need to work on this place where we send a patch request with axios.
This is not what we'll do anymore and hence we can now also remove the axios import
finally, instead we'll do almost the same we did when we insert a product. So we can copy that code or
to be precise since we reuse that part,
we can also just move it out of there
but then we can copy this code, move it into the edit case here
but there of course I won't insert one product but I'll update one.
The first argument therefore is the selector, which product to update
and here I want to update the product with the right ID obviously. So I'll select the product where the
ID is correct, where the ID and now I need my bson type,
so where I have bson objectid where the ID matches my objectid here.
Now what is my ID? Well I can get this from the props match params ID
and that is how I extract my ID in componentDidMount too, right,
this is how I get the ID there
and this is how I can get the ID down there.
This gets stored in the request and it should so that I can handle it in the same way I handle the insertion
of a product
and now the page reloads
and if we now change the price for example and I click update product, it changed here too.
So now we get all the crud functionality added and we are now handling it fully with mongodb stitch
and still in a super secure way
but of course, the next step is that we now add users and not this anonymous access which allows every
visitor of our page to do everything. That might be what we want for some parts of the page
but let's say for some parts or in our example for everything, we actually want to lock it down to real
users and
this is something we'll work on now.