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

13. Editing comments

Transcript

00:00

So we can toggle this edit state, but at the moment we don't have a method called edit. Let's fill that in and we should be done.

00:07

So let's create out this edit method in here. The first thing we want to do is authorize this. Of course, we don't want to be able to edit anyone else's comments. Next up, we're going to go ahead and validate our edit form just to

00:20

make sure that everything looks good. So let's call validate directly on there, everything we've already done. And then we already have access to the comment inside of this component. So let's go and just directly update that comment using

00:33

the data from the edit form. And we only want the body. Next up, we're going to do exactly the same thing that we did here. And we are going to dispatch the fact that we have edited a particular comment.

00:48

And that means that over in our comment item, we can do exactly the same thing as this to toggle editing back to false when we pick up that event. So everything we've already done just for editing. Okay.

01:03

Let's go over and try this out. So here's a new reply. I'm going to edit this, put an exclamation Mark on the end, hit edit. And yeah, sure enough.

01:11

I think we're picking up the wrong event here, edited, and that should have actually edited it and it did. Let's try that again. And I'll just say edited, hit edit.

01:21

And there we go. Everything is automatically updated. When we hit edit again, that's already been mounted. So the edited comment is back inside of that form.

Episode summary

In this episode, we tackle how to edit comments in our app. Right now, we can toggle the edit state for a comment, but there isn't actually a method in place to handle the editing itself. So, we start by building out an edit method in our component.

First up, we make sure to authorize the action—after all, we don't want users editing each other's comments! Then, we validate the data in our edit form to make sure everything checks out. Once that's done, we update the comment using only the body from our validated form data.

After updating, we dispatch an event to let other parts of our app know that the comment has been edited, which also allows us to toggle off the edit state in the UI—just like we did when a comment was added or deleted.

To wrap things up, we jump over to the browser and give this a spin: we edit a comment, submit the change, and see it instantly reflected in the UI. We also fix a little mix-up with which event we're listening for, and confirm everything's working exactly as expected.

So by the end of this episode, you'll have a working way to edit comments with authorization, validation, and real-time UI updates!

Episode discussion

No comments, yet. Be the first!