1 00:00:00,390 --> 00:00:01,140 All right, guys. 2 00:00:01,920 --> 00:00:03,660 To delete a product. 3 00:00:03,660 --> 00:00:08,720 So we have the delete button here, but we need the functionality on the back end and the front end. 4 00:00:08,730 --> 00:00:10,200 So let's start with the back. 5 00:00:10,230 --> 00:00:16,079 We'll go to our product controller and the last route we created was the update. 6 00:00:16,079 --> 00:00:19,590 So let's, uh, I'll just copy this. 7 00:00:20,850 --> 00:00:23,130 Entire function here. 8 00:00:25,240 --> 00:00:26,590 And let's change this. 9 00:00:26,590 --> 00:00:32,980 So this is going to be to delete a product and it's going to be a delete request to API products, ID, 10 00:00:33,340 --> 00:00:34,990 private admin. 11 00:00:35,230 --> 00:00:38,410 Let's change the name of the function to delete product. 12 00:00:40,840 --> 00:00:43,150 And let's see what we're going to do here. 13 00:00:43,150 --> 00:00:46,690 So it's going to be much less than this. 14 00:00:47,260 --> 00:00:48,970 We do need to find the product. 15 00:00:48,970 --> 00:00:52,890 So let's get rid of that because we don't need anything from the body. 16 00:00:52,900 --> 00:00:56,380 We do want to get the product and then we do want to check for it. 17 00:00:56,380 --> 00:01:01,210 So in here, what we'll do is I don't want to call. 18 00:01:02,410 --> 00:01:03,610 Actually don't want to do that. 19 00:01:03,610 --> 00:01:04,720 So we'll get rid of that. 20 00:01:04,750 --> 00:01:07,630 I want to do a wait and. 21 00:01:09,540 --> 00:01:10,050 Await. 22 00:01:10,050 --> 00:01:15,630 And then we're going to use the product model and we're going to use the delete one. 23 00:01:16,990 --> 00:01:17,920 Method. 24 00:01:17,920 --> 00:01:20,740 So delete one and then pass in an object. 25 00:01:20,740 --> 00:01:28,030 And we want to find where the underscore ID is equal to the product that we got. 26 00:01:28,060 --> 00:01:29,920 Dot underscore id. 27 00:01:31,080 --> 00:01:40,380 And then once we do that, we're just going to simply do a rez status of 200 and dot Json and we're 28 00:01:40,380 --> 00:01:42,360 just going to say product deleted. 29 00:01:42,360 --> 00:01:46,110 And then if there's no product, send a 404 product not found. 30 00:01:46,110 --> 00:01:47,160 So very simple. 31 00:01:47,160 --> 00:01:50,190 And then we're going to export delete product. 32 00:01:51,460 --> 00:01:58,810 So in many cases, in my opinion, I think backend development is easier than front end development 33 00:01:58,810 --> 00:02:00,580 just looking at this course. 34 00:02:00,940 --> 00:02:06,810 I mean, you guys, obviously you can't I guess you could let me know through like comments and stuff. 35 00:02:06,850 --> 00:02:12,310 Well, yeah, let me know in the comments if you're watching this on Travis Media.com, if you think 36 00:02:12,310 --> 00:02:20,380 backend development in the case of building APIs and so on is easier than front end because with front 37 00:02:20,380 --> 00:02:23,560 end you're dealing with the user interface and you're dealing with state. 38 00:02:23,560 --> 00:02:26,530 And to me it's much more complicated. 39 00:02:26,530 --> 00:02:31,630 With projects like this, there are cases where the back end is very, very complicated, but not so 40 00:02:31,630 --> 00:02:36,190 much when it's just a simple API and simple authentication. 41 00:02:36,460 --> 00:02:40,000 So that should do it for the controller. 42 00:02:40,000 --> 00:02:41,530 Now we do have to add that route. 43 00:02:41,530 --> 00:02:48,880 So in routes, product routes, let's see, we're going to add or we're going to first bring in delete 44 00:02:48,880 --> 00:02:55,220 product and we're going to add that to, let's see to the ID right here. 45 00:02:55,220 --> 00:02:58,070 So we already have a get and we have a put. 46 00:02:58,100 --> 00:03:00,530 Now we're going to add a dot delete. 47 00:03:01,400 --> 00:03:07,010 And we're going to add the protect middleware, the admin middleware, and then the function delete 48 00:03:07,010 --> 00:03:07,880 product. 49 00:03:09,430 --> 00:03:11,720 And that should do it for the back end. 50 00:03:11,740 --> 00:03:17,680 So now let's go into the front end and we're first going to go into the slice and you can see kind of 51 00:03:17,680 --> 00:03:24,730 the workflow for for every piece of functionality, you add the back end route with the controller dealing 52 00:03:24,730 --> 00:03:29,590 with the database, whatever it is you're going to do, dealing with Mongoose, then you go to the front 53 00:03:29,590 --> 00:03:36,190 end and you start with the state and at least this is what we're doing, starting with the global state 54 00:03:36,190 --> 00:03:38,680 inside the slice and the actions. 55 00:03:39,190 --> 00:03:45,370 And then we go into the screen and we implement the functionality, the user events and so on. 56 00:03:45,610 --> 00:03:53,410 So let's go to Products API Slice and let's see, we're going to add right under upload product image. 57 00:03:54,430 --> 00:04:02,440 Let's add delete product, which is going to be a mutation and we're going to have a query with the 58 00:04:02,440 --> 00:04:09,070 product ID, The URL is going to be our product URL slash product ID, it's going to be a delete. 59 00:04:09,660 --> 00:04:11,700 And that should do it. 60 00:04:11,700 --> 00:04:13,200 And then we just need to. 61 00:04:13,820 --> 00:04:17,269 Use delete product mutation. 62 00:04:17,269 --> 00:04:20,380 We're going to export that so we can use it in our screen. 63 00:04:20,390 --> 00:04:23,090 Now let's go to our product list screen. 64 00:04:24,570 --> 00:04:26,310 Which is in our admin folder. 65 00:04:26,310 --> 00:04:27,630 Product list screen. 66 00:04:28,690 --> 00:04:31,630 We're already bringing in a couple of things from our API slice. 67 00:04:31,630 --> 00:04:38,710 Now we want to bring in the use delete product mutation and then we're going to use that down here, 68 00:04:38,710 --> 00:04:39,730 let's say. 69 00:04:40,780 --> 00:04:41,950 Const. 70 00:04:43,260 --> 00:04:47,190 And we're going to have this function called delete product. 71 00:04:47,220 --> 00:04:54,630 We have this is loading, which we're going to rename to loading delete, and then we're going to need 72 00:04:54,630 --> 00:04:56,220 a delete handler. 73 00:04:56,520 --> 00:04:57,180 Let's see. 74 00:04:57,210 --> 00:04:58,170 Do we already? 75 00:04:59,020 --> 00:04:59,260 Wait. 76 00:04:59,260 --> 00:05:00,660 We have our delete handler, right? 77 00:05:00,670 --> 00:05:01,600 Yeah, it's right here. 78 00:05:01,600 --> 00:05:07,540 So we already have that and it's taking in the ID, so let's just make it a synchronous. 79 00:05:08,370 --> 00:05:10,050 And then we can get rid of that. 80 00:05:10,050 --> 00:05:12,970 And let's let's do a quick confirm. 81 00:05:12,990 --> 00:05:15,600 So we'll say if window dot. 82 00:05:16,530 --> 00:05:17,730 Confirm. 83 00:05:19,110 --> 00:05:21,990 And we'll just say, Are you sure? 84 00:05:25,270 --> 00:05:30,220 And if they click yes, then we're going to try catch. 85 00:05:32,190 --> 00:05:33,780 And let's see. 86 00:05:34,790 --> 00:05:35,810 In the try. 87 00:05:35,810 --> 00:05:41,570 We're going to await on our delete product and we're going to Refetch. 88 00:05:41,600 --> 00:05:43,880 We brought Refetch in from the query, right? 89 00:05:43,880 --> 00:05:44,750 Yeah, right here. 90 00:05:45,170 --> 00:05:46,550 So we'll refetch. 91 00:05:46,550 --> 00:05:50,870 And then if there's an error, we're going to toast. 92 00:05:52,940 --> 00:05:54,590 Toast dot error. 93 00:05:55,910 --> 00:05:58,010 And we'll pass in here. 94 00:05:58,040 --> 00:06:00,740 E rr dot data. 95 00:06:02,680 --> 00:06:02,950 Yeah. 96 00:06:02,950 --> 00:06:04,090 So that should do it. 97 00:06:05,300 --> 00:06:07,460 And for the loading. 98 00:06:08,570 --> 00:06:09,860 Let's go down here. 99 00:06:09,860 --> 00:06:12,140 And where do we have the loading? 100 00:06:14,450 --> 00:06:15,890 For right here. 101 00:06:15,890 --> 00:06:17,300 So we have loading create. 102 00:06:17,300 --> 00:06:19,130 Let's go ahead and just add loading. 103 00:06:19,130 --> 00:06:19,820 Delete. 104 00:06:21,230 --> 00:06:22,820 And we'll save that. 105 00:06:23,000 --> 00:06:24,230 Let's try it out. 106 00:06:24,680 --> 00:06:25,520 Come over here. 107 00:06:25,520 --> 00:06:26,870 I'm going to just reload. 108 00:06:26,870 --> 00:06:30,620 And this test product that I created, I'm going to click, delete and click. 109 00:06:30,620 --> 00:06:31,460 Okay. 110 00:06:31,640 --> 00:06:33,080 And there it goes. 111 00:06:34,440 --> 00:06:35,070 Cool. 112 00:06:35,700 --> 00:06:37,220 And we could do a toast. 113 00:06:37,230 --> 00:06:38,340 Success. 114 00:06:39,260 --> 00:06:40,490 We might as well do that. 115 00:06:41,120 --> 00:06:44,270 So let's go right here and just say toast. 116 00:06:44,270 --> 00:06:44,960 Success. 117 00:06:44,960 --> 00:06:46,220 Product deleted. 118 00:06:47,400 --> 00:06:53,220 And I don't want to delete any of these, so I'm going to just create another dummy product and delete. 119 00:06:54,420 --> 00:06:57,510 And now we get the little toast message as well. 120 00:06:58,250 --> 00:06:59,240 All right, cool. 121 00:06:59,240 --> 00:07:04,640 So next, we're going to do the we're going to start on the users, right? 122 00:07:04,640 --> 00:07:10,910 Because as an admin, we want to be able to to see our users and be able to delete them and edit and 123 00:07:10,910 --> 00:07:11,420 so on. 124 00:07:11,420 --> 00:07:12,620 So we're going to do that next.