Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

16. Adding the last reply to discussions

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

It's really helpful when viewing a list of discussions to see the latest post, just so you can click through to that and sort of catch up. So we're going to add that now.

00:09

Now for this, we're going to need a new relationship because remember over on the discussion model, we have the first post, we have all of the posts, but we don't have the latest post in here yet. OK, let's do a little bit of scaffolding over on the actual discussion itself just to output a link.

00:28

So for this, of course, we can use Inertia's link component. We're not actually going to link through to this yet for a very good reason. We don't know which page the latest post is on. It could be on page 10, for example, and we don't have a way to calculate and redirect for that yet.

00:45

So for now, what we're going to do is just set the href in here to go through to the discussion show page. And I'm aware that we're working within a link here, so we can pretty much use the same thing, but this will link to a separate place.

00:58

So we'll be able to click this individually as well. I'm not sure having a link inside of a link is a good idea, but we can always figure this out later. OK, so now that we've done that, let's just open this up quickly and fix that up.

01:12

And we want this to say last post by x at and then y. So let's have a look at this. Of course, it doesn't look great at the moment. So add a couple of styles to this.

01:24

We'll set this to inline. In fact, it's already inline. Add text small and we'll set margin on the top of three. So I think that's OK.

01:36

Probably bump that up a little bit more. And that doesn't look like it's working. Yeah, so that's why we need inline block. So we can actually style it like a block element.

01:45

OK, so how do we grab this information? Well, over in our discussion model, we can create out a latest post relationship. So let's say latest post. And for this, we can use the has one relationship type.

02:01

But remember, that's not quite going to work on its own. So using has one here is just going to give us the first post in the list. What we need to do here is use the latest of many. What that's going to do is it's going to find the latest of many like we would use in post,

02:18

but then it's going to return it as a single item, which is really useful. This is a relatively new relationship modifier within Laravel. So now we have the latest post. We can add that over on our discussion resource.

02:31

So let's say latest post. We can still use our post resource and when the latest post is loaded. So over on the forum index controller, let's add our latest post. And we need to be careful here because we're going to check our debug bar.

02:48

When we're accessing the user data of that latest post, we're then accessing more relationships. So we need to be careful that we are egoloading everything in that we need. So we're going to open this up for the first time and just check things out in a second.

03:02

Let's actually output the data for this first of all. So over on the discussion, what we should now have if we just dump this out is the latest post. And because we're reusing that resource, we have all of the information that we could need in here. And we don't actually have the user just yet.

03:19

So over in the post resource, we know we are outputting the user, but only when it's loaded. So if we go over to our forum index controller, we're going to say .user. So what we're now doing is not only loading the user within the latest post, we're also loading the latest post as well.

03:38

So if we just go over and give that a refresh, there we go. We've got the latest post user in here as well as all of the other information plus the created app in that specific format that we gave it in, which is really helpful. So we have everything we need now to pull this together.

03:53

So let's output the time first of all, latest post or discussion, latest post, created app and human. And for this, it will be discussion, latest post, user and username. Let's head over. And there we go.

04:13

Last post by AlexGS at 19 minutes from now. So we can just get rid of app there. And that works nicely. Now we're going to go ahead and improve the way we output these dates and times.

04:26

And we're actually going to wrap these in time elements. And I'm going to show you why this is a lot better way to do things. It's not going to have any effect at all. But what we can do with this is we can actually add in or bind in a date time

04:40

that looks like an actual date time. So we can use that in there and say date time. And what that's going to do is give a more accurate representation of when this was posted. What we can then do is do the same thing for the title of this,

04:57

which means that conveniently when we hover over this, we can see the actual date and time this was posted. Just a really small improvement there. But it's something that we should get into the habit of doing

05:08

whenever we are dealing with dates and times using these. So we know the exact date and time so it can be read properly. So we can do the same thing here for over on our discussion show page. So let's find that human time that we were outputting.

05:23

Oh, no, it was on the post, wasn't it? So each of the posts has when this was posted just here. So again, we can wrap that in time. And we can go ahead and bind in date time.

05:38

And that's post created at and date time. And we can add the title and bind that in there as well. So bind that into the title and we should be good. So now if we click through, there we go.

Episode summary

In this episode, we're improving our discussion list by adding info about the most recent reply for each discussion. Having this feature makes it super easy for users to spot the latest activity at a glance and quickly jump into the conversation.

To get started, we introduce a new relationship on our Discussion model so we can easily access the latest post associated with that discussion. We use Laravel's convenient latestOfMany relationship (which is relatively new), instead of just hasOne, so that we always get the most recent post instead of just the first one.

Once that's on the backend, we tweak the frontend to show the username and timestamp of the last reply in a nice, readable format. We also pay attention to eagers loading all related data to avoid extra database queries. Then, we improve the way we handle dates and times by wrapping them in semantic <time> HTML elements, which is not a huge visual change but does make our markup more accurate and accessible.

By the end, you'll see the "Last post by X at Y" info in your discussion index, nicely styled, and in a way that's easy to scan and click through to dive right into the latest conversation.

Episode discussion

No comments, yet. Be the first!