Build an Appointment Booking System With Inertia
This episode is for members only

Sign up to access "Build an Appointment Booking System With Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
29. Fetching future availability

Episodes

0%
Your progress
  • Total: 5h 0m
  • Played: 0m
  • Remaining: 5h 0m
Join or sign in to track your progress
01. Introduction
01. Introduction and demo
5m 45s
0%
02. A fresh Inertia project with Pest
3m 4s
0%
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
20. Employee and service resources
9m 7s
0%
21. Listing employees and services
8m 58s
0%
22. Showing services for an employee
8m 7s
0%
23. Scaffolding the checkout
8m 37s
0%
24. Making an employee optional
3m 38s
0%
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
33. Hooking everything up to a form
4m 42s
0%
34. Setting an employee for the service checkout
7m 30s
0%
35. Adding booking details
3m 55s
0%
36. Storing an appointment
8m 28s
0%
37. Handling appointment collisions
8m 37s
0%
38. Showing the confirmation page
8m 39s
0%
39. Cancelling an appointment
3m 49s
0%

Transcript

00:00
OK, there's quite a bit of work we
00:02
need to do to get the dates rolling from when we navigate through each month. So ideally, what we want to end up with is a month loaded in advance. That kind of makes sense. And when we navigate past these months,
00:17
we then want to change the availability date over in our checkout controller just here. Now, the reason we want to do that is we don't want to say something like add year. The reason being is that with any amount
00:32
of data, even how simple this is just going to add huge amounts of data to our page. If I did say add year and give this a refresh, you can see that the loading time of this has significantly increased and it's just not worth it. So we are only going to load in the next month when we specify this.
00:50
Let's swap that back to add just a month and let's get started. Now, before we do anything with this, we want to work out how we can hook in to this date changing. So after this is mounted and after we've created the picker,
01:06
we're going to reference the picker, which we created a variable for at the top. And we're going to say on render. Now, that might seem a little bit weird, but every time we switch months, we get a render event called.
01:18
So let's go ahead and just pull this out into a function, set this as E and we'll just console log on this event. Let's see what happens when we navigate. Now, let's go and just hit the next month.
01:31
And you can see, yeah, sure enough, we get a couple of events in here. And as part of these custom events, we get this detail in here with this view. Now, what we want to do is only tie this down to one of these events just so it doesn't trigger twice and we don't send another request over using inertia
01:49
to fetch this twice. So what we're going to do inside of this is we're going to have a little if statement to say if detail view is and we're going to pick the container, the overall container being rendered.
02:04
So now what we should get is the following. When we choose a next month, we just get one event for each month and then we go back and we want to load in the additional data. So inside of here, what do we do?
02:20
How do we load this data in? Well, what we can use is inertia's router and we can add on a query string to this request to then within our checkout controller only load this within specific region. So let's go ahead and first of all, look at the date that this gives us.
02:38
So let's say console log E detail date, which we just saw in the console. And let's format this to the format that we expect on our back end, which is YYYYMMDD. So let's go over and try this out.
02:52
So when I navigate from February, which is, of course, a second month, let's go over to the third and you can see we get the first of the third. So the first of March, first of April, first of May and so on and so forth. So basically, when we take this value and append it to the query string,
03:10
we just want to look from this month a month onwards every single time we get that request in. So let's make a request to our back end. It's not going to work at the moment because we're not picking this up. But let's do this with inertia's router.
03:24
So if we come up to the top, we're going to go and import inertia's router from inertia. We can use an access request for this as well. But since we're getting all of this data
03:36
within our controller, it kind of makes sense to just send this as a query string. Let's come down here and let's make this request. So let's say router reload. That's just going to make a request to the current page.
03:48
But with any additional data that we want to see and the data that we want to see, we're just going to call this calendar. So calendar is going to be the query string item that we're sending down. And that's going to be a detailed date.
04:00
And then we're going to format it once again. So MMDD and that would just send that across now. So let's go ahead and just take a look at what this looks like. So I'm going to go and hit next,
04:12
and you can see that that's been added to the query string. Now, what we want to be really careful of is the data that we are loading through. We don't want to load everything through here. So we're going to use only to just load in our availability,
04:26
just load in that new calendar value and just load in the next available date. We don't want to load in any user information or anything else that we're sending down as props, including the employee in the service, because there's no need to.
04:39
OK, so when this finishes, e.g. when we have a successful request, what we then want to do is re-render the calendar with the new dates. Now, at the moment, there's no point doing
04:52
that because over in our checkout controller, we're not taking this calendar request value into effect here and fetching them new dates. So let's go ahead and do that now. So we're pretty much just going to bring our request object into here.
05:06
And then from this, we're going to pass this using carbon. So let's say carbon and create from date. That's probably more appropriate. Pass in request and calendar.
05:20
We're going to say start of day. Let's make sure we just pull carbon in here as well. And for the second. You guessed it, it's going to be end of month.
05:32
So remember, we start at something like the first of January that gets passed in, and then obviously we want to go to the end of the month, which would be something like the 31st. So that will go ahead and now adjust
05:45
the periods that we're looking in as we navigate through the calendar. So let's go back over and just get rid of this calendar date in here and there we go. So we see this availability here.
05:55
But once we go down to the next page, this data isn't being updated or the calendar isn't being re-rendered. So let's go over to our checkout again and here we're going to re-render the calendar. So we're going to say picker and render all.
06:11
Now, let's think about what's going to happen here. When we render this, we are reloading the page. But when we render here, that's going to then trigger this event again and then do exactly the same thing.
06:24
So effectively, we're going to end up in an infinite loop of just making network requests. Let's try this out and see what happens. So I'm going to bring up my network tab here.
06:34
Let's go ahead and filter this by XHR request. Just get rid of our calendar in the query string and give that a refresh. OK, so I'm going to navigate to the next month. Let's see what happens.
06:47
And there we go. So we're now just triggering that render event and obviously just re-requesting that data every single time. Now, the way that we can get around this is adding another condition to this if
06:58
statement, and that is that the date that we are currently seeing within this event doesn't equal the calendar date that we're already on within our calendar, within the query string. So we're going to say e-detail date again that comes from that event.
07:14
We'll once again format this to the format that we expect. So month, month and day, day. Now, this isn't actually a string. So we're going to go ahead and cast this to a string.
07:24
First of all, before we say the condition is that it doesn't equal the calendar within the query string. Now, we don't have this at the moment, but effectively now what's going to happen is when we navigate, say,
07:37
from January to February, this is going to be February and this is going to be February, and if it doesn't equal the same thing, then we are going to go ahead and not render. Or if it does equal the same thing, we're not going to render.
07:49
We're just doing this in reverse. So let's go over to our checkout controller and just make sure we're passing down that calendar prop or that calendar date. So we're just going to say calendar like so.
08:02
And then we're going to go over to our checkout and pull this into our props. So calendar. And once again, that's just going to be a string. So I'll go over this in just a second if it doesn't make sense.
08:13
But let's again now keep an eye on our network request. So we'll go back to our first available date, which is today, and I'm going to hit next, we have one request next, we have another request and so on and so forth.
08:29
Now, we get a little bit of a delay here with the dates not being available because, of course, what we're doing is we're cancelling out the dates that don't have any slots. And when that data rolls in, it's just not available.
08:38
So it's showing it as not available or maybe fix that up later. But you can see here now we're just making one request for every month that we iterate through. So once again, if that didn't make sense, let's just take a look here.
08:50
The date as we render this or the month, let's just think of it in months that we render here is going to be here. And we only want to show this if it's different to the month that we're requesting.
09:02
Otherwise, there's no point in reloading that data. OK, so now that we've done that, we can now successfully navigate through an unlimited amount of months. We can go all the way into the future and it doesn't matter.
09:15
But now we have an issue. Now, the reason that this happens is that the availability for that employee doesn't exist. So we're trying to access a date that just doesn't exist.
09:27
Now, to get around this over in our checkout controller, we can just very easily say, well, if we don't have a first available date, just don't show anything. And then we just won't have a date in there.
09:37
So let's go and just try this again. So let's go all the way to the end of my availability, which is 2025. And as you can see, there we go. So now we just end at the point that my
09:50
schedule ends and if we go any further, the dates just aren't available. OK, there we go. We can now navigate through all of the dates in our calendar without having to upfront load them for an entire year.

Episode summary

In this episode, we focus on making our date picker smarter and faster—specifically, loading future availability one month at a time as the user navigates the calendar, rather than dumping a year's worth of data all at once (which would slow things down a lot).

We start by hooking into the calendar's render event, so that every time the user changes months, we're ready to fetch new availability data for just the month they're viewing. We set up event listeners, console log the output, and ensure we only make this request once per month switch (to avoid duplicate network requests).

Next, we use Inertia's router to send a new query string to the server for the month we care about. On the backend, we tweak the controller to handle the new calendar query parameter and use it to fetch only the relevant dates. We also pass this value back down to the frontend so we can keep everything in sync and make sure we're not endlessly re-requesting the same data (which would cause an infinite loop).

We end up with a calendar that gracefully lets users click through month after month, always showing the most up-to-date availability, and gracefully handling scenarios where a month has no available dates. It's a slick, responsive improvement over the old way—and crucial for apps with a lot of scheduling data!

Episode discussion

No comments, yet. Be the first!