Toggling post editing: Build a Forum with Inertia and Laravel

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.

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

Episodes

Transcript

Episode summary

Episode discussion