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

11. Preventing unlimited reply nesting

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.

Episode summary

In this episode, we tackle a common issue with nested replies—preventing users from replying endlessly to replies, which can get really messy! Right now, the app allows users to keep replying to replies, resulting in unlimited levels of nesting (even if the UI doesn't always show it).

We'll start by looking at the frontend. The first quick fix is to just remove the "Reply" button from nested replies, so users don't even see the option. You'll see how to introduce an easy rule to hide the reply link if a comment already has a parent. This way, only top-level comments are reply-able.

But, as always, we don't stop at the frontend—anyone clever could still forge a request and sneak in a reply to a reply. So, we also tighten up our backend by adding an authorization policy that determines whether a comment is eligible for a reply. If the comment already has a parent (i.e., it's a reply itself), the policy denies further nesting.

By the end, we check that the frontend no longer shows the reply button for anything but top-level comments, and the backend will refuse any request trying to break this rule. Now, we've got a clean, manageable one-level reply structure. No more infinite reply chains!

Episode discussion

No comments, yet. Be the first!