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
11. Preventing unlimited reply nesting

Episodes

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

Transcript

00:00
Right now, there's nothing stopping us from going ahead and clicking on one of these nested replies and posting another reply. So I'm going to say nested reply here, hit reply.
00:10
That does work. It's not shown just because of the way that we've set up our checks within the template. But if we head over to the database, you can see that this does exist. And the parent ID here is 12, which is itself a nested reply.
00:26
Now, we only want one level of replies here. How are we going to protect against this? Well, the first step really is to get rid of this reply button. So a user doesn't know that they can reply.
00:39
Now, the other step is to protect against this in the back end and authorize this. So although an authorization rule might seem strange for this, it works really nicely. Let's have a look at how we do this. Okay, so let's go over to our comment item and let's look for our reply link.
01:00
Okay, so here's our reply button. We want some sort of authorization rule around this. So we can do something like can reply, for example. What you could also do is combine this with actual authorization to see if the user has the ability to reply.
01:18
But for now, this is fine. Okay, so how is this going to work? At the moment, by default, this is disabled because we don't have any authorization rules. So implicitly, it's going to return false.
01:29
Let's go ahead and create out a policy. So I'm going to make out a policy here called comment policy. Inside of our comment policy, we are going to go ahead and create our method in here, which will either return true or false of whether we can reply or not.
01:47
Let's return true in here. We'll always get the user inside of here. So let's go ahead and pull that user in. And of course, we'll also get the comment in that we need to check.
01:56
Let's go over, give this a refresh. And yes, still doesn't work. So let's have a look here. And yeah, of course, what we didn't do is actually provide the comment that we are checking.
02:07
Let's try this out. And yeah, we see a reply link for every single comment. So what we can do now is under our comment policy, determine the rule for whether we can reply to a comment. We already kind of did that when we were iterating through children.
02:21
We can reply to a comment if it doesn't have a parent ID. So we're just going to say is null comment and parent ID. Okay, let's go over and check this out. And yeah, sure enough, these have disappeared because they do have a comment ID, but these we can reply to.
02:40
Let's just check our queries and you can see they're exactly the same. So I think we are good. We're now preventing, at least on the client side, that button from being clicked. Now what we're going to do just temporarily is go over to our comment item, comment out this can so we bring back this reply.
02:58
So really importantly, we also want to authorize this on the backend. So if anyone does try and toggle this, remember this is just HTML, they can't actually send a request through to reply to a already replied comment. So let's go over to our comment item where we're actually replying here. And we're going to authorize this directly here.
03:19
So there's no way that we can even get to this point. So can we reply to this comment? And we should be protected. Let's try it out since we've disabled this for the client.
03:31
Let's say reply. And yeah, there we go. So now what we need to do is just bring back our can within our template. And sure enough, we now cannot reply to any nested comments.
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!