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
06. Toggling replying to a comment
Episodes
01. Introduction and demo
2m 3s
0%
02. Setting up
4m 55s
0%
03. Polymorphic comments
9m 2s
0%
04. Posting comments
7m 1s
0%
05. Displaying top level comments
6m 11s
0%
06. Toggling replying to a comment
4m 26s
0%
07. Replying to a comment
4m 24s
0%
08. Listening to events with Alpine
1m 44s
0%
09. Showing comment replies
2m 7s
0%
10. Eager loading on comments
4m 16s
0%
11. Preventing unlimited reply nesting
3m 46s
0%
12. Toggling editing
5m 54s
0%
13. Editing comments
1m 32s
0%
14. Deleting comments
5m 19s
0%
15. Adding simple avatars
2m 1s
0%
16. Automatically updating relative dates
9m 11s
0%
17. Handling deleted users
3m 40s
0%
18. Loading more comments
23m 9s
0%
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.
18 episodes•1 hr 40 mins•1 year ago
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!