Okay, let's work on deleting comments. So it's going to be similar to what we just did with editing comments. So let's get started. So first thing I'm going to do is move this up here. So that should be in our IdeaComment file. And let's just duplicate this. Let's do auth later on like we did for editing. And let's get rid of this. And let's say, deleteComment. Okay, so it's going to be the same thing where we have to emit an event and set the comment on the Livewire component. So let's do that. Don't need this. Set deleteComment is what I'll name the event. Don't need this as well. So let's go ahead and make that component. php artisan livewire:make delete-comment. Okay. And it's going to deleteComment. And actually, let's just copy what we have from editComment. It's almost the same. Let's grab all of this. Okay. And it's going to deleteComment. And let's paste that in. Okay, so importComment.

actually, let's just copy what we have from EditComment. It's almost the same. Let's grab all of this. Okay. And it's going to delete Comment. And let's paste that in. Okay, so import Comment. Don't need this body. Don't need any rules here. So the listener is set deleteComment. So let's say setDeleteComment. Okay. We still need to set it here. We no longer need to set the body. And we can change the event that we're emitting here called deleteCommentWasSet. We'll do auth in a second. So let me just comment that out. We don't need validation. Let's see what we did in IdeaDelete. So deleteIdea. So we can pretty much do the same thing here. So say commentDestroy. So this commentId. And I don't want to redirect. So let's just emit this event. So commentWasDeleted. And say commentWasDeleted. Okay. So let's go to our DeleteComment, Blade component, or the Blade portion of the Livewire component. And let's

emit this event. So Comment was deleted. And say Comment was deleted. Okay. So let's go to our delete-comment Blade component, or the Blade portion of the Livewire component. And let's take a look at what we did for delete-idea. So we have this x-model.confirm Blade component. So that would be all of the confirmation models in our app. So for example, deleting Idea and all this Marcus spam stuff. So we have this model-confirm. And we want something similar for deleting comments. So let's grab this. And let's paste it in our delete-comment. Okay. And let's open up this model-confirm as a reminder as to what we're doing here. And if you remember in the last video, we no longer need to listen for the Alpine component. But since we're using it for the ideas as well, we do need to keep this in this instance. So again, if you don't remember from the last video, for editing comments, we got rid of this,

But since we're using it for the ideas as well, we do need to keep this in this instance. So again, if you don't remember from the last video, for editing comments, we got rid of this, because we're no longer listening for Alpine events, but we're listening for Livewire events. So it looks like we should accept an extra prop here. So we can decide whether to use an Alpine event or a Livewire event, because we obviously still want it to work for the other components. So let's do that. So I'm going to leave this one as eventToOpenModel, because we're already making use of it, like I said, and let's make a new one called livewireEventToOpenModel. And its default is to null. And it's also default the other one to null as well. So we just want to wrap conditionals around this. So we only wanted to do it the Alpine way. If so let's do if here, not livewireEventToOpenModel, that should be a PHP variable.

So we just want to wrap conditionals around this. So we only wanted to do it the Alpine way. If so let's do if here, not Livewire event to open model, that should be a PHP variable. Okay. And these are for the existing cases that we already have. So let's just put this in there. Okay. And for the new case, we just want to add an extra x-init in here, x-init. So again, same thing as we did here. But now we're accommodating for both cases. So back here, let's paste in that condition. But the condition is now if that prop is set. Okay. And if it is, we can just do this. And the event is this one. So we're listening for this event that will pass through from the parent. And if it's successful, it's the same thing as this. So we'd have some duplication here, but that's okay. Okay, so let's see if this still works for both cases. Actually, we have to change our deleteComment here. So deleteComment. So we no longer need

duplication here, but that's okay. Okay, so let's see if this still works for both cases. Actually, we have to change our deleteComment here. So deleteComment. So we no longer need this. Let me just duplicate this. But we do need a Livewire one. So Livewire event to open model. And that's going to be what we set in here in IdeaComment in the menu. So set deleteComment in this case. Sorry, not this one. It should be this one here. The one we emit after we set the comment. So comment, deleteComment was set. So yeah, this one. So back here should be deleteComment was set. And this one will be the event to close the model. So it's comment was deleted. This is deleteComment. Are you sure you want to delete this comment? Okay, delete is fine. This method on the Livewire component is called, oh, I forgot to change it. deleteComment. Okay, should be deleteComment.

delete is fine. This method on the Livewire component is called, oh, I forgot to change it. Delete comment. Okay, should be delete comment. And let's see if this still works. So let's get rid of this actually. Okay, so let's see if it still works for the original models. And we have a syntax error. Model confirm. Sorry, what am I doing here should be and if okay, did I do that right? Okay, so let's try the original models here. So delete Idea should be one of them still shows up. I don't want to delete this one. Let's try deleting a different one. This one. Delete. Okay, still works. Let's try mark as spam. Okay, still works. Try mark as not spam. Okay, still works. Okay, so everything still works for the ideas. Let's try actually deleting

Okay, still works. Try mark as not spam. Okay, still works. Okay, so everything still works for the Ideas. Let's try actually deleting the Comment here. So deleteComment. Okay, so it's not showing. I don't think I rendered it in the models container. So yeah, we have to do this as well. So Livewire, deleteComment. Okay, let's try that again. Refresh. deleteComment, the model still shows. And hopefully it does delete this Comment here. So I should delete this one. Actually, I don't have any of the listeners set up. So let's do that. So the first one should be the message that shows up after we delete. So that would be in our notification. This one. So let's add this one. Comment was deleted. Okay. And next is our comments container, or sorry, ideaComments. So same as Comment was added, we have to add one for Comment was deleted. Comment was deleted.

Comment was deleted. Okay. And next is our comments, container, or sorry, idea comments. So same as comment was added, we have to add one for comment was deleted. Comment was deleted. Okay. And we can do something similar here. Let's duplicate this. Comment was deleted. Refresh the idea. And let's just go to page one here. Okay. And the last one to close the model, I believe that should be taken care of in our DeleteComment component here. So event to close model comment was deleted. Model confirm. Yeah, so it should listen for that and close the model after we delete it. So let's try that out. Hard refresh. So there's no auth in place yet, so I can delete any idea. So let's delete this one. So let's make sure it deletes this one. So let's remember that text. Delete. Okay. So it looks like it does work. Cool.

So let's make sure it deletes this one. So let's remember that text. Delete. Okay. So it looks like it does work. Cool. Did it lower the comment count? I'm not sure. Let's refresh. It does. So we have to listen for it in this component as well. So back to Idea comments. So we can actually just grab this. And we want to update this component IdeaShow. So we can just add that this component IdeaShow. So we can just add that listener IdeaShow. We have a bunch in here. Let's add one more comment was deleted. And we have one for added as well. So we can just do the same thing. Okay. Comment was deleted. And now let's see if the comments count goes down after we delete one. Delete. And it does. Cool. Now let's make sure auth is in place. So let's go to our IdeaPolicy. It's the

And now let's see if the comments count goes down after we delete one. Delete. And it does. Cool. Now let's make sure auth is in place. So let's go to our IdeaPolicy. It's the same thing. Delete, I believe, or destroy. So yeah, it's the same thing here. So I do want to be able to delete it, obviously, if the User created that comment, or if the User is an admin. So just copy this, go to CommentPolicy. Delete. Okay. Spaced that in ideaComment. Okay, or the User is an admin. Okay. So now for deleteComment, we can put this back for the auth. Import response. Let's change this to delete. And I am logged in as an admin. So I should still be able to delete all the comments here. Let's make sure. Okay, I still can. But let's try it for a User,

And I am logged in as an admin. So I should still be able to delete all the comments here. Let's make sure. Okay, I still can. But let's try it for a user, or a user that's not an admin. So let me just grab a user from our database. Let's log in as this person here. Grab that email. Okay. So I shouldn't be able to delete any of these. So let's try and we do get a forbidden. Cool. So let me just add a new comment here to make sure I can delete it. Can I delete this? And let's add one more because I want to work on the menu right after. So one more should be able to delete any of these. So let's just delete this one here. Can I delete this? And it's gone. Cool. Now let's make sure that the menu items does not show when we can't delete it. Simple enough. Idea comment. Let's just put this back