Build a Livewire Comment System
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
12. Toggling editing

Episodes

0%
Your progress
  • Total: 1h 40m
  • Played: 0m
  • Remaining: 1h 40m
Join or sign in to track your progress

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.

Episode summary

In this episode, we're diving into editing comments and specifically how to toggle an editing state, which is pretty much the same idea as how we previously implemented reply functionality.

First, we focus on making sure that only the comment owner can see and use the edit option. To do this, we add an authorization check in our comment policy to verify if the current user is the owner. Once that's in place, we tweak the template so when someone chooses to edit, the usual comment view is replaced with an editing form—all handled via toggling a state variable.

Just like with replying, we create a new Livewire form class for editing (to keep things clean and separate). When entering editing mode, the form is automatically populated with the current comment's body, thanks to the mount lifecycle hook. We also make sure validation is in place, so everything works smoothly.

Along the way, we clean up some UI oddities—like making sure the editing form doesn't have a placeholder meant for replies—and do a little test to verify that everything looks and feels right.

By the end of the episode, you'll have editing toggles for your comments, proper authorization, and a nice flow for switching between read and edit states.

Episode discussion

No comments, yet. Be the first!