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

29. Storing a new discussion

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 things are starting to come together now.

00:01

By the end of this episode, we will be able to click this button, type in the discussion details we want to see, click create discussion and have this close and redirect over to the new discussion page that we have just created.

00:16

So we're going to start out here with the controller just to see what we need to add in here. So let's go ahead and make out a controller. We're going to call this discussion store controller.

00:27

It's going to have one job and let's go ahead and register out the root for this first of all. Now, of course, to create a discussion, we need to be authorised. So we can put this under this already defined middleware group for auth.

00:39

Let's just grab this as a reference and we'll just put this at the top here. So we're going to post through to discussions. That's going to use the discussion store controller. And of course, we'll give this a name as well

00:54

so we can reference it easily within our component. So over on the discussion store controller, let's create out an invoke method. We are going to bring our request in here, but we're going to switch this out for a form request a little bit later.

01:07

Let's do no validation here. First of all, we'll tackle that afterwards and then let's go ahead and see how we actually store a discussion. Now, the only problem we've got at the moment is with our discussions.

01:18

Remember, the slug here needs to be generated. We initially want to set this to null. And then once a discussion has been stored, we want to update this with the slug, but we want to prefix the ID.

01:33

That then means that what we're going to have is a unique slug for every single discussion, even if the user chooses the same title. So we would normally do this by just creating out a discussion variable in here and saying discussion and create or discussion make and then persisting it in the database.

01:54

What we don't want to have to do is do all of the slug generation inside of here. So we're actually going to update the discussion model to handle this for us. That means that wherever we create a discussion, this functionality is always going to exist.

02:08

So to do this, we're going to go ahead and hook in to the booted event in here or the booted lifecycle of a model. So let's go ahead and create out a static function called booted. And this will allow us to define and hook in to any eloquent events within here.

02:25

There are other ways to do this, but something so simple makes sense to do this directly within here. So to do this, we're going to say when this is created. So when it's actually being persisted in the database, what we want to do is go ahead and run this closure,

02:39

getting the discussion into here that we can then modify. So once this has been created with an empty slug, we're then going to go ahead and update this model with a new slug. So the slug is going to be the discussion title.

02:56

But then outside of this, what we're going to do is create out a setup. So we're going to say set slug attribute or a mutator, as it's called. And into here, we're going to get the value, which is going to be basically just the title of the discussion, which gets set in.

03:12

From here, we're going to go ahead and set the slug on the attributes of this to the ID of the created discussion. And then we're going to add a hyphen. And then we're going to use the string helper to slugify the title that's been set in.

03:33

So essentially, what we're doing is every time we create a discussion, we're going to set the slug initially to the slug title. But then when that gets set or wherever it gets set from, we're always going to append on or prepend on, in this case, the ID of the discussion.

03:52

So now that we've done that, we're going to see this in action once we have actually created the discussion. So let's start this now. So let's go and create out that discussion variable again so we can reference it.

04:05

And what we're going to do here is actually make this, the difference between make and create is make will not persist this in the database. We're going to go ahead and set the title in here to request title. So that comes from the form that we're posting through from Inertia.

04:20

And now we just need to hook a couple of things up. So what we want to do is associate the user with this discussion. Let's just double check that we've got a user relation in here, and we do. So we're going to go ahead and associate the currently authenticated user

04:36

with that discussion before we save it. What we're then going to do is associate the topic of that discussion. So let's go ahead and do pretty much the same thing here. But we need to look the topic up.

04:47

Now, we know that we get the topic ID into here. We're going to have to relook the topic up as a model to be able to associate it. The reason that we don't do in here topic ID is we don't really want to get into the habit of setting a topic ID directly or any kind of foreign key directly

05:07

within the attributes that we want to set. It's a much better idea to associate things like this. It just means that we don't have to set our topic ID as a fillable field, and it makes it a little bit safer and also a little bit cleaner as well.

05:21

So we're going to go ahead and find that topic by the topic ID and then pass the entire thing in to associate it with the relationship. Then what we can do is go ahead and simply save the discussion. Now we've created a discussion out.

05:36

The next thing to do is to create our post for that discussion. So again, we're going to follow the same kind of format. We're going to make out the post, associate what we need, associate the post with a discussion and then save the post.

05:52

So to make the post, we're going to go ahead and set in the body. So we grab the body from the request. And then what do we need to hook up to the post? Well, the post has a user.

06:02

So let's again go and associate a user with this. That's just going to be the currently authenticated user. We also want to then associate this with a discussion. So we're going to go ahead and do that as well.

06:15

So associate the discussion that we've just created. And then we're going to go and either save this post out or what we could actually do is get rid of this discussion association. And we could just say discussion, which has already been created,

06:29

go into posts and save that post. So we're basically creating a post associating the user and then for the discussion posts, putting that new post into there. And that should go ahead and create that out.

06:43

Then what we're going to do is return and return a redirect response. So we're going to redirect to the discussion show route, passing in the discussion. So let's recap. Create the discussion and associate the user in the topic that we've chosen.

07:03

Then save the discussion, create the first post and associate the user. And then within the discussion, save this within the list of posts. Okay. Now we just need to hook this up on the client side.

07:17

And then we're going to look at authorization and validation. So over on the create discussion form, we know that we've got a reference to the form in here via our composable. Because this is just an inertia form,

07:31

we can just directly hook into this from here and make a request to save this. Now our fixed form wrapper actually could do with being a form itself. So we can just submit this through. So I'm going to change over the overall thing here to a form, the overall wrapper to a form.

07:50

What we can then do is over on the create discussion form, we can say V on submit. And that will go through and pass through to the form that we're referencing in here. We can prevent the default behavior here. So it doesn't actually go through.

08:03

And we can go ahead and call a create discussion function. So really over on our fixed form wrapper, we're just saying when this overall form with the main components in is submitted via this button that's slotted in, then we want to call this create discussion function.

08:23

We can add this down here, create discussion. And that's just going to go ahead and submit that form that we have within inertia. So what are we doing? We're posting through to the discussions store route.

08:39

We will hook into this to do something when the form was successfully posted, but let's just check out and make sure that this works. Okay. So we've got an issue here with attribute posts does not exist.

08:51

So let's figure out what we have yet. We've put posts there instead of posts. You probably caught that. Let's say post.

08:59

And there we go. So let's also keep an eye on our database just to make sure everything's good, but this should all just flow through. So let's go ahead and say new discussion, new discussion body.

09:10

And we'll stick this under the inertia topic. Let's hit create discussion. And yeah. Okay.

09:16

So we just need to add some items to discussion for mass assignment. Let's just have a look in here at what we've got and what we might need to add. We don't have anything. So that would make sense.

09:28

Let's add in our fillable columns in here. That's going to be the title and the slug. Remember the user ID and the topic ID gets set by the associations. So we don't need to add them in there.

09:39

Okay. Let's try again. New discussion. New discussion body.

09:45

And we'll choose inertia. Let's go ahead and click create and discussion show is not defined. Okay. So that looks like it would have been created,

09:53

but we just need to say discussions.show. So if we head over to the database, we've got that new discussion in there with the ID, which has been prefixed, which is great. And we should have the new discussion body in there as well,

10:05

with no parent associated to my ID. I'm going to get rid of these just so we get these sort of full flow through to creating a discussion. And let's try this one last time.

10:15

So new discussion and new discussion body. And once again, hook that up to inertia. So create discussion. And there we go.

10:25

We are fired over to the new discussion page and we have everything in there that we would expect to see. So once we have created this discussion, obviously we want to hide this form. So what do we do?

10:37

Well, over in the create discussion form, where we're posting this through on the success of this. So once this has been successfully posted through and we don't have any validation errors, we want to do a couple of things. The first thing we want to do is reset the form back to its original value.

10:55

Because remember, we have state management here now. So we want to clear everything out, basically reset it back to the original values. But what we also want to do is hide the create discussion form. So we just want to invoke that in there.

11:08

Let's go ahead and create another discussion to see this working. So another discussion. And we'll say another discussion body. And let's go ahead and choose inertia.

11:20

Create that. And there we go. Without, of course, refreshing the page, we're fired over here. But that's also got rid of the create discussion form.

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.