Hooking up users for mentions: Build a Forum with Inertia and Laravel

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.

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

Episodes

Transcript

Episode summary

Episode discussion