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
14. Deleting comments

Episodes

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

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.
18 episodes•1 hr 40 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!