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

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

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

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 episodes•6 hrs 54 mins•1 year ago

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

Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.