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
51. Adding mentionable functionality to forms

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
There are loads of moving parts to mentioning users in our discussion posts. So over the next several episodes, we're going to be pulling all of this together.
00:10
But first of all, we're going to take a look at the package that we're going to be using to help drive this. And we're going to install it, put it on our create discussion form, and we can add it to our reply form as well later
00:23
and just figure out how this works and what kind of data we need and just generally how we're going to pull this together. So before we do anything, I'm just going to head over to the create discussion composable that we created.
00:36
And I'm going to set visible to true once again, just so this always shows up. It's going to be a lot easier for us to work with it this way. So over on GitHub, this is the package that we're going to be using. View mention this uses floating view
00:51
behind the scenes to show the list of things that you want to show on this mention functionality. That could be absolutely anything. It doesn't have to be users.
01:02
But of course, that's how we're using this. So let's go ahead and install this, get it on the page and just see how it works. So we need to pull the package in, of course, obviously. And we also need to pull in floating view as well.
01:16
And we also need to include the floating view styles. We've done this for something else as well over in AppJS. It was the markdown toolbar element that we imported directly here. But we're going to import the styles directly here as well,
01:29
or we can include them over in app CSS. So that is the package pulled in. Let's close this off, because the rest of the way I'm going to guide you through how this works.
01:39
So we're going to head over to the create discussion form. And of course, we're going to come down to where our text area is, which is where we want to mention people in. Of course, later on, you could always include this in other fields if you wanted to.
01:53
But let's go ahead and just keep this in our text area just for now. Now, the way that we use this package is we go ahead and import it. So let's do that first of all. It's probably important.
02:03
So import mentionable from and view mention. Let's see if we can just autocomplete that view mention. And we basically just want to wrap our text area within this. So let's go ahead and just wrap mentionable around here.
02:22
And let's head over because nothing really changes at the moment. Nothing's really doing anything. We need to just specify some options in here. And let's just keep an eye on our console as well,
02:32
just to make sure that we're not getting any errors. OK. So the first thing we're going to add to this are the keys that are going to trigger the mention pop up or pop over. And for us, that's just going to be apt, although it could be absolutely anything.
02:49
For example, if you were building a Twitter clone, you would use a hash here to pull out a list of suggested hashtags. But for us, we just need an at symbol. The next option we can apply, which I'm going to do now is an offset.
03:01
This is just how far away the pop over sits when we actually do get a list of results and really importantly, are the list of items. So let's go ahead and just add in a list of items from here
03:13
without really doing much. I'm just going to write Alex. Of course, this is going to be an array, not an object. I'm going to write Alex and Alexander and Mabel.
03:24
Let's just see what happens now when we type apt. And yeah, there we go. So it is actually appearing. We just get no result here.
03:32
So I'm guessing that is just the way that I've structured the items here. I think in here we need a value and a label. So let's go ahead and create out yet an array of objects. And let's say label Alex, or that would probably in reality
03:49
be something like Alex and then the username, just so we know who we're mentioning. And then the value here would just be Alex. And let's go ahead and copy that. Over and we'll put Alexander.
04:06
There and then we'll do that Mabel one as well, so let's do Mabel. And Mabel. OK, so that I think is the structure we need. Let's go over and have a look.
04:16
I type out here. There we go. So we're automatically presented with a list of things that we can click on to add. But of course, we can start to filter this down as well.
04:26
So we can say M for Mabel, Alexander, and there we go. So really, the mentionable UI stuff is now working. Let's take a minute just to style this up and also style up the no result section as well, because by default, everything looks a little bit squashed.
04:42
So we're going to come over to app.css and let's just add some really rough styles in here just to make this look a little bit nicer. So just from memory, the mention item is called mention hyphen item. Let's just test that by setting a black background just to make sure.
05:03
And yeah, so it's mention item. So for each of these, we want to go ahead and set a padding on this. Let's do three. We'll set leading to none so we don't have any line height.
05:13
And let's set a cursor to pointer, because at the moment when we hover over them, we don't look like we're actually doing anything. And I think that looks OK. And then we want a kind of selected state as well.
05:26
So I think that is mentioned selected. We'll find out soon enough. So let's say background gray 100 and cursor pointer. And let's have a look.
05:40
And there. Yeah, there we go. So we can either use the arrow keys on the keyboard to go up and down, or of course, we can just hover over and click one. So there is our kind of mentionable functionality within the UI working.
05:55
However, we have a slight problem in that, first of all, we don't want to obviously manually add all of these items to this list. Second of all, let's say our forum ends up having 10,000 users. We don't want to fetch this data all in one go.
06:14
Doing that would be a huge amount of data pulled in and then put into this items array. So really what we want to do is be able to search, preferably within MeliSearch, which we already have set up for these users. So let's head over to the next episode and look at indexing users so we can search on their usernames.
62 episodes6 hrs 54 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!