This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
41. Toggling post editing

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

Transcript

00:00
So we're now on to editing posts, and the first thing that we're going to do is toggle the edit form if we actually own that post. So the first step is to tackle the authorization around this and only showing the edit link if we're allowed to edit a post.
00:15
So I'm currently signed in as Alex, so these are my posts here. This is the only place that we should see the edit link to toggle the edit view. So we're going to start over in the post policy here. We don't even have one, so let's go ahead and create that out first of all.
00:31
We have a discussion policy, of course. We've already covered that, so the rest of this should make a lot of sense. So let's make out a post policy. Let's go ahead and register that over in Auth Service Provider like we did with our discussion policy.
00:44
So let's switch this to our post and our post policy. And let's head to the post policy, get rid of the constructor because we're not going to need that. And let's create out a new method in here to check if we're allowed to edit a specific post. Now, we already need to be signed in, so we don't need to mark this as optional.
01:03
And let's go ahead and add in our post here. And what constitutes being able to edit a post? Well, it's just if we own it. Of course, you could add other authorization around this,
01:14
but we're basically just going to check if the user ID equals the post user ID. That's pretty much all we need to do. Let's remind ourselves what we did over in the discussion resource around this. We had this user can property with anything that we can do within a discussion.
01:30
Well, we can do the same thing with the post resource here and pretty much copy and paste this. And we need to know if we can edit this particular post. So can we edit this resource, which is the current post that we are referencing? So now that we've got this out in here, we should just be able to use this check to show the edit form.
01:50
Then we can use this authorization on the back end as well to make sure that no one is trying to edit posts that they shouldn't be able to. So over in the post component, let's look for that reply link. And let's go ahead and just duplicate this down to edit. So let's call this edit.
02:07
And we want to only show this if the post user can edit. And we'll get rid of this on clicks. We don't have anything for that just yet. So now we see edit on just our post.
02:20
As easy as that to show the link based on that authorization rule. So next up over on the post component, we're going to just import use form from inertia. We've already looked at forms. That should be pretty obvious.
02:37
And we're also going to go ahead and put in ref from view so we can toggle the editing process. So let's go ahead and just pull this down underneath our props. And then let's create out an editing ref here, which, of course, by default is going to be false. What we can also do is create out an edit form by using the use form composable.
02:59
And we know we just have a body in here. Now, the body needs to have an initial value to this. So this is just going to be from the post that we get through into this individual post component. And it's just going to be the body of the post.
03:13
So let's go ahead and define out a variable for props here. And then we can just say props post and body. So now when we hook up the edit form to the form that we're going to toggle via this ref, it will already have the body of the post in there.
03:28
Let's just double check, because remember, we added the body preview and the body markdown. That's why we need the original body in here, because we don't want to edit the HTML that's generated for the markdown. OK, so now let's just hook all this up so we actually toggle and text area with this value in.
03:47
So let's go over to the edit button that we've got here. And now we can actually add in this click handler. And that's going to be editing equals. And we can either toggle this or just set it to true,
03:59
because we're going to have a cancel button in there anyway. So if we head up to where our post body markdown is being rendered out in here, we basically just want a form, but only if we're editing. So we're going to have a form in here.
04:12
Otherwise, we're going to show the actual markdown of the post. We effectively just want this to be replaced out inside of here. We're going to have a text area element. So let's just make sure we import this.
04:28
Import text area. And that's from our text area components. And then if we come back up to here, let's go ahead and add in the model to that edit form and to the body. We can also add some other details in here as well, like body.
04:45
We'll add a class here of width full, so it goes to the full page. And we can add some rows in here. We can give a specific height. It doesn't really matter.
04:54
So we'll add more to this in a second, like our validation messages. But what we should now be able to do is hit edit. And then we see that the post body is already put into here. And we can go ahead and add a button to cancel this off, to untoggle this,
05:07
and of course, also to submit this to post through. So we'll go ahead and import the other components that we need for this. We have an input label and we're going to have a input error. And we're also going to need our primary button as well.
05:27
So let's pull all of them in and then just add them to this form. So let's look for that text area. And this is going to be the input label. Great, and that is for the body.
05:38
Let's just reference another page that uses these, because I always tend to forget the things. So the value is email in that one. So that needs to be value body. And we're going to set a class here of screen reader only.
05:50
We also want the input error. So let's go ahead and just pop that in there. We'll set a margin top and that is going to be edit form errors and body. And then finally, we want a primary button to actually submit this.
06:05
So let's look for that. And we can just go ahead and grab this. Might as well just grab as much as we can here. So under here, let's create out a div and put this inside of here.
06:17
Get rid of our disabled and class for processing. And we can get rid of the class for this as well. So this is just going to be edit. And then next to this, we want a button to cancel this.
06:30
So this is going to cancel this off. Let's go ahead and say V on click. And that's just going to set editing back to false. So let's just preview this really quickly, see what it looks like.
06:39
And we can always tidy it up. OK, great. So we've got our button in there. We've got our cancel button.
06:44
So now we can actually toggle between this edit state. So let's just style this up really quickly. So we're going to set this as flex. And we'll set item center.
06:55
And we'll set a space on the x-axis to 3 here. And we'll set a margin on the top of 2 just to space this out a little bit. And for the cancel button itself, let's go ahead
07:05
and just set the text to small here. Remember, we're going to set this as a type of button because we're doing this within a form. And we don't want this to actually submit the form.
07:14
So when we edit now, there we go. We've got the ability to cancel that off or, of course, hit Edit to submit this through. OK, finally, let's just get rid of the action
07:22
here because we're not going to need that. And we now have our edit form in here, which we're going to go ahead and submit through and actually edit the post in the next episode.
62 episodes6 hrs 54 mins

Overview

Ready to build a forum with Inertia and Laravel?

Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.

So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!