This episode is for members only
Sign up to access "Build An Uptime Monitor with Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
41. Deleting sites
Episodes
01. Introduction
02. Sites
03. Endpoints
09. Setting up endpoints
4m 23s
0%
10. Enum endpoint frequencies
3m 50s
0%
11. Creating the endpoint form
12m 58s
0%
12. Storing an endpoint
7m 21s
0%
13. Validating and authorizing endpoint stores
7m 6s
0%
14. Normalizing the endpoint location
6m 4s
0%
15. Displaying endpoints
6m 22s
0%
16. Deleting endpoints
6m 21s
0%
17. Toggling inline editing for endpoints
5m 12s
0%
18. Applying a watcher to the endpoint form
5m 31s
0%
19. Storing endpoint edits
8m 56s
0%
04. Checking endpoints
20. Determining endpoints to check
2m 57s
0%
21. Creating a job to perform a check
3m 21s
0%
22. Making an HTTP request
3m 39s
0%
23. Scheduling checks every second
4m 27s
0%
24. Setting up the check relationship
3m 14s
0%
25. Updating the job
2m 10s
0%
26. Showing the last status
12m 50s
0%
27. Expanded list of checks
14m 10s
0%
28. The response body modal
2m 49s
0%
29. Authorizing the endpoint details
2m 27s
0%
30. Calculating uptime for endpoints
8m 29s
0%
06. Email notifications
07. Downtime notifications
Transcript
00:00
So let's implement the ability to delete a site.
00:03
If we come over to our dashboard here, just underneath here, let's create out a div here with a button and just say delete site, not delete delete. Let's just make sure that's in the right place.
00:14
That looks good. And of course, let's go ahead and just separate this out with a margin top of 6. And we'll go ahead and style this button up really quickly.
00:23
So let's set the text to red and the text to small. And we should be good. Okay, I think that looks fine. Okay, so when we click on this, we wanna call a method.
00:33
So let's say V on click, and let's call a method or function in JavaScript called delete site. And we will go and create our function in here.
00:42
I'm just gonna go ahead and indent all of this just to keep a little bit of consistency here. And let's create out that delete site function. And that's just gonna have an inertia request on it
00:55
to go through and delete a site and redirect us over to the last site over on the dashboard. So while we're here, we'll just implement a very simple window confirm
01:06
and just say you sure. Of course, we could do better than this. And then we wanna go ahead and delete the site. So let's just try this out, hit delete site.
01:13
We can cancel that off or we can hit OK. Okay, so let's create out a controller to handle this. We're gonna cancel all of this off because we don't need our queue or anything just yet.
01:24
And let's create out a controller for this. So make controller site destroy controller. And we're good. Let's hook this up to a web route.
01:35
And we'll come down here to sites, copy this down, change this to delete. Of course, we want root model binding in here to pick the site.
01:45
And that's gonna go to the site destroy controller. Let's open this site destroy controller up, implement the middleware that we need, which is just gonna be that we wanna be authenticated.
01:57
And in the invoke method, bring in the request, which we'll switch out because of course we need permission and bring in the site that we want to delete as well. Now to delete a site,
02:07
we're just gonna delete it directly from the database. We don't have soft deletes or anything in here at the moment. So we're just gonna delete that.
02:14
Because when we set up our endpoints table, so let's just open up our endpoint table migration, we set the cascade on this foreign key, for site ID.
02:27
So basically when a site is deleted, all of the endpoints are deleted. And then when the check is deleted, or when the endpoint is deleted,
02:37
all the checks will be deleted as well. So we can do that either at the database level or the code level. In our case, we chose the database level.
02:45
Now we're not gonna return back because there's nowhere to return back to once the site has been deleted. So we're gonna go ahead and redirect back over to a root.
02:53
And that's just gonna be our dashboard. So let's try this out by hooking this up within our dashboard here. And we should be good.
03:00
So we're gonna make sure that we've got the inertia object pulled in, which we don't at the moment. So let's go ahead and import inertia from inertia.
03:12
And I've just noticed these could be combined. So let's do that now. There we go. And let's go ahead and delete the site.
03:20
So we just wanna say inertia delete. We wanna go through to slash sites, and then we want to pass the site ID in. We know that we've got this stored in props,
03:29
props site ID. So props, site, data, and ID. And we should be good. We don't need to preserve the scroll position
03:38
or anything like that because we're just gonna redirect the user back over to the dashboard. So let's give this a refresh and try it out.
03:45
I'm gonna do this on AlexGS. Hit delete site, hit cancel, it doesn't delete it. And if we hit okay, that deletes it and forwards us over to the dashboard,
03:54
giving us the first site or the latest site that we visited. So in this case, we're back to codecourse.com. Okay, so really importantly,
04:02
we're gonna go back over to the site destroy controller and we're gonna update the request so we can authorize this, really important. And it's something that we've already seen before,
04:10
so it's not too much trouble. So we're gonna go ahead and make our request in here, make request, and this is gonna be site destroy request. And let's go ahead and switch this out,
04:22
site destroy request. Let's open this up. Of course, we don't need any validation rules, but we do need to authorize that a user can delete a site.
04:30
Once again, we're just gonna go ahead and implement a new method on this policy. So we're just gonna say destroy. So we're just checking if we can destroy the entire site.
04:40
Does the user own the site? In this case, it's exactly the same check as we've already used. So let's go ahead and say this user can destroy
04:50
and pass the site in that we get from root model binding. And that's it. So I'm gonna go ahead and create a new site here. Let's just bring back AlexGS
05:00
and yeah, actually pass the URL in properly. There we go. And let's go ahead and delete this straight up. And there we go, it's gone.
44 episodes•4 hrs 59 mins•1 year ago
Overview
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects.
This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down.
In this course, you'll learn to:
- Build a real app from scratch with Inertia
- Work with Laravel queues
- Perform actions on models at user-defined intervals
- Work with sub-minute schedules in Laravel
- Send out channel notifications with Laravel
- Use API resources to simplify Inertia data
- Organise apps with events and observers
- Create modals in Vue
- Perform inline editing with Inertia forms
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.