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.

18 episodes•1 hr 40 mins•3 months ago

Overview

Build a drop-in comment system with Livewire that instantly works for any model.

We’ll cover top-level comments and replies by re-using Livewire components, editing and deleting comments, working with Alpine.js to minimise network requests, building an Alpine.js directive to display when a comment was posted, handling deleted users and loading more comments gradually.

Once you’re done, you can drop a single Livewire comments component wherever you need it — and comments will instantly be enabled.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Comments

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

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

Episodes

Transcript

Overview

Comments