Displaying top level comments: Build a Livewire Comment System

00:02

Let's look at outputting top level comments. Remember over in our comments component, we are outputting all of the comments to the template. So we can go ahead and just iterate through these.

00:13

Let's go down here under our form that we've created and let's start out with a simple if statement. So let's say if comments count, because we don't want to show anything here if we don't have any comments.

00:24

Let's create our wrapper here with a margin on the top of eight, and we'll set some padding on the X axis to six, just to narrow these slightly. So now we need to do is just start to for each through these. So pretty straightforward stuff.

00:38

So for each comments as comment, let's go and start to output these. So we will go and just add the comment body in here for now. We're going to separate this out to a separate component purely because the comment itself is going to have its own functionality.

00:55

Let's take a look at what we've got here. And yeah, it doesn't look great at the moment. In fact, let's post another comment just so we can see what we're dealing with. Okay.

01:03

It looks like it's working. So for this, let's start to style out this outer wrapper, just to space these out a little bit. And we're going to use a border on the bottom and let's set that to say gray

01:14

100, but for the last comment, we do not want a border on the bottom. So we'll just say border and bottom zero. And that should give us the following. You can see a slight border in between here, but not from the last one.

01:28

Okay. So for the comment itself, let's go ahead and create our separate component. It's like I said, that's going to have its own functionality. We don't want to add all of this stuff to the overall comments component.

01:39

So let's make out a live wire component here. So let's say make, and we're going to call this comment item. Okay. Let's just start to output this out.

01:47

So let's say live wire comment item. And of course we are going to pass that comment into here so we can start to read the data. So each of the comments that we're iterating through now, because we're

02:01

using an overall wrapper here and we are using a inner component, we need to add a key to both of these. So when anything updates live wire knows how to hydrate this properly. So for the outer, we're going to say wire key, and we're going to output

02:15

something unique about this comment, which is just going to be the ID. And then we can do the same for this, but let's just use the shorthand here and say comment. And ID.

02:25

So there we go. We have got a nicely structured list now. So when anything else updates, it knows where to put everything. Okay.

02:34

So now that we've done that over in our comment item component, we know that we're accepting in a comment here. So let's go ahead and pull in the comment that we're outputting, and that's now going to be available in the template.

02:44

So over in the comment item, we can just start to output this. So after this, we will have successfully just moved this over to its own component. Okay.

02:54

There we go. So let's post another one. So let's say last or most recent and hit post comment. And there we go is nicely updating and we can see our comments.

03:06

Now, of course we want our comments, the latest ones to be at the top. So how are we going to do this? Well, if we head over to our main comment component here, let's go. And instead of just dumping these comments out here, let's start to order these.

03:22

So let's say latest and then get. That is of course going to put the latest at the top. And as you can see, we've got the most recent, let's just add another one. And yeah, everything stays at the top as we post these.

03:35

I've just noticed as well that, yeah, this is hanging around here. Let's fix that up before we move on. So when we post a comment just here, we want to go ahead and reset this form to do this, we just say this form and we can call a really handy reset method on there.

03:52

And we can specifically pass in just the body if we want to reset that, but we pretty much just want to reset everything. Let's try this out again. I'm just going to say, Hey, and yeah, sure enough.

04:03

We didn't set a default value for this. So under our form, let's go and make this just an empty string. Okay. Let's try this again.

04:11

Hey, and there we go. Great. Let's finish up the styling for each of these individual comments really roughly, and then we're pretty much done.

04:19

So if we head over to our comment item, let's start to style this up. Let's start out with some padding. So let's set or some margin. Let's set some margin on the Y axis to six, just so we have a little bit of

04:32

spacing between each of the comments. And then in here, let's start to just scaffold out everything that we need. So we want a sort of top level section here for the user, and then we want a bottom section here for the actual comment body itself.

04:47

So let's output the comment body again. And then for the user itself, let's go and set this to flex with item center. So everything sits next to each other and we'll space things out on the X axis by two. In here, we're going to have an image for the user's avatar, which we're just going

05:05

to leave as an empty source just for now. Let's set the background to black, just so we can see this. We'll set rounded to full and let's set a size here, which will set the width and height to eight.

05:17

So, so far looking like this. Great. And down here, we want the user's name. So let's go and set this to font semi bold, just to make that a little bit easier to

05:28

see, and we'll say comment user, which we already have, and we'll just grab the full user's name and yeah, there we go. Okay. Last is going to be when this was posted.

05:38

So let's set the text here to small and we'll just grab the created update. We'll be adjusting this a little bit later, so it's better, but let's say created that and we'll just say diff for humans, and that should be everything we need.

05:53

There we go. Two minutes ago. Okay. Let's just finish up the body here to separate it out a little bit.

05:59

And for this, we can just go ahead and add in a margin top of four and we should be good. So that's looking a lot better. And of course, any additional comments that we add are going to be pushed to the top.

Sign up to access "Build a Livewire Comment System" right now.

Episodes

Transcript

Episode summary

Episode discussion