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
36. Creating the reply form


Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
02. Getting set up
10m 36s
03. Modifying registration for usernames
7m 15s
04. Figuring out the forum layout
5m 57s
05. Creating and listing topics
9m 15s
06. Basic discussion listing
13m 33s
07. Pinning discussions
4m 1s
08. Tackling pagination in Inertia
8m 23s
09. Customising pagination text in Laravel
10. Showing a discussion
6m 4s
11. Setting up discussion posts
5m 53s
12. Listing through discussion posts
5m 28s
13. Adding more data to posts
8m 24s
14. Adding pagination to posts
1m 35s
15. Adding a post preview to discussions
4m 52s
16. Adding the last reply to discussions
5m 54s
17. Outputting discussion participants
8m 4s
18. Limiting participants in the UI
5m 56s
19. Ordering discussions by last post
4m 30s
20. Handling deleted users
2m 31s
21. Counting replies
8m 13s
22. Building our first filter
8m 31s
23. Highlighting current filters, and merging with pagination
5m 37s
24. Adding auth specific filters
6m 40s
25. Adding the topic filter
8m 18s
26. Scaffolding the new discussion form
13m 29s
27. Toggling the create discussion form
9m 2s
28. Keeping form state
4m 59s
29. Storing a new discussion
11m 29s
30. Discussion validation and authorization
5m 1s
31. Generating markdown for posts
8m 37s
32. Toggling the markdown preview
7m 43s
33. Fetching and displaying markdown
8m 6s
34. Adding a markdown shortcut toolbar
5m 53s
35. Dealing with SVG icons
7m 46s
36. Creating the reply form
7m 48s
37. Basic Inertia permission checking
6m 26s
38. Creating replies to discussions
5m 37s
39. Jumping to posts
11m 40s
40. Automatically scrolling to posts
6m 18s
41. Toggling post editing
7m 32s
42. Editing posts
3m 36s
43. Deleting posts
4m 21s
44. Deleting discussions
6m 7s
45. Setting up for best answers
7m 29s
46. Toggling the best discussion answer
12m 14s
47. Solved and unsolved filters
2m 23s
48. Indexing discussions for search
8m 6s
49. Searching discussions
12m 35s
50. Debouncing search
2m 47s
51. Adding mentionable functionality to forms
6m 32s
52. Indexing users for mentioning
9m 9s
53. Hooking up users for mentions
10m 10s
54. Detecting and storing mentioned users
9m 54s
55. Adding the mentioned filter
2m 26s
56. Adding mentions to the markdown toolbar
1m 1s
57. Adding mentions to the reply form
7m 21s
58. Fixing up some unauthenticated state
1m 1s
59. Fixing up post scrolling
1m 48s
60. Reviewing SSR (Server-side rendering)
8m 20s
61. Preventing parent posts from being deleted
2m 31s
62. Improving solution marking
4m 9s


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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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,
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
62 episodes6 hrs 54 mins


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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!


No comments, yet. Be the first to leave a comment.