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