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

54. Detecting and storing mentioned users

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

So we now have the ability to search for users and technically mention them within the post. But when we actually send this through and store a post,

00:10

there's no record kept of who's being mentioned. That's a completely separate task and one we're going to tackle now. So the first thing we need to think about is how we're storing this in the database. We're going to create a new pivot table for this that hooks up a post and a user.

00:26

So when they are mentioned in a post, hook them up and make sure that we know which users have been mentioned in which post basically. So let's go ahead and create out the migration for this now. Let's make a migration and we will create the mentions table.

00:44

And let's go over to that and fill in what we need. This is basically just going to contain a user ID and a post ID. That's pretty much it. So again, foreign ID here for the user ID that's being mentioned.

00:57

We'll go ahead and constrain that. And really importantly, when a user is deleted, we will cascade and remove their mention. There's no point in them being in there at all. So for the second one, it's going to be the post ID.

01:10

And once again, if the post is deleted, we're going to unmention everyone from here by cascading and removing all of these mention records. OK, let's go ahead and run migrate on that. Now, thinking about the relationships here,

01:23

we've got a post that has people mentioned in it, basically. So we just need to define out a relationship on here. So let's go ahead and create out a mentions relationship. And this is going to be a belongs to many because we're using a pivot table.

01:41

So belongs to many user. So we have many users being mentioned in this post. And we're going to go ahead and specify the mentions table because Laravel's convention here would be to create out a user mention table.

01:56

Or in this case, it would probably be mention user just because of the alphabetical order. So it's specifying the table in here. And then we're going to specify the post ID column in here as well. We don't have to do this, but you might also want to try and detect when a user is being tagged,

02:15

in which case we want to enable with timestamps. In the mentions table, we kept in the created and updated at. And these won't be filled unless we use this with timestamps method. OK, so we've got the mentions relationships.

02:28

And now, technically, when a post is created, we can extract out the users that have been mentioned in that post. And we can go ahead and sync them up in this mentions table. Now, I say sync them up because if I mention Alex, say, in this post,

02:45

let's create a new discussion here. And I mention Alex. Obviously, that's not going to do anything at the moment. I could edit that and get rid of Alex and choose Mabel instead.

02:58

So we want to sync this by removing users that are no longer mentioned and adding new ones that are. So how are we going to detect when someone is mentioned in a post? Well, we're going to do the same thing that we did earlier with the user observer,

03:13

create one out. And when a post is created or updated, we're going to find that user or them users that are being mentioned and sync them up. So let's go ahead and create out a post observer here as well.

03:26

So make observer. And this is going to be our post observer. And of course, over in our event service provider, we can go ahead and hook this up like we did for the user.

03:38

So let's pull in that post observer. And let's go ahead and fill in what we need to do. So let's keep this really simple for now and just look at when a post is created. And we're going to get the actual post into here.

03:55

We're not going to very easily be able to visually see what we get back from here. So what I'm going to do is I'm just going to die dump on something here. And then hopefully when we go ahead and create a post, we should just see this dump down.

04:10

We might just need to tidy this up later. So let's go ahead and hit the start discussion, choose a topic. And there we go. Yeah.

04:19

So at least from here, we'll be able to see kind of what's going on. OK, so how are we going to find users that are mentioned inside of a post body? Well, I've already spent a huge amount of time pulling together some regex, a regular expression to actually capture each of these things.

04:43

So we want to be really specific here because we want to capture the username. We don't want at to be part of this. So you can see that's nicely separated by the way that this is separated from the at symbol here, and it also needs to allow multiple as well.

05:01

So you can see here that Mabel is being identified as match two and Alex is being identified as match one. So this is the regular expression that we need, which you can just go ahead and copy. But we now need to know how to pull this

05:16

into PHP to actually match these within the post body. So what we're going to do inside of here is use preg match all because we have multiple results here. We're going to go ahead and pop the regular expression inside of here.

05:32

We're going to grab that from the post body or search that from the post body. And what we do here is the way that this function works is it will give us a mentions variable back after this has been run and it will allow us to access that. So let's just go ahead and die dump on mentions and just see what we get.

05:52

So I'm going to go ahead and create a new discussion out here. And I'm going to mention Alex, which I am aware is me. And I'm going to mention Mabel. So let's hit start discussion once we choose a topic.

06:04

And let's have a look at what we've got inside of here. So the first thing that we've got here is a list of the two things that have been matched. That's fine. The second thing is the two usernames that have been matched here.

06:18

And this last one is just the same thing. Now, we need this data to be structured slightly differently. So we're going to go ahead and use preg set order for the last option here. And let's just have a look.

06:34

So let's say Alex and Mabel. And let's look at how that changes. Again, just choose the topic. And there we go.

06:43

So let's take a look at this. You can see that each of these is now in its own element of this array, which makes things a lot easier because now we can just iterate through and extract out the username for each one and look each of them users up to be able to sync them.

07:01

So that's pretty much our regular expression run to detect users being mentioned. Now, how are we going to hook them up to the pivot table? Well, the first thing we need to do is actually look these users up so we can sync them. So to do this, we're going to go ahead and use where in,

07:19

kind of similar to what we did with search a little bit earlier. And we want to say username because we know that we've got the username over here for each of these results. So where in username, we're going to go ahead and collect up,

07:32

which basically just creates a Laravel collection from an array. So collect up their mentions. And then we want to pluck out, sure enough, the username from each of these. So let's pluck out the username.

07:47

And let's just have a look at this just so we can see what it looks like before we run anything. So let's choose a topic, mention Alex, mention Mabel, and hit that. So there we go. Just two things within an array that we've plucked out.

08:09

So we pass that into a where in. And then from the result of this, we pluck out the ID for each of them users. So again, let's just die dump on this just to make sure we're getting two IDs back, which we can then use to sync to that mentions table.

08:27

So obviously boring, we have to do this all over again, but that's absolutely fine. Hit this. And there we go, four and two. So we've got two users now that we can sync into their mentions.

08:41

So we have the post in here, and we can just say mentions, sync. Now, sync will remove things that are no longer in what you are passing in, and it will add things that didn't exist before. So if, for example, user one and two were already mentioned in this post,

09:00

and then we pass in one, two and three, three will be added. If we pass in one and three, two will be removed and three will be added. So the sync is pretty self-explanatory. It will just sync these things up for you.

09:15

So let's go ahead and just grab what we did down here, and then just pass that directly into here, and we should be good. So now when we mention Alex and Mabel, they should both be hooked up and added to this mentions table for that particular post.

09:29

So let's go ahead and try this out. So let's say new post or new discussion. And let's say, hey, Alex, and hey, Mabel, just to vary it a bit. And let's go ahead and start that discussion.

09:44

And let's head over to the database. There we go. So we've got a user here, Mabel, and a user here, Alex, mentioned in that post for that new discussion.

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.