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
09. Showing comment replies

Episodes

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

Transcript

00:00
Okay. So we can now reply to comments, but we don't see these replies.
00:05
Let's go ahead and get these output underneath the parent comment. Now, the great thing about this is we can actually reuse this same comment item component when we're displaying children. There's no need to create a separate one unless you needed
00:20
any additional functionality. So just underneath at the very bottom of here, let's start to iterate through all of the children. So first things first, let's add in an if statement to check if
00:31
we actually have any children. So let's say children and count. If that's the case, then we can start to iterate through. So let's create another container out here just to space things out a little bit.
00:44
So let's set the margin on the left eight. So these look like they're replies and we'll set the margin on the top to eight as well, to give this a little bit of space. So now we need to do is add in a for each on each of the comment children.
00:58
So let's say comment and children, and we'll just call these child. Okay. So inside of here, what do we do? Well, we're just going to use the same live wire comment
01:09
item for each of these children. So we want to pass a comment in that comment is now the child rather than the parent comment. And of course we want to give this a key.
01:19
So if anything updates live wire knows what to do. Okay. Let's just see what this looks like over in the browser. There we go.
01:27
Great. So all of these replies now that we've posted and now being shown, of course, in exactly the same format, cause we reusing the same component that we used here, and it has all of the same functionality as well.
01:40
Now that's a good thing, but it's also not a good thing because we don't want to allow unlimited nested replies. We'll fix that up a little bit later. But let's just go ahead and post another reply here and see what happens.
01:51
So I'm going to choose another comment and just say a reply hit this. And yeah, sure enough updates because all of these comments are being updated when we post a new reply. This is just getting in the fresh data and showing us each of the children.
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!