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
53. Hooking up users for mentions
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
We know how to pull our mentionable component in. We've got this data indexed in MeliSearch.
00:06
How do we hook this together to actually perform a search when we're typing? Well, we're going to go ahead and get rid of the items just in here for now. And we're going to go ahead and look at an event that the mentionable component gives us, which is onSearch.
00:23
So let's go ahead and create out a mentionSearch function inside of our create discussion form. We are going to move this a little bit later. Let's just play around with this to see how this works. So let's just see what we might get into here and go ahead and console.log this out.
00:45
So if we head over now, open up our console, pull it down slightly, and I start typing, you can see, sure enough, that gives us back what we're typing. What we can then do is send that off to MeliSearch, get the list of results back,
01:01
and then put them within the items array that we've just got rid of. Now, first of all, to keep this nice and tidy, and second of all, so we can reuse this functionality for our reply form, we're going to go ahead and put any kind of mentioned searching functionality
01:18
into a composable, which we can pull in, much like we've done with our create discussion and create post form. So we're going to call this useMentionSearch, and let's create that composable out. Let's do pretty much everything that we did in here, exporting a function in here.
01:36
So export default, and then we can start to pull this together. So already, if we think about it, if we go over to our create discussion form, we need a mentioned search method. So let's go ahead and pull this into here, and make sure we go ahead and return mentioned search,
01:54
which, of course, at the moment is just console logging out. What we also need is once we do perform the search, if we go up to our mentionable, we need a list of items to be able to pass into here. So where are they going to come from?
02:08
Well, we could add in a mentioned search results ref in here. So let's import ref from view, and let's create mentioned search results. That's going to be a ref by default with just an empty array in, and we can go ahead and return that.
02:27
So mentioned search results. Now, just to kind of test this out, let's in here, once we perform a mentioned search, set the mentioned search results value to an array of just one item. So let's just remind ourselves what the keys are, value and label.
02:45
So let's say value Alex, that's going to be lowercase, and the label is going to be Alex, and then at Alex. So by the end of hooking up our composable, when we type, it should populate it with this,
03:01
which is actually going to come back from our search results eventually, and then we'll be able to use this to populate our items. So now we've got all of this in here, let's go over and hook this up to mention search results,
03:16
which we don't have in there yet, but now we can pull our composable in and bring these two things in. So let's go down to here, go ahead and import use mentioned search, and that comes from composables, use mentioned search,
03:37
and down here, let's go ahead and pull out them two things that we need. So it's mentioned search and mentioned search results. So we'll just structure them from use mentioned search. Okay, so hopefully now, when we type something, we get Alex, great.
03:59
So that search is technically working, but we're not actually hitting MeliSearch yet. For that, we're going to need to pull in the MeliSearch JavaScript library. Remember, when we search discussions over on the homepage, we hit the backend. Now we are only making a direct request to MeliSearch using the MeliSearch JS library.
04:18
So let's go ahead and pull this in, and then I'll show you how to set this up so we can get this working. Okay, so if we go over to our use mentioned search here, the first thing that we want to do is import MeliSearch,
04:35
and that's from MeliSearch that we've just pulled in. And then we want to go ahead and create out a client so we can actually connect. So we're going to new up a MeliSearch instance, and into this, we need to pass two things, the host and the API key.
04:52
Now, we already have both of these things configured over in our EMV file. The host is here and the key is here. So how do we get access to these? Do we duplicate them?
05:02
Do we hard code them in? Well, we don't have to do that. What we can do is very similar to what's happening here. We can prefix something with vite,
05:10
and then we can reference something that already exists with our EMV file. So for MeliSearch host, we can set this to vite underscore MeliSearch host. And then in here, we can go ahead and reference the MeliSearch host. What this will do is it will automatically add these to our
05:29
meta within our vite project so we can reference them from the front end. So this is really, really helpful because it means we can just have these put in one place. And when they change, we can, of course, change them automatically.
05:42
Now, MeliSearch key is not what we want. We actually want a public key for this. So why don't we go and just create out a new public key variable? And we'll set this to public key for now.
05:56
We don't have one set at the moment, but you would do that when you go to production. So let's say MeliSearch public key. And again, we'll just reference that. So as well as these things that are accessible from our back end,
06:10
we now have these two things accessible from our front end. The question is, how do we access these? Well, we go ahead and say import meta EMV, which, of course, is obvious because that's what we are accessing.
06:22
And then we say byte MeliSearch host. And then we just do exactly the same thing for the MeliSearch public key like so. OK, so we'll figure out whether this works in just a second because we're actually going to make a request now just inside of our export just here.
06:45
Let's go ahead and define which index we're using for this. This is never going to change. So we're just going to keep this functionality really basic. We know that the index is users and mentions.
06:56
Let's just make sure we've got that right. Yeah, perfect. So that is our index. Now we create our client, but we search on our index.
07:05
So we reference the index from client, but we perform the search on our index directly. So when we invoke mention search, what we want to do is up here start a MeliSearch search. So let's actually do this all in one line because it's going to be a little bit tidier. To do this, I'm going to parenthesize and await on index and search.
07:31
So we're using a promise here, waiting on this to finish. And we are going to pass in the query, which actually is the username. So why don't we call that username? I think it's a little bit clearer.
07:44
And obviously, let's make this async. So we're doing an async away on this promise here into here, as well as the actual username itself or the query in this case is not actually a username that we are passing in. It's a general query.
07:58
We can actually pass some options in. So we can set a limit to this. Really, if we have 10,000 users and we type the letter A, that's going to be a huge amount of records.
08:07
So we'll definitely limit this so we don't show too many users. Now, the result that we get back from this, let's actually just die dump on or console log in this case on this. That will verify whether our search is actually working or not.
08:24
So let's go over here. And yeah, so let's have a look here. Probably just need to import that properly. And I think the casing here is wrong.
08:35
Let's just try that. OK, so swap that over. And yeah, we're good. OK, so keep an eye on our console.
08:45
When I type A, there we go. So we get a list of hits here. So this is the property that we're after. And you can see that, sure enough, we get back my user to try that with M and have a
08:56
look at the hits that we get here. And sure enough, we get Mabel. So our search is working. We're actually hitting this index here and actually pulling back these results.
09:07
So now what we want to do is just set the value to the hits. And then we pretty much have all the data we need because we have labeled these things label and value. So it's already everything that we already need.
09:22
We've structured that data with inside of Mellaserch. So we don't have to transform it here within JavaScript. So now when we go ahead and perform a search, what we should see are a list of the users within our app.
09:37
Let's just remind ourselves who else we have in here. We've got DEF, which was that news that we registered. So everything looks like it's working nicely. Now, the only issue I can see here is we don't have a space in here, but that's absolutely
09:49
fine. We can just head over to user mention, change that to have a space here. And of course, we know that with Scout, we can go ahead and say Scout Flush app models user mention.
10:03
And then we can go ahead and just reimport that. And now it should look good. So there we go. Great.
62 episodes•6 hrs 54 mins•1 year 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!
Comments
No comments, yet. Be the first to leave a comment.