Build An Uptime Monitor with Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Already a member? Sign in to continue

Playing

18. Applying a watcher to the endpoint form

Episodes

0%

Your progress

Total: 4h 59m
Played: 0m
Remaining: 4h 59m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project

02. Sites

03. Site and dashboard setup

04. Building the site selector dropdown

05. Making use of API resources

06. Setting the default site

07. Setting up Vue modals

08. Creating a site

03. Endpoints

09. Setting up endpoints

10. Enum endpoint frequencies

11. Creating the endpoint form

12. Storing an endpoint

13. Validating and authorizing endpoint stores

14. Normalizing the endpoint location

15. Displaying endpoints

16. Deleting endpoints

17. Toggling inline editing for endpoints

18. Applying a watcher to the endpoint form

19. Storing endpoint edits

04. Checking endpoints

20. Determining endpoints to check

21. Creating a job to perform a check

22. Making an HTTP request

23. Scheduling checks every second

24. Setting up the check relationship

25. Updating the job

26. Showing the last status

27. Expanded list of checks

28. The response body modal

29. Authorizing the endpoint details

30. Calculating uptime for endpoints

05. Queuing

31. Setting up queues

32. Queuing the endpoint check

06. Email notifications

33. Setting up email in Laravel

34. Site model email notification storage

35. Adding email addresses via the UI

36. Listing and deleting email addresses

07. Downtime notifications

37. Observing when to notify

38. Creating an endpoint down notification

39. Creating an endpoint recovery notification

40. Making the emails a bit friendlier

08. Extras

41. Deleting sites

42. Eager loading

43. Recovery notification bug

44. No sites fix and placeholder

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.

Episode summary

In this episode, we focus on setting up a watcher on our endpoint form so we can react to changes in the user's input smoothly and efficiently.

First, we create an edit form using Vue's useForm composable, setting initial values for fields like location and frequency based on the props we get from the endpoint. We also ensure these fields in the form are properly connected to the correct data using v-model, so anything the user changes in the form gets reflected automatically.

Next, we tackle the problem of monitoring changes. Using Vue's watch, we set it up so that whenever any field in the form changes, something happens (like sending an API request). However, there's a catch: without taking action, every keystroke could send multiple requests in quick succession—which isn’t ideal!

To solve this, we introduce the lodash.debounce library. This lets us wrap our API-calling function so that it's only triggered once the user has finished typing (or making changes), with a 500ms delay. That way, rapid input doesn't overwhelm our backend, and the update process feels much smoother.

By the end of the episode, you'll see our watcher and debounce in action—changes to the form trigger the debounced handler correctly, reducing unnecessary API calls. Next time, we’ll actually wire up the API request to save the changes!

Episode discussion

No comments, yet. Be the first!