Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Already a member? Sign in to continue

Playing

42. Editing posts

Episodes

0%

Your progress

Total: 6h 54m
Played: 0m
Remaining: 6h 54m

Join or sign in to track your progress

01. Introduction and demo

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

Transcript

00:00

Now that we can toggle the edit functionality of each of these posts, let's hook this up to actually edit it. So over on the form that we just created in the last episode, let's go ahead and add in a submit prevent event handler and we'll hook this up to an edit post function inside of here.

00:20

So let's go ahead and create this function out just down here. And of course, what that's going to do is submit the edit form through with the body to the correct place. And that place is, of course, going to be another controller. So let's go ahead and make out a post patch controller and we'll go ahead and fill this in.

00:39

So let's go to our roots, first of all. Obviously, we need to be authenticated for this. So let's go ahead and set this as a patch request through to posts and then slash and then the post itself. So let's switch this to the post patch controller and we'll say post stop patch so we can reference it.

01:01

Now, we'll start out directly with the form request here, so let's go ahead and make out a request for this. That's going to be post patch request. And let's pull this directly into here, post patch request. And we'll call that request.

01:19

And of course, we're going to get the post in itself here. So over in the post patch request, pull the namespace in for post. We are going to authorize this. We already created that over in our post policy, the ability to edit.

01:32

So really easily, we can just do the same thing. Auth user can edit and this post that will nicely authorize that for us. So we know that we are not allowing anyone to edit anyone's posts. So for the rules, the body is just going to be the same.

01:48

It's just going to be required. And of course, we can change that globally as well. So now that we've got that authorization and validation done, let's edit this post. In this case, it really is as simple as just updating the original post from the request and the validated data.

02:07

So in our case, that's just going to be the body. And then we can just go ahead and return back. So we just see the updated data. OK, so we've got the request in there.

02:16

Let's go ahead and actually submit this through. So we're going to say edit form and patch. And we're going to go through to the posts and patch route. Really importantly here, we want to preserve the scroll of this because we don't want to bump the user up to the top of the page.

02:33

And then once this has been successful, we want to go ahead and set the editing value back to false because we want to hide the editing text area. OK, let's try this out. So we'll go ahead and edit this to something else. Hit edit.

02:50

And that looks like it didn't work. So let's just figure out what is going on here. And post dot patch. OK, yeah, of course.

02:57

So we actually need to pass the post through to this. So we obviously know which post we're editing. So we can access that through our props and we should be good. OK, let's try again.

03:09

So let's edit this. And that should close that off after a successful edit. And there we go. Inertia has automatically picked up the new data that's being sent through on this particular route.

03:20

And of course, that has properly edited that post out. And for editing, that's pretty much it. We can do anything now. We could add some code in here if we wanted to, and everything would be nicely updated because it's rendering out the markdown for this as we've already built out.

Episode summary

In this episode, we finally make our post editing feature work for real! Up until now, we've just toggled the edit mode, but in this video, we actually wire up the edit form so users can update their posts.

We start by hooking up the edit form submit event to an editPost function. Then we create a new patch controller and route for updating posts. We handle the validation and authorization (making sure users can only edit their own posts) using a new request class and our existing policy.

Once that's in place, we update the post with the new data, keep the scroll position on edit (so the page doesn't jump around), and reset the editing state after a successful update. We also do a quick little debugging session when things don't work the first time, and fix it so the correct post gets edited.

By the end of the episode, you can update any post you own, and InertiaJS takes care of updating the data in the UI right away. Nice! Now your edit posts feature is fully functional.

Episode discussion

No comments, yet. Be the first!