Winging A Laravel Comment System
This episode is for members only

Sign up to access "Winging A Laravel Comment System" right now.

Get started
Already a member? Sign in to continue
Playing
04. Listing comments through a Blade component

Episodes

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

Transcript

00:00
So really what this episode is about is figuring out on this page, like an article that we're viewing,
00:07
how do we conveniently list out all of the comments for this article, plus include all of the other functionality that we would want to include for an article. So this varies depending on whether you're using plain blade, whether you're using something like inertia with view, or if you're using live wire,
00:26
but the overall goal remains the same. So depending on the stack you're using, you can go ahead and tweak it. What I really want to figure out here is on this show.blade.php page for this article, how do I dump the comments out here in a way that I can just take this component and reuse it anywhere and just have the comments for that
00:45
particular model displayed? With probably, with the way that we're building things here, going to be a blade component, which again, you can extract out and build in view, inertia, whatever you want to do. Okay, so let's just make this overall layout a little bit better first of all. So I'm going to go ahead and create out a div just to surround this slot content.
01:08
We'll just add a little bit more styling here. We're going to set mx-auto and let's say a max width of, let's say 2xl. I'm just going to set a background here so I can see this. And if we take a look at that, yeah, that looks okay. So let's just make that a little bit smaller actually, xl, and that's going to be our content sat in the middle. We can add some padding on the y
01:31
of, say, let's say 6. And yeah, I think that's fine. Okay, so over on the actual page now then, we can add in an h1 for the article title. And let's get rid of this div because we're not going to need that. In fact, yeah, we are. We're going to have a div surrounding the header and the body of the article, which we don't have at the moment, but that's fine. Let's go ahead and make this text,
01:59
let's say 2xl and font semi-bold. And then down here, this is where our comments are going to go. And we'll probably have a margin on the top there like that. So this will be the title of the article, the body will be here, and then our comment component, which is going to read the comments from whatever model we're dealing with. And that will be dumped out there. So let's just start out
02:21
by creating out a component for this. So let's say make component, like we did with our app layout, but this is going to be called comments. So we are going to create this for the class because we might need to inject some data through this a little bit later. But for now, let's just go ahead and say x comments. And let's go over to comments.blade.php. And we'll just say
02:44
comment component in here. And yeah, not with the directive. And there we go. So great. The first step is that we can just take this comment component and we can put it on a episode page if we want to. That's the sort of goal here of this whole thing. Now the problem with that is that at the moment, this comment component doesn't know what's going on. So there's no context to it.
03:08
So ideally, what we want to do is pass like a model prop down to this. I think model is probably a good name for this because of the polymorphism. We wouldn't want to say article because it could relate to an episode. So let's just call this model for now. And the model, of course, is the article. So let's go ahead and grab that. So we're going to go over to comments.php, which is the
03:31
actual component itself. And in here, we are going to end up with the model. So let's type in this to a model. And let's say model. And we will make this public. So now that we've got this in here within the actual class of the component itself, if we go over here and let's just have a look here. Model is not instantiable. And let's see why this is. So different comments. Maybe we could get rid of that.
04:00
Yeah, let's get rid of that and just see what we can do in comments here. So let's say model comments and count. And yeah, undefined model. So up here, we're going to say props model. And yeah, there we go. Okay, so we'll just leave it at that for now. We won't overcomplicate things that we don't need to. So really here, what we can now do is do like a
04:27
for each on all of the comments, we can output them. When we go to create a comment. So when we have like a little box up here with an input, or in our case, it's going to be a text area, we know which model we want to create the comment for. So that's going to be really helpful. So there's a bunch of stuff that we can now do now that we're aware of this model. And there are
04:51
other ways to do this. But let's just keep this as it is for now. So we can actually use this count just to say how many comments there are for a start. So let's do this now. Let's call, let's give this an h3. And let's say comments. And we'll put this in parentheses. And yeah, I think that should be good for now. Let's just go over. Yep, comment zero. And let's just make this a little
05:15
bit bigger. So say text, large font, semi bold. And there we go. Great. So the comments will show under here, or if we don't have any comments, obviously, nothing will be in there. So let's go down here and say, if comments, or in this case, article, no, what is it model comments, length, or count, then we want to show a bunch of stuff. Otherwise, in fact, what I'm going to do is say,
05:48
display comments here. And then I'm going to do an unless down here, just to keep things a little bit tidier. Personal preference. End unless. And I'm going to say there are no comments yet. And that will be if there are not any. And that should show, but it doesn't. So let's have a look. So let's have a look to model comments. Oh, sorry, unless is the opposite already. So we get there
06:18
are no comments yet. Great. Okay, so let's just make this a paragraph. Let's, we could probably separate all of this content out from the header. Makes a lot more sense. And let's make this for the margin 23. I think that's good for now. We don't really care too much about the design at this point. Okay, so now we have the ability to list through all of the comments that we have.
06:44
Let's just get started on that really, really, really basically, we're going to be building up this sort of inner comment that we're going to iterate through a little bit later. So there's a couple of options here, we could use if or we could use a for else loop on this. But let's just keep things simple for now. So I'm going to say for each model, keep saying article. But remember,
07:06
this is a reusable component, we'll see this in action in a bit for each model comments as comment. And then in here, we're going to have an x comment component, we're going to pass through the comment itself to view. And of course, this is always going to be completely irrespective of which model it's associated with. So at the moment, that's going to break,
07:28
we don't have it. But let's go ahead and make out a comment component. And I'm actually going to call this a comment item component, it just makes a little bit more sense to call it items. So we know exactly what this relates to. Because remember, we already have a model called comment. And I found this get really, really confusing. Otherwise, what you can also do for comments as
07:47
well, the overall comments component we've just created is make that comment list component, just to make it really clear what this is. So now that we've done that, that should, yeah, it doesn't work. But yeah, we can figure this out. So we've got x comment item. And there we go. Now we don't have any comments yet. So let's just add some into the database.
08:10
We can either do this manually, or using a factory, let's do it manually. So I'll say nice article. Let's fill in the created app, update that date, the commentable type, remember from our morph map is article and the commentable ID is one. And let's duplicate this down and say cool article, whatever, it doesn't really matter here. And we'll do the same thing. But I'm just
08:33
going to make this a little bit more recent. So we can get our ordering correct as well, which is super important. Give that a refresh. And we've got two comments now. Great. So comment item is going to, if we just open this up, it's going to accept in a comment prop. And we are going to dump the comment body just out here. There we go. We've got nice article,
09:00
cool article. And we can start to start this up as we go. So let's just output some of the most important information here. And then we'll start this up a little bit later. So the article, comment author. So what do we call that? I think we just call it user. Yeah, we did. So comment user and name. And let's put that in a div. And let's put this in a div.
09:32
And let's have a look at that. Yep. So let's go ahead and just make this semi bold. And let's add some spacing between each of these things. So what we could do is actually do this in here. And we could say space y3. There we go. That's nicely spaced out. I'm going to leave it at that for now. We've got the user's name. We've got the comment. We do need to think about
10:02
ordering. And we also need to think about the amount of queries here because we are now running into an n plus one problem, which if you're not familiar, if we just go ahead and change these over, and we take a look at this, you can see that the queries just keep going up for the amount of comments that we have. We haven't even introduced pagination yet, but that's still a problem.
10:23
So what we're going to do is just leave this as it is for now. In the next episode, let's focus on the two things like ordering and egoloading, which is going to be pretty difficult because we're going to need to think about how we egoload and order at this point without doing too much in our blade templates.

Episode summary

In this episode, we're working on displaying comments for an article page in a Laravel app – but in a way that keeps things flexible and reusable, no matter what kind of "model" we're working with. The goal is that we can use our new comments listing on articles, episodes, or anything else that might be "commentable."

We start by cleaning up the layout a little bit, then dive into making a x-comments Blade component. We make sure our component accepts a model (so it knows what to fetch comments for), and add the ability to pass that along from the parent page. This means our comments code can just be dropped in wherever we want to show comments, nice and DRY.

Once that's set up, we create a simple system to loop through and display each comment, making another small Blade component (x-comment-item) for each individual comment. We wire up some dummy data, test it out with a couple of test comments, and display both the comment body and the author's name with some basic styling and spacing -- nothing too fancy yet!

Before wrapping up, we hit on some common issues, like the N+1 problem (lots of database queries per comment!) and the need for proper ordering of the comments. These problems are left as "to-dos" for the next episode.

In short, you'll see how to:

  • Build and structure a reusable comments list Blade component
  • Pass models into components for dynamic behavior
  • Create a basic comment item display
  • Seed some dummy data and see it all come together on the page
  • Spot performance hiccups you'll want to fix soon

Coming up next, we'll tackle fixing the ordering and optimizing the database queries!

Episode discussion

No comments, yet. Be the first!