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

57. Adding mentions to the reply form

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

Our create discussion and reply form are pretty similar, but at the moment we don't have this mention functionality within here.

00:08

We know that we can pretty much add this to anywhere because we have our mention composable and we also just have that mentionable component from that package that we pulled in. So we're going to go and open up the create discussion form for reference here

00:23

and we're going to look for mentionable. And we can pretty much just grab this, go over to our create post form, find our text area and go ahead and wrap this around so we can get rid of the VIF here because this makes up the entire part of our text area now.

00:43

End that off and we can just bring in all of this functionality very easily from our composable, because remember that just makes it a lot easier to reuse. So let's go ahead and pull in mentionable and use mentioned search over here

00:58

and we'll pull these in down here and let's go ahead and pull in our use mentioned search just down here underneath here. And that should just work now. So let's go over to reply and let's type a and there we go.

01:14

Great. So that is working really nicely. Let's just do a couple of little bits of tidying while we're here. And we're also going to go ahead and add in the automatic adding of the at when we click reply only on a post.

01:28

So when we click here, we're not going to have that. But when we click on a reply specifically, we will do. And that will automatically add the user that you are replying to just to make it a little bit easier to mention in there.

01:40

So if we add alerts to this later, then they'll be alerted. So let's first of all, if we just take a look at this and I type in something that doesn't exist, you can see no result looks a little bit odd. So let's speak about how we can customize this to make that look a little bit better.

01:56

So let's go up to our mentionable section just here and we can actually use slots in here really conveniently. So a slot in mentionable is no result. So we can create our template in here and much like we've already learned about

02:12

slots throughout the course, when we create our forum layout, we have a no result slide in here. So we can just add any markup we want in here. But I'm going to go ahead and set out a

02:21

mention item item and just say no username found. That's a little bit clearer in this case when we search. So let's try again and reply with Alexander. And again, we get no username found.

02:37

So a little bit clearer as to what's going on there. And we can add this over to our create discussion form as well. We have a little bit of duplication there, but it's not too bad. We might even want a different message here.

02:49

OK, so the last thing that we're going to do is when we hit reply on here, we want this automatic at to be in here so we don't have to manually do it ourselves. So what we're going to do is over on our create post or use create post composable as well as passing in the discussion

03:07

context, we're also going to take in the user context here as well. What that means we can do is very easily then reference that within our create post form, which, remember, exists as a completely separate component. So let's say user.

03:23

We could probably think of a better name for that, but let's just leave that as it is now. And we're going to set that value to the user context when we get that in. Now, we don't always want this because remember, when we hit reply from here,

03:36

we shouldn't really be passing a user in. So we're going to set that to null by default so it stays at null if we don't pass it in. OK, so now over in the post component where we let's just check that method name

03:51

show create post form and let's just look for that in here. We can pass in post and user that should set that nicely. Let's just check that everything is looking good. OK, so now technically over on the create post form where we used our create post

04:14

composable, we have access to that user, of course, as long as we expose that user down here as well. So we can pull that user in and then when we do something like toggle the visibility or we could just directly watch on the user.

04:34

So let's make sure we've got watch pulled in from view, which we don't. So let's import watch. From view in here, and then we're going to go ahead and watch on that user that gets set.

04:48

And. We can do something in here, so let's grab that user and let's just console log on this for now, just so we can see what's happening. So just to recap over on use create post, when we show the create post form,

05:02

we can optionally pass a user in within that context and then we can extract that user out from here, watching that we're going to console log when that changes. So if I click reply to discussion here, of course, nothing happens because we're not passing a user in.

05:18

But when I hit here, you can see we get that user object in here, which we can do something with so we can add them automatically by their username. So how are we going to do this? Well, there are probably other ways to do

05:30

this, but we could just overwrite the form body with the username first and then the rest of the form body after that. Now, there's a good reason we're doing this and I'll show you why in a second. But let's just fill in at and then user dot username and we should be good.

05:49

So pretty simple. If a user is being triggered as part of opening this use create form, then just add them to the start of the body. Let's try this out, hit reply and there we go.

06:00

We have Alex in there automatically. Now, the reason that we are adding the body in at the end is, for example, if I were to start typing something, say, hey, there, this is a reply. We know that this keeps state so I can close this off and click on this again

06:19

and it should just reopen and show us what we've already got. It's not actually working at the moment. So let's have a look here, see what's going on here. So it can't read user, it can hear.

06:32

But if we type something and close it. Yes, that should work. OK, so when I click on this, that's not working. So we probably just need to check in here if user.

06:45

Or if no user return. Let's just try this out. OK, so I'm going to hit reply here, I'm going to get rid of this and write, hey, this is a reply, then I'm going to close it.

06:58

Then I'm going to reply again. And you can see, sure enough, it just shows us the message here. And there we go. OK, so I think that's OK. We can always tidy this up.

07:08

And of course, you can change the functionality over if you need to. But generally, when we hit reply, we get the user in there and we can just start to reply. And then they get tagged in that post, so it's a little bit more convenient.

Episode summary

In this episode, we focus on bringing the user mention functionality to our reply form, making it more consistent with our discussion creation experience. We already have a handy mention composable and a mentionable component from a package we’re using, so it’s straightforward to reuse these in the reply form.

First, we copy over the necessary mentionable setup from the discussion form and wrap our reply textarea with it. After importing and adding the required composable, we test it out and see that the mention search is working nicely in the reply form.

We also take a moment to tidy things up, including customizing the message for when a username isn’t found during a mention search (making it clear to users what’s happening). We learn how to provide a no-results slot in the mentionable component, so our UI doesn’t leave users confused.

Next, we tackle a quality-of-life improvement: automatically inserting the @username into the reply box when you click reply to a specific post. This involves passing the replying user's context into the post form, watching for it, and updating the text box appropriately (without messing up user drafts or saved form state).

By the end of the episode, we have a reply form that supports mentions just like the discussion creation form, including a polished UX for no-results and auto-inserting usernames when replying to a post. This sets up a more feature-rich and user-friendly experience for everyone interacting with our discussion threads.

Episode discussion

No comments, yet. Be the first!