This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
20. Handling deleted users

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

Transcript

00:00
Since we've got a few users here to play around with, we're now going to look at handling users that have been deleted. So if we head over to this discussion
00:07
here, let's go ahead and delete Fred, because he's the latest as well, so appears here. And we can modify that behavior too. So we're going to go ahead and delete Fred's account
00:17
from the database, which is just how this would happen if he were to delete it from the UI. And now that we've done that, the post isn't actually deleted, remember.
00:26
The user ID is set to null. Now that's going to completely break things over here, because we are accessing that user property, and we can't read his avatar and any other information.
00:37
So let's work on the post component first, and just check where we're referencing the user. We've got the first one here, which is the image. Now, we're going to go ahead and use the null safe operator
00:47
on this, which will technically just return or give us back a null value for this. And we can do the same for the username as well. Now, if we go over and just give this a refresh,
00:57
sure enough, that works, but it doesn't look great. We don't have any information in here about what's going on. It just looks a little bit of a mess. So for the username, what we can do
01:07
is just write in here, user deleted. And we can even create a component for that, because we're going to have to repeat this in a few places, but we'll leave it at this for now.
01:18
So user deleted. So it's a little bit clearer now that this user has actually been deleted. As for the image, we can actually just get rid
01:25
of the avatar altogether. So we can do this directly within here. So we can say vif post.user. That will just tell us if there is a user.
01:34
We still keep the spacing here because we've set the width on the outside container here. But now it looks a little bit cleaner because we're not giving it a broken image.
01:44
Now, if we go back to the homepage, this is also going to break because over on the discussion component, under where we're using the latest post,
01:53
we're grabbing the latest post username. So once again, we can do the same thing here. Use the null safe operator. And in here, just output a string that says user deleted.
02:05
Let's go over, give that a refresh. And there we go. Last post by user deleted. And we can click through,
02:10
and eventually we'll scroll down to the correct page and see that user. But there we go. That is just a really nice enhancement
02:17
because when a user deletes their account, we don't really want the context of a discussion to be missed. So I think this is a really important feature.
02:25
And we've just tidied it up now in the UI. So first of all, it works. And second of all, we can see that the user has been deleted.

Episode summary

In this episode, we tackle what happens when a user gets deleted from our app—the kind of thing that could definitely break the user experience if we’re not careful. We start by actually deleting a user (Fred, sorry Fred) from the database, just like it would happen from the frontend. When this happens, their posts stick around, but their userId gets set to null. Suddenly, any code that expects a user object (like for showing their avatar or username) is going to run into trouble.

So, we dive into the relevant components. First, we update the post component so anywhere we’re using the user object (like displaying the avatar or the username), we use the null-safe operator. If the user’s gone, we just display “user deleted” as their username and skip showing the avatar completely. That keeps things much tidier—no more broken images or blank spots.

We quickly set up similar logic anywhere else in the app that references a (possibly deleted) user, including on the homepage where we show the latest post. The whole idea here is to gracefully handle missing user info and make it clear in the UI when someone’s account is gone, without losing the context of their posts or causing errors.

By the end, we’ve got a snappy little enhancement: the app won’t break if a user goes away, and other users can clearly see when an account has been deleted. This is an important bit of polish for any community-driven app!

Episode discussion

No comments, yet. Be the first!