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
13. Editing comments

Episodes

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

Transcript

00:00
So we can toggle this edit state, but at the moment we don't have a method called edit. Let's fill that in and we should be done.
00:07
So let's create out this edit method in here. The first thing we want to do is authorize this. Of course, we don't want to be able to edit anyone else's comments. Next up, we're going to go ahead and validate our edit form just to
00:20
make sure that everything looks good. So let's call validate directly on there, everything we've already done. And then we already have access to the comment inside of this component. So let's go and just directly update that comment using
00:33
the data from the edit form. And we only want the body. Next up, we're going to do exactly the same thing that we did here. And we are going to dispatch the fact that we have edited a particular comment.
00:48
And that means that over in our comment item, we can do exactly the same thing as this to toggle editing back to false when we pick up that event. So everything we've already done just for editing. Okay.
01:03
Let's go over and try this out. So here's a new reply. I'm going to edit this, put an exclamation Mark on the end, hit edit. And yeah, sure enough.
01:11
I think we're picking up the wrong event here, edited, and that should have actually edited it and it did. Let's try that again. And I'll just say edited, hit edit.
01:21
And there we go. Everything is automatically updated. When we hit edit again, that's already been mounted. So the edited comment is back inside of that form.
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!