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
18. Applying a watcher to the endpoint form
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
Just before we get to actually storing these changes when they're updated,
00:04
let's look at how we can watch for changes in here. And obviously the first thing that we need to do is put in a form that represents the data in here that we can watch, but also put in the initial values as well, which isn't too tricky. So the first thing to do would be to create out a form to represent these.
00:21
We know that that comes from the UseFormComposable under Inertia View 3, and we can just create this down here somewhere, it doesn't really matter. So we're going to call this EditForm, and that's going to, of course, use UseForm. And in here we have a location, I think we called it. Let's just set that to null for now.
00:39
And we have a frequency, and we'll set that to null as well. So we're going to hook these up in here. So this is our location, Vmodel, EditForm, and location. And then down here, we have our select, which is going to be the frequency. So EditForm, frequency. Okay, so at the moment, this is not going to look great.
01:04
This is empty because we have a null value. And of course, there's nothing in here. So the initial thing that we need to do is set these. Now we know that we've got our props here with our endpoint. So really, we can just say props endpoint in here and location.
01:20
So it's as easy as that to grab the current location. And for the frequency, we need some slightly different data. Remember when we set up our endpoint resource before, we included the frequency label because that's what we're outputting,
01:36
but we didn't include the frequency value. So let's go ahead and change this up to create a value in here that we can use for the value of the form. So for this, we're just going to access the property here. What we could technically do is split this out to a variable,
01:51
so we don't have to use from twice. But let's just leave this how it is for now. So we're going to grab the frequency value from here. So props, endpoint and frequency value, and that should work nicely. So let's edit this. Okay, that's looking good.
02:07
Let's go ahead and create this to do at 30 minutes intervals. And then when we edit this, sure enough, it matches up and we see 30 selected by default. Okay, so now it's time to watch for changes. So when we make changes to these, this automatically saves.
02:23
We're not going to save it in this episode. We're going to do that in the next part, but we need to figure out how many requests we're actually sending here. So I'm going to pull up my console because we need to keep an eye on
02:35
when we edit this data, how frequent is this going to go ahead and pick this up when we use a watcher in Vue. Then we're going to go ahead and pull in the load-debounce package to make this a little bit more efficient.
02:47
So we're not sending too many requests to the API. So we first need to be able to watch this form. So let's go ahead and pull in watch from Vue, that's native to Vue. And then down here, we can simply call watch,
03:00
pass in the edit form, and then have a callback in here that will go ahead and do something when any of these two pieces of data change. So let's say send API request in here, and let's head over and check this out. So if I edit this and type abc,
03:15
you can see that's potentially sending three requests just to update this. When we update this, of course, there's only ever going to be one request, which is absolutely fine. But we need to debounce this so we don't get too many requests being sent to the API.
03:30
So we're going to go over and pull in the load-debounce package. Let's install this, and let's take a look at how to use this. So we'll pull this into here, import debounce from load- and debounce. And we're good to go and use this.
03:45
So what I'm going to do is split this out to a separate function. So let's say edit endpoint. And let's create this out here. And then we're going to call this from here.
03:59
So let's move this console log and then call edit endpoint directly from here. We're going to debounce this because if we debounce the callback in the watcher, that means that any other code we write in here will also be slightly delayed. And that's something we might not want.
04:16
So to use the debounce package, we're just going to wrap this callback in this debounce package. And as the second argument, we're going to give a millisecond delay. So basically, this will be 500 milliseconds or half a second
04:30
from the last invoked or first invoked callback, which means that if a user takes their fingers off the keyboard while they're typing, and that lasts for 500 seconds, we're then going to invoke this callback. Basically, what this does is slows down the amount of requests
04:46
or the amount of times this is called just to make things a little bit more efficient. So let's try this out. Now that we've pulled that in, we can close this off. And I'm going to go ahead and edit this and just type in ABC at my normal typing speed.
04:59
You can see that that has technically now gone ahead and potentially sent one API request. If I do this slowly, of course, there's a 500 millisecond delay between each one. So that's going to send three requests. But at a normal typing speed, 500 milliseconds is enough just to detect this and send a request.
05:20
And of course, this still works as normal as well. OK, so now we're debouncing this. Of course, it's time to come to the next episode and look at actually sending the API request through to update this.
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!