In this episode, we tackle how to edit comments in our app. Right now, we can toggle the edit state for a comment, but there isn't actually a method in place to handle the editing itself. So, we start by building out an edit
method in our component.
First up, we make sure to authorize the action—after all, we don't want users editing each other's comments! Then, we validate the data in our edit form to make sure everything checks out. Once that's done, we update the comment using only the body
from our validated form data.
After updating, we dispatch an event to let other parts of our app know that the comment has been edited, which also allows us to toggle off the edit state in the UI—just like we did when a comment was added or deleted.
To wrap things up, we jump over to the browser and give this a spin: we edit a comment, submit the change, and see it instantly reflected in the UI. We also fix a little mix-up with which event we're listening for, and confirm everything's working exactly as expected.
So by the end of this episode, you'll have a working way to edit comments with authorization, validation, and real-time UI updates!