1 00:00:02,130 --> 00:00:03,200 So this all works. 2 00:00:03,200 --> 00:00:07,090 We are able to show these image previews as on. 3 00:00:07,090 --> 00:00:10,620 Now, one functionality that's missing here in our product 4 00:00:10,620 --> 00:00:15,620 administration area is the functionality to delete products. 5 00:00:15,740 --> 00:00:16,573 At the moment, 6 00:00:16,573 --> 00:00:19,510 we always see a list of products we can view and edit them. 7 00:00:19,510 --> 00:00:23,360 We can add new products, but deleting products, 8 00:00:23,360 --> 00:00:25,510 that's not really possible. 9 00:00:25,510 --> 00:00:28,570 And of course that should be possible. 10 00:00:28,570 --> 00:00:31,140 So how can we make this work? 11 00:00:31,140 --> 00:00:33,940 Well, in the end, it's the same process as always. 12 00:00:33,940 --> 00:00:36,770 We need some backend code to support deletion, 13 00:00:36,770 --> 00:00:38,270 which means that in our model, 14 00:00:38,270 --> 00:00:42,700 we also have to add a methods that help us delete items. 15 00:00:42,700 --> 00:00:45,110 Then we need a route and a controller action. 16 00:00:45,110 --> 00:00:47,700 And then we need a way of triggering that action from the 17 00:00:47,700 --> 00:00:48,700 front end. 18 00:00:48,700 --> 00:00:51,750 For example, with a form submission. 19 00:00:51,750 --> 00:00:54,390 Now let's start in the model though, in the product model, 20 00:00:54,390 --> 00:00:55,670 of course. 21 00:00:55,670 --> 00:00:58,370 There, we already got a bunch of code, 22 00:00:58,370 --> 00:01:02,030 but now I want to add a new method maybe at the bottom, 23 00:01:02,030 --> 00:01:03,660 which is called remove. 24 00:01:03,660 --> 00:01:06,990 Because it should remove the product instance on which we're 25 00:01:06,990 --> 00:01:09,690 calling this and it should remove it in the database 26 00:01:09,690 --> 00:01:10,523 specifically. 27 00:01:11,520 --> 00:01:13,610 Now, since we'll work with the database, 28 00:01:13,610 --> 00:01:16,370 we can already turn this into an async function here, 29 00:01:16,370 --> 00:01:18,960 since we'll use the await keyword soon. 30 00:01:18,960 --> 00:01:23,960 And then in there, I do want to use my DB and call getDB, 31 00:01:24,840 --> 00:01:29,160 reach out to the product collection and call deleteOne. 32 00:01:29,160 --> 00:01:31,900 Which is one of the methods, the Mongo DB driver 33 00:01:31,900 --> 00:01:34,893 supports for working with the Mongo DB database. 34 00:01:35,970 --> 00:01:36,803 Delete one. 35 00:01:36,803 --> 00:01:39,700 Then once an object where we have a key value pair that 36 00:01:39,700 --> 00:01:42,740 identifies the item that should be deleted. 37 00:01:42,740 --> 00:01:44,980 And here I want to delete by ID. 38 00:01:44,980 --> 00:01:49,370 So here I then want to use the product ID we have for this 39 00:01:49,370 --> 00:01:51,163 instance on which we call remove. 40 00:01:52,730 --> 00:01:54,630 Therefore, I first of all, 41 00:01:54,630 --> 00:01:58,390 want to create such ID as a Mongo dbId 42 00:01:59,860 --> 00:02:04,860 by using new mongoDB.ObjectId and passing this Id to it. 43 00:02:07,580 --> 00:02:12,000 So that we have such a product Id in this object Id format, 44 00:02:12,000 --> 00:02:15,350 which I then use for identifying an item that should be 45 00:02:15,350 --> 00:02:16,853 deleted in the database. 46 00:02:18,140 --> 00:02:20,920 Now we did learn that this could fail, 47 00:02:20,920 --> 00:02:24,103 but we'll handle the error later in the admin controller. 48 00:02:25,592 --> 00:02:26,960 So that's then what I want to do here. 49 00:02:26,960 --> 00:02:30,410 And we can now await this so that the overall function only 50 00:02:30,410 --> 00:02:32,740 completes once does a done. 51 00:02:32,740 --> 00:02:35,940 Alternatively, we don't use async await. 52 00:02:35,940 --> 00:02:40,070 And instead we just manually return the promise that is 53 00:02:40,070 --> 00:02:43,290 generated and yielded by delete one. 54 00:02:43,290 --> 00:02:46,000 Then remove, still returns a promise, 55 00:02:46,000 --> 00:02:48,840 but now we do it explicitly ourselves with the return 56 00:02:48,840 --> 00:02:50,160 keyword. 57 00:02:50,160 --> 00:02:52,386 Either way, we have a way of awaiting 58 00:02:52,386 --> 00:02:55,220 the remove method in the place 59 00:02:55,220 --> 00:02:58,250 where we call it to wait until deleting is done. 60 00:02:58,250 --> 00:03:00,550 And I'll do it like this and just return this. 61 00:03:02,500 --> 00:03:05,560 So this is now a very simple remove method that will delete 62 00:03:05,560 --> 00:03:06,790 a product. 63 00:03:06,790 --> 00:03:09,220 It won't delete the image that belongs to it. 64 00:03:09,220 --> 00:03:12,470 But as mentioned earlier in an earlier lecture, I'm, 65 00:03:12,470 --> 00:03:13,500 I'm fine with that. 66 00:03:13,500 --> 00:03:16,680 We might want to keep all those uploaded images anyways. 67 00:03:16,680 --> 00:03:17,513 And if not, 68 00:03:17,513 --> 00:03:21,770 we can create some separate deletion process that runs every 69 00:03:21,770 --> 00:03:24,650 day to pick up unused images and delete them. 70 00:03:24,650 --> 00:03:26,280 Here I want to keep that simple 71 00:03:26,280 --> 00:03:28,653 and just focus on the data in the database. 72 00:03:30,110 --> 00:03:32,348 Now, of course, we need a controller action 73 00:03:32,348 --> 00:03:34,780 that uses this remove method. 74 00:03:34,780 --> 00:03:38,010 And for this and the admin controller at the very bottom, 75 00:03:38,010 --> 00:03:40,789 we could add a function, delete product 76 00:03:40,789 --> 00:03:43,560 name of course is up to you. 77 00:03:43,560 --> 00:03:47,580 And there we get our request and response and to this next 78 00:03:47,580 --> 00:03:49,620 function as always. 79 00:03:49,620 --> 00:03:52,800 And we can add async and front of that so that we can use 80 00:03:52,800 --> 00:03:55,168 the await keyword in there. 81 00:03:55,168 --> 00:03:59,890 And then we can create a product by using new product. 82 00:03:59,890 --> 00:04:02,800 So by instantiating our product class, 83 00:04:02,800 --> 00:04:05,000 and then they are two new product, 84 00:04:05,000 --> 00:04:10,000 we can pass all the data we need for creating that product. 85 00:04:11,210 --> 00:04:14,460 Here however, of course, we want to work with a product 86 00:04:14,460 --> 00:04:17,370 that exists already in the database and therefore, 87 00:04:17,370 --> 00:04:20,230 I will actually not create my product myself with new 88 00:04:20,230 --> 00:04:22,630 product, but instead use product, 89 00:04:22,630 --> 00:04:26,800 find by ID to find a product by ID in the database. 90 00:04:26,800 --> 00:04:31,400 And the idea when I use should be coming from my req params. 91 00:04:31,400 --> 00:04:35,221 Because I expect this controller action to be triggered for 92 00:04:35,221 --> 00:04:40,221 a route that has this ID dynamic route parameter in the URL. 93 00:04:41,430 --> 00:04:44,100 So that's the ID that identifies a product 94 00:04:44,100 --> 00:04:45,450 that should be deleted, 95 00:04:45,450 --> 00:04:48,850 will be part of the URL to which this deletion 96 00:04:48,850 --> 00:04:50,690 request will be sent. 97 00:04:50,690 --> 00:04:52,180 That's my expectation. 98 00:04:52,180 --> 00:04:55,530 And I can have this expectation because I'm the developer of 99 00:04:55,530 --> 00:04:56,363 the site. 100 00:04:56,363 --> 00:04:58,853 So I can make sure that this will be the case later. 101 00:05:00,440 --> 00:05:02,490 Now find by ID returns a promise. 102 00:05:02,490 --> 00:05:05,250 So we should await to just to get a product. 103 00:05:05,250 --> 00:05:07,180 And of course this could fail. 104 00:05:07,180 --> 00:05:10,363 So we actually want to wrap this with, try catch, 105 00:05:12,690 --> 00:05:17,610 to handle possible errors and return next error here. 106 00:05:17,610 --> 00:05:21,230 A return as always to make sure that no code thereafter 107 00:05:21,230 --> 00:05:22,083 executes, 108 00:05:23,140 --> 00:05:26,870 To make product available outside of try and not scope it to 109 00:05:26,870 --> 00:05:30,710 try, I'll make it a variable, a functional wide variable. 110 00:05:30,710 --> 00:05:34,700 Which has then set in, try and then for after try-catch, 111 00:05:34,700 --> 00:05:35,980 if that succeeds, 112 00:05:35,980 --> 00:05:40,090 we can use this product to call remove on it. 113 00:05:40,090 --> 00:05:41,870 So to delete it. 114 00:05:41,870 --> 00:05:44,113 And of course we can await this as well. 115 00:05:45,510 --> 00:05:47,455 Now this could also fail and therefore, 116 00:05:47,455 --> 00:05:51,510 we might just want to add to this here into this first try 117 00:05:51,510 --> 00:05:55,840 block and simply wait for that in there as well. 118 00:05:55,840 --> 00:05:58,670 And still, if you make past this try-catch block, 119 00:05:58,670 --> 00:06:02,180 we know that finding and removing the product worked. 120 00:06:02,180 --> 00:06:03,013 And in that case, 121 00:06:03,013 --> 00:06:07,200 I just want to redirect to slash admin, slash products. 122 00:06:07,200 --> 00:06:09,783 So true that all products overview page. 123 00:06:11,410 --> 00:06:13,980 With that, we got the controller action. 124 00:06:13,980 --> 00:06:17,310 We now need to make it available outside of this file by 125 00:06:17,310 --> 00:06:21,363 again, adding it to this export object so to say. 126 00:06:22,440 --> 00:06:25,740 And then by also adding our route that will trigger this 127 00:06:25,740 --> 00:06:27,893 action for some requests. 128 00:06:28,970 --> 00:06:30,270 So to achieve this, 129 00:06:30,270 --> 00:06:34,460 we need to go to the admin routes and in there add a new 130 00:06:34,460 --> 00:06:36,010 route. 131 00:06:36,010 --> 00:06:39,160 And we could now add a post route so that we can 132 00:06:39,160 --> 00:06:42,190 submit some forum in the front-end that will cost the 133 00:06:42,190 --> 00:06:43,650 deletion here. 134 00:06:43,650 --> 00:06:46,320 But I actually will not do that. 135 00:06:46,320 --> 00:06:49,010 Instead, we will use a new HTTP method, 136 00:06:49,010 --> 00:06:51,850 which we haven't used before in the course. 137 00:06:51,850 --> 00:06:53,423 And that's the delete method. 138 00:06:54,270 --> 00:06:59,270 I did mention these methods earlier in the Ajax asynchronous 139 00:06:59,920 --> 00:07:04,430 front-end JavaScript driven HTTP request core section. 140 00:07:04,430 --> 00:07:07,455 And there, I mentioned that besides get and post, 141 00:07:07,455 --> 00:07:09,343 we can also use delete, patch, 142 00:07:09,343 --> 00:07:14,343 put and so on when sending JavaScript driven HTTP requests 143 00:07:14,720 --> 00:07:16,430 from the front end. 144 00:07:16,430 --> 00:07:20,660 And indeed here, I plan to not submit a form 145 00:07:20,660 --> 00:07:22,680 when this delete button is clicked, 146 00:07:22,680 --> 00:07:26,730 but I do want to handle this with front-end JavaScript and 147 00:07:26,730 --> 00:07:29,736 sends such an Ajax request and then manually update the dom 148 00:07:29,736 --> 00:07:34,736 or what's on the screen after we got a success response. 149 00:07:34,870 --> 00:07:37,590 Simply so that we can also practice this, 150 00:07:37,590 --> 00:07:40,970 and of course also to avoid reloading this page, 151 00:07:40,970 --> 00:07:43,980 if we just delete one of the products there. 152 00:07:43,980 --> 00:07:47,090 Not that this would be a horrible if we reload the page, 153 00:07:47,090 --> 00:07:50,450 but we should also know our alternatives so that we can use 154 00:07:50,450 --> 00:07:51,423 those instead. 155 00:07:52,460 --> 00:07:57,140 So here I want to handle delete requests and then will show 156 00:07:57,140 --> 00:08:00,510 you how to send such requests in a couple of minutes. 157 00:08:00,510 --> 00:08:05,450 Delete requests that are targeting slash products slash 158 00:08:05,450 --> 00:08:07,780 then the ID of the product. 159 00:08:07,780 --> 00:08:09,960 So same path as here, 160 00:08:09,960 --> 00:08:12,818 but the HTTP method is a different one and they offered 161 00:08:12,818 --> 00:08:15,040 these two routes won't clash. 162 00:08:15,040 --> 00:08:17,909 Because this route only becomes active for incoming post 163 00:08:17,909 --> 00:08:19,679 requests to this path. 164 00:08:19,679 --> 00:08:22,805 This route becomes active for incoming delete requests to 165 00:08:22,805 --> 00:08:24,533 this path. 166 00:08:25,620 --> 00:08:28,710 And then here, I want to connect my admin controller, 167 00:08:28,710 --> 00:08:30,783 delete product action. 168 00:08:31,760 --> 00:08:33,520 So now in the next lecture, 169 00:08:33,520 --> 00:08:37,850 we'll ensure that we handle clicks on delete and that we 170 00:08:37,850 --> 00:08:40,200 then delete items on the server 171 00:08:40,200 --> 00:08:42,123 when those delete buttons are clicked.