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
57. Adding mentions to the reply form
Episodes
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
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.
62 episodes•6 hrs 54 mins•2 years ago
Overview
Ready to build a forum with Inertia and Laravel?
Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.
So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!