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
44. No sites fix and placeholder

Episodes

0%
Your progress
  • Total: 4h 59m
  • Played: 0m
  • Remaining: 4h 59m
Join or sign in to track your progress

Transcript

00:00
you may have also seen this if you've been following along but if we don't have any sites so if we delete the final site that we have what we actually end up with on the home page here is
00:10
an error and we also just see if we just get rid of this when we do fix this we will see just an empty page so we're going to fix up this issue here and then we're of course going to go on to show a little placeholder to prompt the user to create a site so this issue here as we can see from here comes from this just here we don't have a site so we can't access the endpoints on a site
00:38
so what we're going to do is head over to our dashboard controller and we're just going to add a little ternary on here to say well if we do have a site of course go ahead and grab the endpoints otherwise just set the endpoints to null let's come over and give this a refresh and here we see cannot get property id on null that comes from the site resource itself just here so we
01:02
need to fix that one up as well maybe not the cleanest solution but we can figure it out and let's give this a refresh now we end up with a sort of empty page so if we come over to our console here what we see is cannot read data on a certain thing and that is this site at the top we know that over on the dashboard so if we go over to the dashboard page at the very top here in the
01:24
header we're saying site data domain we want to make this an optional because if we can't access the site then we don't want to access any of these properties either so let's give that a refresh and we still end up with an empty page but that's for a different reason that is we are trying to access endpoints and there's no need to so what we're going to do here is go and wrap a conditional
01:47
around all of this stuff here if we don't have any site available so let's create a template out here a template out here to wrap all of this all the way down quite a lot here but that's okay here and let's go all the way up here and indent this there we go and this conditional is going to be if we don't have a site then we're going to have a little placeholder in here
02:15
not forgetting to add in the v else in here as well so let's go over give this a refresh and there we go so at the moment we don't see a title which is fine you can even add something in there in its place we only have the option to add a site but we also have a placeholder in here prompting the user to add in their first site so let's go ahead and keep this paragraph in here
02:37
we'll set the text to center change the text to just say grey 500 set the font to semi-bold and let's make the text small and let's swap this out to say no sites yet create one to get started and of course you can change that to look however you want so there we go if we don't have any sites available the first thing that we do is fix up the fact that we're passing down these two pieces
03:05
of data which doesn't make sense because we don't have a site in here all of these values will be null and then go ahead and wrap all of our dashboard in a conditional because there's no point listing through endpoints if we don't have a current site selected and then finally just adding in a little placeholder to prompt the user to add their first site

Episode summary

In this episode, we tackle an issue you might have spotted if you've ever ended up with no sites left in our app. When the last site is deleted, the homepage throws an error because there's no site data to show or endpoints to list out, which clearly isn't a great user experience!

We start by looking at why this error happens, diving into the dashboard controller code and noticing that it's trying to access properties on a site object—even when there isn't one. To fix this, we add some simple checks and use ternary operators to make sure we're only trying to get endpoints when a site exists. While refreshing, we still see errors popping up, so we hunt them down elsewhere (like the SiteResource and the dashboard's header code) and fix them by making our data access optional.

Once we've resolved the errors, our dashboard is technically "fixed"—but now just looks empty when there are no sites. So, next up, we improve the user interface by wrapping the main dashboard content in a conditional template, and showing a friendly placeholder message instead. The message encourages users to add their first site, and we tweak the styles to make it look nice and clear.

By the end of the episode, you'll see how to gracefully handle empty states in your app and give users a helpful nudge in the right direction when there's nothing to show yet.

Episode discussion

No comments, yet. Be the first!