1 00:00:02,440 --> 00:00:03,820 Ok so in the last lecture, 2 00:00:03,820 --> 00:00:06,590 we also added deletion functionalities 3 00:00:06,640 --> 00:00:14,530 and you learned that you have to convert your code or your items to this bson equivalence if you want 4 00:00:14,530 --> 00:00:18,970 to use them in a query or want to store them as such objects in mongodb. 5 00:00:19,000 --> 00:00:20,090 Now what's missing? 6 00:00:20,380 --> 00:00:26,540 Well we also want to be able to view the details page and to edit products, as well as add new products, 7 00:00:26,560 --> 00:00:28,100 so let's work on the details page and 8 00:00:28,120 --> 00:00:33,960 definitely feel free to again pause the video at this point and go ahead on your own to try that out. 9 00:00:34,030 --> 00:00:36,510 Of course we'll do it together after that short pause. 10 00:00:38,500 --> 00:00:40,200 So were you successful? 11 00:00:40,420 --> 00:00:42,110 Let's now do that together. 12 00:00:42,250 --> 00:00:50,750 So I will go into my file that is responsible for viewing the details which is the products.js file, here when 13 00:00:50,750 --> 00:00:56,380 this page gets loaded essentially, I'm trying to fetch a product and this old code won't work anymore. 14 00:00:56,700 --> 00:01:01,070 Instead we again need to replicate this code here where we use 15 00:01:01,070 --> 00:01:01,870 mongodb 16 00:01:01,910 --> 00:01:05,180 and of course that also means we'll have to add the imports to this file, 17 00:01:05,210 --> 00:01:06,170 so to the products.js 18 00:01:06,170 --> 00:01:07,690 file here. 19 00:01:07,700 --> 00:01:14,180 So we can go up to products.js and here, we can simply copy this to imports because we'll need all of 20 00:01:14,180 --> 00:01:20,440 that in the product.js file too, we can replace axios with that because we'll not use axios anymore. 21 00:01:20,750 --> 00:01:25,730 Now in componentDidMount, I'm reaching out to my products collection thus far and then of course, I want 22 00:01:25,730 --> 00:01:32,690 to find a product, so I'll use the find method to find a product where the ID of the product matches the 23 00:01:32,700 --> 00:01:35,500 ID I get here. 24 00:01:35,600 --> 00:01:37,970 So I'll look for equality of ID and 25 00:01:38,180 --> 00:01:44,840 well then we need to construct an object ID again with bson.objectId and there I pass this 26 00:01:44,930 --> 00:01:47,770 props match params ID, 27 00:01:47,810 --> 00:01:53,930 so exactly what I use down there to get my ID of that product and this should now give me all products 28 00:01:53,930 --> 00:02:01,400 with that ID of which there of course should only be one. So thereafter, I can use then and catch, 29 00:02:01,410 --> 00:02:02,790 so that should still work, 30 00:02:02,800 --> 00:02:06,690 I can copy that and I can get rid of my axios code. 31 00:02:08,260 --> 00:02:12,660 So with all of that, if I save this, let's click details 32 00:02:13,450 --> 00:02:17,630 and we get an error, collection find is not a method 33 00:02:17,980 --> 00:02:22,430 and yeah it makes sense because what does find return? A cursor, 34 00:02:22,450 --> 00:02:23,470 we don't have find one, 35 00:02:23,470 --> 00:02:24,390 that was my mistake, 36 00:02:24,400 --> 00:02:25,250 we have find 37 00:02:25,510 --> 00:02:28,270 so therefore I have to call as array here 38 00:02:28,510 --> 00:02:30,710 and then that gives me a promise. 39 00:02:30,730 --> 00:02:33,470 So now I get back my results as an array, 40 00:02:33,520 --> 00:02:36,100 that also means that I have an array here, 41 00:02:36,250 --> 00:02:40,930 so product response actually will not hold any data I can extract 42 00:02:40,930 --> 00:02:45,190 instead this should be an array of products and I simply need to access the first 43 00:02:45,310 --> 00:02:47,920 and as we know, only object in there. 44 00:02:47,980 --> 00:02:53,860 So that's a slight adjustment that is required as array and then extracting the first element 45 00:02:53,910 --> 00:02:55,710 and now if we reload that page here, 46 00:02:59,530 --> 00:03:05,020 we again of course get the issues regarding the bson types and that can be solved in exactly the same 47 00:03:05,020 --> 00:03:07,140 way we did it before. Here 48 00:03:07,150 --> 00:03:14,860 when we want to render a product, well I'll just create a new product and then basically take my old 49 00:03:15,040 --> 00:03:16,630 product here, 50 00:03:16,810 --> 00:03:22,090 so that is what I started with, that I just store the first element in product response which is the 51 00:03:22,090 --> 00:03:31,100 product we fetched in a new constant and then on this constant, I can change my ID and set it equal 52 00:03:31,100 --> 00:03:33,350 to product.id toString, 53 00:03:33,350 --> 00:03:42,850 so I convert this to a string and I can also grab my price and set this equal to product price toString, 54 00:03:42,860 --> 00:03:48,880 so just what I did in the other lecture and then product is what I use down there. 55 00:03:48,890 --> 00:03:55,550 So now if we save this, page reloads and now we see the backpack details without the image again because 56 00:03:55,550 --> 00:03:58,650 we deleted that backend folder where the image was hosted 57 00:03:58,670 --> 00:04:00,480 but the other part is working. 58 00:04:00,800 --> 00:04:06,200 So now let's add some functionality to add new products so that we finally can add products again where 59 00:04:06,200 --> 00:04:07,300 the images do work.