Playing
01. Introduction and demo
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
So I'm sure you've seen a comment system before, but let's take a look at exactly what we're covering in this course. Now, the first thing to say is that we're currently on this article page here, and we have the ability to comment on an article.
00:15
Now, what we're going to be doing here is setting this up so we can attach comments to any model type. So we're going to use an article as an example, but then you can pretty much just take this entire comments component, drop it into anywhere and
00:30
have this work for any type of model. For example, you might have articles or you might have courses that also need to have comments enabled for. So we can see this in the code.
00:40
If we just open this up, this is all we need to drop in here. And as you can see that we just pass in the model. And of course there are a couple of things that we need to attach to each of the models that need comments, but we can very, very easily add that in.
00:55
Okay. Let's go ahead and just post a comment in here and see what happens. And yeah, sure enough, you can see that this comment has been posted. We don't have avatars right now, and this date's a little bit funny, but we're
01:05
going to be sorting that throughout the course. Okay. So let's go ahead and edit this. So very, very simple.
01:11
We switched to a text area again. I'm going to hit edit and yeah, sure enough, that gets edited. We can also delete this and we have a very basic confirmation here. And let's go ahead and reply.
01:21
So we have nested replies here. These are capped at one level deep, but you can go ahead and adjust this if you need to. So let's just go ahead and post in hello here.
01:30
And yeah, there we go. Sure enough, we get this and we can do exactly the same thing for any of the nested replies that we own. Now, of course, if someone else comments here, we won't get the
01:40
ability to edit or delete this. So we'll be attaching permissions to this to guard against people editing or deleting other people's comments. So very, very simple system.
01:51
The beauty of this is, like I said, you can just drop it anywhere that you need and it will just work. And then you can go ahead and expand on any of the features that you need in this comment system.
18 episodes•1 hr 40 mins•3 months 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!
Comments
No comments, yet. Be the first to leave a comment.