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
19. Storing endpoint edits
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
right so to finish this up we just need to send a request through to actually patch this of course we're going to need another controller for this so let's go ahead and make out a controller called endpoint update controller or we could call this endpoint patch controller let's call
00:15
it update because that fits more with laravel so let's head over to our web roots and go ahead and grab this and let's set the http verb to patch and of course switch the controller out here now we can head over to the controller go ahead and add in our constructor with our middleware so of course that's just going to be auth and we'll implement the functionality for this and
00:40
then handle the authorization of this a little bit later so we're going to get a request in here and we're going to get our endpoint in here as well great so let's just pull the model in for that okay so once again i'm just going to die dump and let's die dump on the endpoint and let's see what we get so we know to submit a request here through this form we want to go ahead and say edit
01:04
form patch send this through to slash endpoints and then the endpoint id which we know we can get from the props props dot endpoint dot id and we want to go ahead and preserve the scroll position really important because if we've got lots of endpoints here and we scrolled all the way down we don't want to push the user to the top and on success we don't really need to do anything here
01:28
because we don't have anything to clear out all of the props that are sent back down through inertia are going to be back into that form by the time we've edited it and the new values will be in there so we can edit it edit it again and so on we'll double check that anyway okay so now that's done let's go ahead and just try this out so let's edit this to pro one and there we go we
01:49
get this after a very short delay we see this now what's actually happened here is we're sending multiple requests let's just take a look at this if we go over to our network tab and edit this and just put one let's check out how many requests are being sent now what is happening here why are we sending a huge amount of requests through to here well this is all in how we've set up the
02:12
watcher here we saw that this worked and it did call edit endpoint when we're watching on the edit form but what we're doing here is watching everything on the edit form not just the things that have changed so what we really want to be watching on here is the is dirty property now we can take a look at how this works by maybe just getting rid of this edit endpoint and console
02:38
logging on our edit form and if we just go over here over to the console let's edit this here now what we have here is we just open this up is dirty true now dirty means something has changed within this form that's all it means so that's really what we want to be watching instead of the entire form and all of these properties in here which can change via inertia as well
03:07
particularly when we submit it we have things like was successful and all that kind of stuff as well so let's watch is dirty instead now because this is a property with a value and not a ref or a reactive object what we need to do is just return this from a closure just here so let's see how that changes i'm just going to go ahead and pull up the network tab again and let's edit this
03:30
to say pro one we should see that died and dumped but now we don't see the multiple requests again and again and again so this is working nicely of course it also works with a frequency as well we get a very slight delay here but of course the user is not really going to notice that 500 millisecond delay okay so now that we've done that we're actually sending requests down to the back
03:51
end let's go back into our endpoint update controller and actually update this data so what we're going to do is grab the endpoint here we're going to update this with details from the request and that is just going to be the location and the frequency like so of course we're not validating or anything like that just yet we'll do that all from the form request so let's just
04:17
try this out let's get rid of our console here and let's edit this to say pricing instead now notice this jumped a little bit it moved up and down that's just to do with the updates that day how we change things around and how it's re-rendered we can sort that out by applying a default order to our endpoints directly on our model we'll look at doing that in a second
04:39
and let's change this over to five minutes as well so we've made some changes we're going to hit done and that has now changed give the page a refresh that has obviously persisted in the database now let's just really quickly tackle this site.php model and the endpoints that we have here let's just add a default order of latest onto this so the latest one is always at the top which
05:01
is this one here that means if i edit this now to say home for example it's not going to jump all over the place because we always keep these in exactly the same order so that's done and changed let's just flip this back to backslash and we're done okay so we still need to tackle validation here really really important uh so if we just go ahead and make out a form request for
05:24
this so let's make a request called endpoint update request and we come over to our endpoint update controller and we just switch this out first and then we open this up let's go ahead and look at the rules for this now this is going to be exactly the same for when we stored an endpoint so let's open up the store
05:54
request here and pretty much just grab these rules and put them in place here we have a location that's required a frequency that's required and of course we want to validate against the endpoint frequency enum really really important we could also include the validation message underneath here as well i'll leave you to go ahead and do that if you want to i'm not going to include it
06:17
in here okay so let's go ahead and just edit this and just get rid of this you'll notice that we get a 403 of course because we have created a form request and by default authorization is false but let's go ahead and just change this up to an empty uh string and of course nothing will take effect because our validation rules are now in there but if they do pass then we're just going
06:39
to see this updated okay so the last thing to do and pretty easily now that we have authorized already a couple of things is look at authorization so really the first thing to do is head over to our endpoint policy go ahead and check if we're allowed to patch or update this so let's just go ahead and say update and the condition is exactly the same whether we own that site is determining
07:02
how or if we can update that endpoint so really all we need to do here is go ahead and just grab the user check if they can update this endpoint and we're done so let's go over to edit this to say home change the frequency to five minutes hit done and everything has changed nice inline editing very very easy with inertia
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.