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

36. Creating the reply form

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

We're pretty much done with our Create Discussion form now. We're now going to duplicate this over so we can build out our reply form. So we're going to head over to one of these pages. The first thing I want to do is go over to the Use Create Discussion Composable.

00:14

Just set visible back to false. Doesn't make sense to, of course, have that always open. So let's pick a discussion with a few posts in. I don't think we have any anymore.

00:24

We'll just choose this one here because it's pretty plain. We're going to add in a reply button here and have this toggle the reply form. And then we're also going to add a reply link here within each of the posts, which will also toggle a reply form.

00:39

We won't do that one just yet because that relies on having our permissions to show whether we can reply to a particular topic or discussion. But we'll go ahead and build this out anyway. So the first thing that we're going to do is actually just grab the entire code for

00:54

the create discussion form. Considering we're using this wrapper, we can just get rid of the things in here that we don't need. So let's go and create out a create post form in here, and let's just paste that in.

01:08

Okay, so before we include this on the page, let's just get rid of some of the things that we know are just not going to work. We can even change some things over as well. So let's change this to create post.

01:21

We still want visible. We're going to create an entirely new composable for this. And this, we're going to say replying to X. So we're actually going to have the discussion name in there as well.

01:32

This is going to be hide create post form, and the form's going to remain the same. Let's go down. We know that we're not going to need a title for this because we're just replying. We are not going to need a label for this, so we can actually get rid of the entire

01:47

top part of this. And we're just going to need a body so we can get rid of the margin on there. Markdown preview is still going to be enabled. The body is going to have the same text, so that's actually fine, or the same type.

01:59

And we can just change this to reply. So that's our template done. Let's go down now and just get rid of some of these imports that we're not going to need. And we're going to create another composable called use create post.

02:12

So again, we can pretty much copy this over because it works roughly in the same way. So let's go over to our JS directory and just grab everything in here. And let's create our use create post.js instead. Paste this in, and we'll just change over everything we need in here.

02:31

So visible can remain the same. The body is, of course, different. The form is different because we just have a body. This is going to change, so show create post form.

02:41

We're going to have hide create post form. And down here, we are just going to change them over. So show create post form, hide create post form, and I think that's pretty much everything we need. We are going to need to make a slight adjustment to this because within the context of this entire creation of a post within this composable,

03:01

we're going to need to pass the actual discussion in that we are replying to because it relies on that data. So now that we've done that over in the create post form, let's just change these over. So use create post, and let's change this, change this, and hide create post form. And we can get rid of create discussion in here and change that to create post.

03:25

So we should have everything we need now. Let's just move this over to the forum layout, and let's see what we can do. So create post form, and let's go ahead and pull that in and pull that in down here as well. So create post form.

03:43

OK, so let's go over to our post page. Obviously, nothing is in there at the moment. Not got any errors in our console, which is good. Let's go ahead and trigger this now.

03:52

So over in show.view, where we have our sidebar, we can just add a button similar to our index. So let's find that first of all, grab this primary button, go over to show, paste this in and say reply to discussion. And this is going to be show create post form. And page.props.auth.use this yet, so we have to be signed in, and I think that should be good.

04:20

Now, let's just make sure we've got our primary button pulled in here. And we should now see that over here. Great. And when we click on it, we want to be able to actually toggle this. Now, we don't have any of our composables pulled in here at the moment.

04:36

So let's import use create post from here and then let's go ahead and destructure this. So we want to grab out the ability to show the create post form from use create post. And we should be good. So we can now make sure we are toggling the correct one. Over in our sidebar, and yeah, we are.

04:59

So let's try this out. There we go. Great. So we've got a body here that we can add to. We've got our title here, which is going to show the actual title. And of course, the button has changed.

05:10

But really importantly, the markdown preview still works in exactly the same way. We've not had to duplicate anything around here at all. The markdown toolbar works nicely. We can just toggle this. It just all works the same.

05:23

So really not much effort to just create another form that has more or less the same features. And if we just check that this can be closed off as well, it's all good. And just checking our console, everything looks good as well. So the one thing that we do need to do is take the discussion into context when we actually reveal this form.

05:41

So what we're going to do is we could create a separate method for this, but I'm actually going to pass in the discussion into the show create post form function over on our composable. So show or use create post form. Let's take the discussion into here.

05:57

And let's set this as a ref within here that we can also share. So discussion and the ref here, we'll just set to null. And we're going to set the discussion value to the discussion that gets passed in. Now we can go ahead and expose the discussion here.

06:15

And what that means is over on our create post form, we now have access to that discussion because it is set via the show page here in the composable. We know that keeps our state. And then over here, we can now use that discussion to show that within the title.

06:32

So we can actually just replace this out here with discussion.title. And of course, you can show any other information in here as well that you want. So when I click reply now, it should work. But obviously we've done something wrong, cannot read properties of null.

06:46

Now, the reason for this is we've made a huge mistake here, but not an obvious one. We're accepting the discussion in here, but setting the discussion value to discussion, which is the same variable name. So let's change this to discussion context.

07:03

We can call that whatever we want and set that in there instead. OK, so just a variable name change there with a conflict. And there we go. So now we've got replying to need help with view.

07:14

We've got our own form in there. Everything is looking good with this. So before we get submitting this form, we want to be able to trigger this from each of the posts as well. However, we don't want this to show, this button here to show.

07:27

And we don't want the reply to show here if we don't have permission to reply to a discussion. That's going to be if we're unauthenticated, but there might be other conditions around that. Like we may introduce locked topics a little bit later. So we're going to go ahead and look at basic inertia permissions in the next episode.

Episode summary

In this episode, we're moving on from our Create Discussion form and start building out the reply (Create Post) form for our discussion forum. Rather than starting from scratch, we duplicate our existing discussion form and refactor it to fit the needs of a reply form. That means simplifying things—no title needed for replies, just a body for the content. We also set up a new composable (useCreatePost) to manage the visibility and state for this new form.

Throughout the episode, we make sure to only display the reply form appropriately, depending on things like authentication and permissions (which we'll dig into more next episode). We walk through updating our UI to add "Reply to discussion" buttons and connect everything up so the correct discussion context is passed when replying.

Along the way, we troubleshoot a few common mistakes, like variable name clashes, and confirm that everything works as intended—markdown preview included! By the end, the basic reply functionality is in place, and we're set up to tackle permissions next. If you've been following along, you now have both new discussion and reply forms working in your forum app!

Episode discussion

No comments, yet. Be the first!