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

12. Toggling editing

Transcript

00:00

Okay. We're moving on to editing comments now and toggling the editing state is pretty much going to be exactly the same as what we did for replying.

00:08

We don't want to send a network request over to live wire. There's no point. So let's go ahead and get this working. Okay.

00:14

So we'll implement authorization here as we already have it set up. So let's say can edit comment. Then we're going to set an editing property to true here. And of course change the button label.

00:28

Okay. Let's go up to the top and create out one of these other toggles by default. Of course, this is going to be false and let's go and implement the edit rule over on our policy.

00:41

So let's open up our comment policy and let's create this out. So all this is going to be, again, we're going to get the user into here and we'll get the comment into here as well. We just want to check if the user ID matches the comment user ID,

00:59

basically, do they own that comment? So if we head over now, you can see that I don't see this for any of Mabel's posts, but I do see this for my own posts, which is great. Okay.

01:10

So now that we've done this, let's go and look at the toggle state. So we basically just want to replace this entire body. We don't want to see the comment body, the original body, and now editing at the same time.

01:22

So let's go and create out a template here and we will add a X if onto this, if we're editing and that template out there, and then down here, we will have this if not. So let's just add this directly to here and say X show if we're not editing.

01:42

Okay. So I'm going to create out a div in here and say editing state just to check it out and let's see what happens. Okay.

01:49

So I'm going to edit, say this comment, edit, and yeah, there we go. That switches over to the editing state. Okay. So once again, what we can do is we can use our policy that we have here.

02:00

So if we can reply or can edit to wrap this entire thing inside an end can, because we don't really want to see this. If we can't edit the comment, there's no need. And we're going to be accessing data in here that won't

02:15

allow us to see this anyway. So if we can edit this, then only show this conditional template and you can see it works in exactly the same way. Okay.

02:25

So now that we've got this, we need a form. So let's grab this from the replying. Cause it's going to be pretty much the same thing. So let's grab this entire form here and we'll put this up to our editing state.

02:38

Of course, we need to change some things around here. So let's change this to when we submit call an edit method. The placeholder here could be slightly different. That could be replying to or reply to, and then the user's

02:52

name of who we're replying to. The form is going to be different. We'll probably have an edit form and we'll have an edit form body. And we'll say edit and we'll have cancel as well, which

03:05

will set editing back to false. So I think we should be good here. The only problem is we don't have an edit form right now. Let's go ahead and fix that up first of all.

03:13

So let's come over to our comment item and we're going to do exactly the same thing here. And we're going to have an edit form. Now I'm going to create a new form class for this.

03:25

And there's a very good reason. So let's go ahead and create this out now. So live wire and make or live wire form. And this is going to be edit comment.

03:37

Okay. Let's switch this over and then we'll see why it's a good idea to create out a separate form. Okay.

03:45

So we've got our edit form. We should be good in the browser. Let's just check this out and click edit. And yeah, there we go.

03:51

We get this toggled. We can remove it as well. Okay. So we need to know the current body of the comment that we are editing, and we need

04:00

to set that as the default within the form. So let's think about this. Edit comment is going to look exactly like create comment. The body is required.

04:09

We might have other validation rules in there as well. So we can easily put this in, make sure we put in the validate attribute as well. So that's all good. And we can hook that up nicely, but we want to set this to be a default

04:22

of the comment that we are dealing with. So over in comment item, what we're going to do is as soon as this component mounts, so we'll use the mount lifecycle hook, we want to go ahead and set the body within the edit form to the comment we're dealing with.

04:38

So it's already there. So we're just going to say this edit form and we could either set the model so we could set the entire model inside of this comment form if we wanted to. And this isn't a method that Livewire gives us.

04:52

We'd have to create this out, but really all we need to do here is set the body to the current comment body and that's it. So that will be automatically populated with the current body. And because we've set up wire model in here, when we click on this, it already

05:11

contains comment that we need to update. Okay. So now that we're done, I don't know why I added reply to username. That should be in the reply section.

05:20

Let's fix that up really quickly. Then we'll move on. Okay. So we'll go over to our comment item here and let's get rid of this placeholder

05:27

because we shouldn't need a placeholder in here for editing and let's go over to where we are replying and add this in here instead. Great. So we're going to switch this placeholder over and I'm going to change this over

05:39

to reply to comment user name. Okay, great. Let's go over and I'm going to hit reply on one of these reply to Mabel that makes sense, edit, and we are all good.

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