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

14. Deleting comments

Transcript

00:00

Let's set everything up so we can delete a comment and then we'll look at how we can actually clear this from the list of comments. And there's a technique that we can use to do this without reloading everything on the page. Okay. So the first thing we'll do is go ahead and add in a deleted or delete button. So let's say if we can delete this comment, of course, we need to

00:24

authorize this as well, then we'll create out a delete button. There's no toggle here, so we don't need to set anything. Next up, let's go over to our comment policy and let's add another method in here to authorize deleting. And again, it's going to be exactly the same thing. We can delete this if we own the comment. Next up, let's create out a really simple confirmation on this button

00:48

when we click on it, which calls a live wire method directly from Alpine. To do this, we can just say X on click, and we can just do this all in line. So let's say if window confirm, so we'll just use a native browser confirmation. And we'll say, are you sure? Now, if that is the case, and if they do click, yes, we're going to go ahead and delete the comment inside of here, which we'll

01:12

just console log out for now. Otherwise we won't do anything and nothing will happen. Let's try this out first of all. So let's go ahead and open up our console and let's check this and we'll go ahead and delete this comment, click cancel, nothing happens. And there we go. So it's here where we want to call a method over on our component from Alpine. So to do this, let's

01:37

first of all, go over to our comment item component and let's create out a delete method in here. And for now, let's just die dump delete. Then over in here, instead of console log, we're going to use wire and we're going to go ahead and immediately invoke that. So on this current component that we're dealing with, invoke this delete method and that should work nicely.

02:04

Let's go and delete this. Okay. And yeah, it's calling that live wire method. Okay. So now over in common item, let's really importantly authorize this. So we're going to do exactly the same thing here, make sure we can delete this, and then we're just going to remove it from the database. Before we do that, remember earlier, we sell soft deletes. So we don't actually want these

02:26

to be physically removed from the database. Now, if we just remind ourselves over in here, we have this deleted at our column. This won't be pulled through if deleted that is set to a date and time. So what we can do before we start to use this is open up our comment model. So let's open this up and we are going to go ahead and pull in the soft deletes trait. That means that anytime we

02:50

delete this, unless we force delete it, this will just set the current date and time in that delete to that column. So now over in our common item, we can just safely go ahead and say this comment and delete, and that will not physically remove it from the database, but it will not show up in this list now anywhere where we query it. So let's go ahead and delete this reply here. I'm going to

03:15

say, delete me just so I know which one, and there we go. Now, nothing happens on the client side yet, which we'll fix up in a minute. But if I refresh this, sure enough, it's gone. And if we open up the database, you can see that that has now been marked as deleted. Great. So that's now not showing up in the list. The last thing we want to do is tackle what happens when we delete it. Well, we

03:37

want to remove this from the list. Now, rather than refresh the entire list of comments, what we can do is wrap it in an if statement. This is what it looks like. So I'm going to go ahead and create up here a boolean called deleted by default. This is going to be false. It's always going to be false when we refresh. What we can then do is after we delete this, we can say this deleted is true and

04:04

we can use this in our comment item component to wrap this. So I could say, well, if this comment's deleted, we don't want to show anything in here. So to get this to work, we're going to have to create an outer wrapper because a live wire component always needs an outer div or element. Otherwise, if we wrap the entire thing in an if statement, we would end up with a hydration issue

04:29

because we wouldn't have any content in here. Then what we can do is for this entire thing is say, if we haven't deleted this, then go and show the comment. So everything will be shown here is not deleted. But as soon as we delete that and toggle that deleted to true, it will just disappear off the page. There might be some visual issues like borders and stuff that you might need

04:51

to fix up, but we can get to that. Okay. Let's try it again. So I'm going to hit delete. Okay. And there we go. Now it's still technically not refreshed everything, but it's hidden that temporarily until we refresh the page. We can even do other things and you can see how it still is not visible on the page. When I refresh, sure enough is now not coming through without query.

Episode summary

In this episode, we're tackling how to let users delete comments—without having to reload the whole page. We'll go step-by-step:

First, we add a delete button to each comment (but only if the user is allowed to delete it). We tighten up our comment policy so only comment owners can actually delete their own stuff.

Next, we wire things up using Alpine.js to show a simple browser confirmation before running the delete (so users don't accidentally delete stuff). If the user clicks 'yes', we call a Livewire method to actually handle the deletion.

Then, we focus on not removing the comment from the database completely. Instead, we use Laravel's soft deletes feature, so the comment's just hidden (deleted_at gets set) and not permanently wiped away.

Finally, we update the UI so the deleted comment automatically disappears from the list, without needing a page refresh. We do this by toggling a local boolean (deleted) and wrapping the comment markup in an if-statement. There's a little talk about potential UI quirks (like borders), but those are just minor fixes.

By the end, you've got proper comment deletion set up: authorized, confirmed, soft deleted in the database, and instantly hidden on the page. Nice!

Episode discussion

No comments, yet. Be the first!