1 1 00:00:00,900 --> 00:00:02,290 line:15% Hi and welcome back. 2 2 00:00:02,290 --> 00:00:03,390 line:15% In this video we're going to be 3 3 00:00:03,390 --> 00:00:05,910 line:15% working with deleting alerts. 4 4 00:00:05,910 --> 00:00:08,380 This may sound like its gonna be something difficult 5 5 00:00:08,380 --> 00:00:11,323 or complicated but it's actually really straightforward. 6 6 00:00:12,570 --> 00:00:15,950 Let's go over to our alert index. 7 7 00:00:15,950 --> 00:00:18,700 And for each alert, we're going to add a button. 8 8 00:00:18,700 --> 00:00:22,490 When you click that button, the alert should be deleted. 9 9 00:00:22,490 --> 00:00:25,910 So, it's going to be very similar to this Edit button. 10 10 00:00:25,910 --> 00:00:28,520 I am gonna just copy and paste that. 11 11 00:00:28,520 --> 00:00:33,520 Instead of btn-secondary, we're gonna add btn-danger. 12 12 00:00:33,900 --> 00:00:37,450 Just colours the button red and makes it a bit clearer 13 13 00:00:37,450 --> 00:00:39,880 that this is a destructive action. 14 14 00:00:39,880 --> 00:00:41,730 A destructive action on a page 15 15 00:00:41,730 --> 00:00:43,300 is something that when you click it, 16 16 00:00:43,300 --> 00:00:45,540 there's probably no turning back. 17 17 00:00:45,540 --> 00:00:47,560 And so, you just wanna make it a bit clearer 18 18 00:00:47,560 --> 00:00:50,260 that something dangerous is gonna happen. 19 19 00:00:50,260 --> 00:00:52,850 So, you're gonna type permanently delete in there 20 20 00:00:52,850 --> 00:00:57,630 and the href is gonna be alert.delete_alert, 21 21 00:00:57,630 --> 00:01:00,520 and it's also going to receive the alert ID, 22 22 00:01:00,520 --> 00:01:02,690 because you need a way to find 23 23 00:01:02,690 --> 00:01:05,233 the alert you wanna delete on your database. 24 24 00:01:06,090 --> 00:01:07,180 Now that we've got that button, 25 25 00:01:07,180 --> 00:01:10,270 we can go over to our views and create our new endpoint, 26 26 00:01:10,270 --> 00:01:12,520 which is going to be called delete alert 27 27 00:01:12,520 --> 00:01:14,963 to match that url_for we just typed out. 28 28 00:01:16,700 --> 00:01:18,960 We don't need methods get and post, 29 29 00:01:18,960 --> 00:01:20,860 because there is not gonna be a form 30 30 00:01:20,860 --> 00:01:24,310 that we need to submit in order to delete an alert. 31 31 00:01:24,310 --> 00:01:27,950 As soon as you click the button, the alert will be deleted. 32 32 00:01:27,950 --> 00:01:29,960 And that is because all we have to do 33 33 00:01:29,960 --> 00:01:33,770 in order to delete an alert is get it by ID 34 34 00:01:34,910 --> 00:01:37,663 and then remove it from MongoDB. 35 35 00:01:38,560 --> 00:01:40,697 And then we can return a redirect 36 36 00:01:40,697 --> 00:01:45,480 url_for of the alerts, like that. 37 37 00:01:48,860 --> 00:01:50,180 Yup, that's it. 38 38 00:01:50,180 --> 00:01:51,570 So now, when you click the button, 39 39 00:01:51,570 --> 00:01:55,600 you will instantly reload the page, essentially, 40 40 00:01:55,600 --> 00:01:57,890 but the alert will disappear. 41 41 00:01:57,890 --> 00:01:59,653 Let's run the app and give it a go. 42 42 00:02:03,500 --> 00:02:05,070 I've loaded the app here on the right 43 43 00:02:05,070 --> 00:02:06,710 and we've got a single alert. 44 44 00:02:06,710 --> 00:02:09,268 We're gonna permanently delete it, 45 45 00:02:09,268 --> 00:02:11,410 and as you can see, the page has reloaded instantly. 46 46 00:02:11,410 --> 00:02:12,713 The alert is gone. 47 47 00:02:15,430 --> 00:02:18,810 Whether that is the interaction you want in your app 48 48 00:02:18,810 --> 00:02:21,110 or something else, it's up to discussion. 49 49 00:02:21,110 --> 00:02:23,660 Maybe you do want something like a model 50 50 00:02:23,660 --> 00:02:25,740 to appear and ask the user, 51 51 00:02:25,740 --> 00:02:27,910 are you really sure you want to delete this? 52 52 00:02:27,910 --> 00:02:29,800 But, when that happens, 53 53 00:02:29,800 --> 00:02:32,390 that is normally all done with JavaScript, 54 54 00:02:32,390 --> 00:02:35,083 so we're not gonna be looking at that in here. 55 55 00:02:36,470 --> 00:02:38,890 Another option would be that when you click the button, 56 56 00:02:38,890 --> 00:02:42,360 you get sent to another page which shows the confirmation, 57 57 00:02:42,360 --> 00:02:45,260 and then that page also has a button that you click 58 58 00:02:45,260 --> 00:02:47,440 and that actually performs a deletion. 59 59 00:02:47,440 --> 00:02:51,030 The flow in that case would be that in here, 60 60 00:02:51,030 --> 00:02:53,870 this button would take you to a different url_for, 61 61 00:02:53,870 --> 00:02:55,720 something like alerts.confirm_delete. 62 62 00:02:57,950 --> 00:03:00,700 The confirm delete would render another template 63 63 00:03:00,700 --> 00:03:04,590 which has the, are you sure you want to delete this thing? 64 64 00:03:04,590 --> 00:03:07,570 And that has a button which would be like this one, 65 65 00:03:07,570 --> 00:03:08,920 and when you click that button, 66 66 00:03:08,920 --> 00:03:10,920 the alert would instantly be deleted 67 67 00:03:10,920 --> 00:03:14,770 and you would be sent back, probably to the index. 68 68 00:03:14,770 --> 00:03:16,050 Again, just another flow, 69 69 00:03:16,050 --> 00:03:18,890 something you could do if you wanted in your application, 70 70 00:03:18,890 --> 00:03:22,360 and it's not all that complicated either. 71 71 00:03:22,360 --> 00:03:25,170 And your users are already expecting 72 72 00:03:25,170 --> 00:03:27,240 something like a confirmation on the app, 73 73 00:03:27,240 --> 00:03:29,253 so it's not a bad thing to add that in. 74 74 00:03:30,840 --> 00:03:32,970 But as you can see, this all works, 75 75 00:03:32,970 --> 00:03:35,670 so we're ready to move on to the next video. 76 76 00:03:35,670 --> 00:03:36,723 I'll see you there.