Build a Livewire Comment System

Sign in Get started

This episode is for members only

Sign up to access "Build a Livewire Comment System" right now.

Already a member? Sign in to continue

Playing

07. Replying to a comment

Transcript

00:00

Now that we are toggling our reply form, we're going to go through exactly the same process here to actually post a reply. Now, the really interesting thing, if we head over to our comments component, we can actually reuse this form.

00:13

That's a really good thing about using a Livewire form. We can reuse it if the content is going to be almost identical. So over on our comment item, which is where we are now running everything from, we're going to go ahead and pull in that create comment form, but we're

00:30

going to call this reply form instead. The reason that I'm naming this differently is because we're eventually going to have an edit form in here as well. So we've now got our form and we could create a method in here now to reply.

00:43

So let's say reply, and we want to do exactly the same thing. This reply form and validate. And then we want to go ahead and store the reply. So let's hook everything up in our template and then we'll submit this.

01:00

So this now on submission goes to reply, and this is now reply form dot body. And this text area is hooked up with wire model to reply form dot body. Okay. Let's try this out.

01:16

So I'm going to go ahead and hit reply. And yeah, sure enough, it works in exactly the same way. Because we're just reusing that same form with the same validation rules. Okay.

01:27

So all that's left to do is actually reply to the comment for this. We're going to need to introduce some more relationships specifically on our comment model. But let's just write this out, how we would expect this to work first of all.

01:39

So we're going to do exactly the same thing and create the reply. Then we're going to attach the user, associate the user, and then we're going to save this out. So let's say this comment, we've already got that comment in here.

01:51

Maybe we had a children relationship, which only related to the children. And then from there, we can go ahead and make this out using the body in exactly the same way. So we can say reply form only and body, and then we can go ahead

02:07

and associate this with the user. Just before we do that, let's go ahead and add in this children relationship. So we'll open up our comment model and let's create out a children relationship inside of here.

02:21

Before we do that, let's think about the way that we set this up. So we know that we have got a parent ID. So any of the children just need to be where the parent ID matches. So let's go ahead and say that this has many.

02:34

So it's just going to be a simple has many relationship. We're relating this back to the same model. So this has many comments, but we need to adjust the parent ID for the relationship key, because it's not going to work in the Laravel standard that we would expect.

02:53

We can also add an ID there just so we remind ourselves how this is getting hooked up. Okay. So this should work now.

02:59

Let's go ahead and die dump on the reply as we reply, just to see what we've got. And let's say, Hey, reply. And yeah, there we go. We've got a comment and you can see that the parent ID is now getting attached.

03:12

And when we store that, that will be stored in the database. Okay. So let's go ahead and associate the user. This is in exactly the same way.

03:19

So let's say user associate. And again, that's going to be the currently authenticated user. And then we just want to go ahead and persist this in the database. So we'll just say reply and save.

03:33

And then last of all, we just want to go ahead and reset the form in case that gets opened back up again. So we'll just say reply form and reset. Okay.

03:43

Let's give it a go. And of course we're not displaying children yet, but at least we'll be able to see this in the database. So I'm going to say reply, hit that.

03:52

There we go. Let's go over to the database and check out our data. Okay. So we've got all of these comments here, which we posted.

03:59

This is now the reply. It doesn't have a commentable type and ID because it doesn't need one because we have a parent ID, which does have one. And that's why we set them to null.

04:10

You can see the parent ID has been filled. So now when it comes to outputting all of the children or replies to comments, all we need to do is access that children relationship and we'll see all of the replies to a comment.

Episode summary

In this episode, we're taking the reply feature to the next level! Now that we've got the reply form toggled, it's time to actually post a reply to a comment. The cool part? We're reusing our existing Livewire form—super efficient since the fields are pretty much the same, but we're naming it replyForm so things don't get confusing later when we add edit functionality.

We'll walk through hooking up the new form in the comment item component and wire it all up so we can submit a reply. Once that's set, we dive into the backend: adding a children relationship on the comment model. It's just a simple hasMany relationship, connecting comments with their replies using the parent_id field (since these are nested comments).

After setting up the relationship, we test posting a reply, confirm it's being saved correctly (complete with the right parent_id), and ensure the user is associated. Finally, we reset the form for the next reply. Right now, we're not displaying the replies yet, but you can see them in the database and they're hooked up, ready for when we build out the threaded display. It's a great behind-the-scenes look at how nested comments get set up and stored!

Episode discussion

No comments, yet. Be the first!