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

06. Toggling replying to a comment

Transcript

00:00

Okay. So ignoring the avatar and stuff for now, we're going to look

00:02

at toggling the reply state. So we're going to click on a button and we're going to see another form underneath that will allow us to reply. Now we'll look at a couple of ways to do this, and I'm going to show you why the

00:13

second method is a lot more preferable. So if we head over to our comment item component, the first way that we could do this would be to create out a ball in here and have this set to false by default. So this is just going to be the replying state.

00:28

And if we had ever to comment item, maybe we had a button in here, which allowed us to toggle this. And let's output the value of replying in here. Maybe just do a ternary to say, replying, otherwise an empty string.

00:43

We could hook this up with a wire click and we could say something like toggle. Reply, that would kind of make sense. We want to toggle that value and then we can add an if statement here to show that form if we're replying.

00:56

Now let's go ahead and click on replying. You can see that this works, but the only issue with this, if we head over to our network tab, this sends down an additional network request in order to update what we see.

01:09

As you can see, if I just pull this over here and we hit this. This goes ahead and sends a network request every single time we toggle this. Now, a better option would be to use Alpine to toggle this instead. So we're going to get rid of all of this.

01:28

We are going to get rid of this property in here because we don't want this to be sent to the backend. And we're going to build out a better solution with Alpine. So let's just create these items out first of all.

01:39

So let's say a margin top of six in here. We'll make all of these buttons small. And let's go ahead and say flex item center to add them next to each other. And we'll set a space on the X axis of three.

01:53

Now for each of these buttons, let's go ahead and click, uh, create a reply one. We'll change the text over here as well. So let's say text gray 500. And yeah, we have something that looks a little bit better.

02:05

Okay. So how are we going to do this with Alpine? Well, we want to make this whole thing an Alpine component so we can trigger each of these states.

02:11

Remember, we're going to have replying. We're going to have editing and others as well. So let's start with this X data in here and we'll say replying by default is false.

02:21

So we've moved that from the live wire component directly over to this component instead. Now, what we can do is when we click on this reply button, instead, we're going to use Alpine.

02:33

So we're going to say X on click, and we're going to set replying to true. Then what we can do is underneath here, we can create out a template and add an if statement onto this. So we can say X if so again, with Alpine, if we're replying, then we

02:50

want to show a form in here to reply. And that will work in exactly the same way, but without a network request. So when I hit reply here, you can see that that works in exactly the same way and that triggers the form for each of our comments and we don't have

03:04

that set to toggle at the moment. We can do if we want to, but on our form, we're going to have a button which cancels this process off. So let's go ahead and build this form out now.

03:14

Now it's really helpful because this is pretty much exactly the same as the form that we have up here. So we're going to go ahead and grab this entire thing and just move it over into here.

03:24

And of course, modify some of the things that we are submitting or hooking up to here as well. So this will change also. So let's say reply and let's just take a look at this.

03:36

Looks good. And the only difference is we want next to our primary button. So let's wrap this and say flex item center and space X let's say two. We want a little cancel button, which again is really easy because we can do

03:52

this by toggling that Alpine property. So let's say X on click, and we're going to say replying is false. And let's also add some styles to this. So we'll set this to text small and text gray 500.

04:07

Okay. Let's check this out. So reply. I can hit cancel and it works exactly the same way.

04:13

Now I've just noticed that's a little bit off. So I think let's say items baseline. So they line up nicely and yeah, there we go. We can reply and we can click cancel.

Episode summary

In this episode, we're diving into how to let users reply to comments by toggling a reply form – but we're specifically focused on doing it the right way!

First, we take a look at a naive approach: using Livewire to toggle the reply state directly in the backend whenever the user clicks "Reply". While this works, every toggle sends a network request – which is pretty inefficient for something that doesn't need to hit the backend just to show or hide a form.

Then, I show you a much better option: using Alpine.js for this kind of UI state. We set up an Alpine component for each comment, track whether we're replying or not in the frontend (replying), and toggle it with simple Alpine click handlers. The reply form pops up instantly with no extra requests to the server.

We also tweak the layout and buttons a bit to make things look and work better, including a "Cancel" button that hides the form again. Throughout, I point out why this approach is more efficient and makes your interface snappier. By the end, you'll have a clean, user-friendly way to reply to comments – all handled on the client side for the best user experience!

Episode discussion

No comments, yet. Be the first!