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
36. Listing and deleting email addresses
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 just underneath the form here, I'm going to add in some pre-made markup.
00:04
You can grab this in the course resources. This is just for the list of email addresses that we currently have. Next to these is a button, which when we click on these, it's going to delete them. So we're going to show out each of the email addresses and also then have the ability to
00:20
delete these. OK, so first things first, showing the email addresses. Now, how are we going to get this data? Well, on our site resource, we can easily pass down these notification emails and we
00:33
know that they're an array. So let's go ahead and say this notification emails and we should be good. So let's go ahead and grab this. Just dump these on the dashboard really quickly.
00:46
Let's go over to the dashboard and let's go up here where we've defined our component and we're just going to say site data and notification emails. We should see all of the emails in there and we can just start to iterate through these. We're actually going to pass these down as a prop to this email notifications component
01:04
because we've split that out. So let's send that down as an emails prop into here. So over to our email notifications under props, let's go ahead and say emails and that's going to be an array of data.
01:16
Now we can just start to iterate through them. So we're going to iterate through each of these list items, but we only want to show this if there are emails. So let's just do a quick condition on here and say emails.length and then down here,
01:29
let's go ahead and say v4 email in emails. We'll key this by the email itself because we know that's always going to be unique and of course what we should see now are two emails in here with the ability to potentially delete them.
01:43
So let's go and replace this out with the email and there we go. We should see two of them. It's not quite updating properly at the moment. Let's just cancel this off and try again and that's pretty much it.
01:58
So we've now seen all them emails. Let's go ahead and just add a new one in here. So fred at codecourse.com, hit add and there we go. Everything's being updated of course without the page refreshing because Inertia is just
02:11
repulling in all of that data. Okay, so now that we have got these emails in here, let's look at deleting them. Of course, we're going to need a web route for this. So let's go ahead and just copy what we have here, switch this to delete and what we're
02:26
going to do in this case is allow a particular email to be passed in the query string and then go through and delete this. So this is going to be called destroy controller. Let's copy this, go ahead and make out a controller for this, make controller, paste that in and
02:44
we'll rebring that into here. Okay, so over here, same deal. We have a constructor here with our middleware. We of course need to authorize this request as well which we'll get to.
02:56
Let's create out our invoke here and it's just die dump and say delete. We'll also pass down the email that we're actually going to delete as well. We also need the site in here as well because we need to update the list of emails on that particular site and let's go ahead and say request and email.
03:18
Great. Okay, so we can hook this up now because we've got our route and our controller. So when we click on this button, so V on click, what do we want to do? Well, once again, we don't need a form for this.
03:29
What we can do is just import inertia in. So let's go ahead and import inertia from inertia in here and we should be good. So we should just be able to send a delete request down with this. So inertia delete and we know we want to go through to pretty much the same endpoint.
03:47
So we can just copy what we have here, go ahead and paste that into here and we know that we want to send the email down. So we can actually just put this onto the query string here and say email equals and then we want to go ahead and pass in the email that we're currently iterating through in
04:06
that loop. So whichever one we click on, it's always going to be for that particular email address. Now we also want to pass down that we want to preserve the scroll. So let's go ahead and do that and we should be good.
04:16
Let's test this out. Okay. So we're going to go ahead and click on this and we get fred.cocos.com, click on this, we get mabel.cocos.com and so on for all of the email addresses that we have.
04:28
Now we need to do is just update how this deletes. Now again, we don't have a relationship here so we can't exactly detach this like we normally would be able to. So we're just going to go ahead and update the site again and update the notification
04:42
emails property in here. And that's going to be using the native array diff function which will give us the difference between the array that we pass in plus another array that we build up and that's going to create the difference between them too.
04:59
So basically, the already existing notification emails in that column plus a new array which is just going to be the email address within array on its own that we have. Just to give you a demo of that, let's go ahead and just die dump on what we've done here before we carry on.
05:19
So if we go over the difference between all of these plus this with fred in is going to be Mabel and Alex and that just will effectively delete it from the list. So let's go ahead and do that, return back and we should be good. So let's go over, try this out.
05:36
So I'm going to delete fred and yeah, that's not doing anything. Let's have a look here. Notification emails, of course. And let's try that again.
05:43
There we go. There we go. And there we go. We end up with no emails in the list.
05:48
Great. Okay. So obviously, we also want to go ahead and validate and authorize this. So let's create out a new form request in here.
06:01
So site notification email destroy request and let's go ahead and add that in. Site notification email destroy request. Open that up. Authorize is pretty much going to be the same as the other one we created store.
06:21
So store notification channels, but we can copy this. And if we go over to our site policy, we could create a new one or we could just create one generic one. So let's say destroy notification channels.
06:33
So can this destroy? We just come over and paste this into here and change this to destroy. We're pretty much done. Okay.
06:42
So for the rules, it doesn't really matter too much, but we're going to go ahead and say that this is a required field and it also is an email. We're not going to say it already exists because the array diff will just give us back the list of email addresses that are in there anyway.
06:57
So we're not too worried about that. Okay. So if we go over, let's just add in an email address in here. And let's add another one.
07:08
And let's just check this out. So let's delete Mabel. That looks good. And that is working nicely.
44 episodes•4 hrs 59 mins•2 years 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!
Episode discussion
No comments, yet. Be the first!