Ok so in the last lecture,
we also added deletion functionalities
and you learned that you have to convert your code or your items to this bson equivalence if you want
to use them in a query or want to store them as such objects in mongodb.
Now what's missing?
Well we also want to be able to view the details page and to edit products, as well as add new products,
so let's work on the details page and
definitely feel free to again pause the video at this point and go ahead on your own to try that out.
Of course we'll do it together after that short pause.
So were you successful?
Let's now do that together.
So I will go into my file that is responsible for viewing the details which is the products.js file, here when
this page gets loaded essentially, I'm trying to fetch a product and this old code won't work anymore.
Instead we again need to replicate this code here where we use
mongodb
and of course that also means we'll have to add the imports to this file,
so to the products.js
file here.
So we can go up to products.js and here, we can simply copy this to imports because we'll need all of
that in the product.js file too, we can replace axios with that because we'll not use axios anymore.
Now in componentDidMount, I'm reaching out to my products collection thus far and then of course, I want
to find a product, so I'll use the find method to find a product where the ID of the product matches the
ID I get here.
So I'll look for equality of ID and
well then we need to construct an object ID again with bson.objectId and there I pass this
props match params ID,
so exactly what I use down there to get my ID of that product and this should now give me all products
with that ID of which there of course should only be one. So thereafter, I can use then and catch,
so that should still work,
I can copy that and I can get rid of my axios code.
So with all of that, if I save this, let's click details
and we get an error, collection find is not a method
and yeah it makes sense because what does find return? A cursor,
we don't have find one,
that was my mistake,
we have find
so therefore I have to call as array here
and then that gives me a promise.
So now I get back my results as an array,
that also means that I have an array here,
so product response actually will not hold any data I can extract
instead this should be an array of products and I simply need to access the first
and as we know, only object in there.
So that's a slight adjustment that is required as array and then extracting the first element
and now if we reload that page here,
we again of course get the issues regarding the bson types and that can be solved in exactly the same
way we did it before. Here
when we want to render a product, well I'll just create a new product and then basically take my old
product here,
so that is what I started with, that I just store the first element in product response which is the
product we fetched in a new constant and then on this constant, I can change my ID and set it equal
to product.id toString,
so I convert this to a string and I can also grab my price and set this equal to product price toString,
so just what I did in the other lecture and then product is what I use down there.
So now if we save this, page reloads and now we see the backpack details without the image again because
we deleted that backend folder where the image was hosted
but the other part is working.
So now let's add some functionality to add new products so that we finally can add products again where
the images do work.