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

43. Deleting 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

Deleting posts is going to be pretty simple. We literally just need to delete the post and hopefully all of our database constraints will take care of the rest.

00:09

So really, this is just going to be an exercise in hooking up the permissions for this, the authorization for this, and just making sure that this goes through to the back end properly and we see an update on the page. So why don't we start with the post policy?

00:25

Because if we think about it, we've got edit here to destroy a post or delete a post, let's call this delete, we pretty much want the same condition here. So only users that own them posts can actually delete it. Next, we'll head over to the post resource like we did before.

00:43

And really, we can just duplicate this line down. So let's just switch this out to delete. Now that we've done that, we know that over on our post component, if we head over to the edit label down here, we should just be able

01:00

to find that to just duplicate this over, go ahead and switch this out to delete and we can get rid of the click handler there. That's not going to be the same, of course. And we will just put delete here.

01:14

So now we only see delete, of course, on the posts we have created. Of course, this one belongs to someone else. So let's go ahead and hook this up to a form really, really quickly, or at least to some sort of action.

01:27

So let's go ahead and say V on click and we will just reference a function called delete post, which doesn't exist at the moment. But we can go ahead and create this out down here. So delete post.

01:40

And there we go. So with this, we're going to make a manual request to our back end to hit a controller, which will, of course, authorize what we're doing and then go ahead and refresh everything for us.

01:52

So the first thing we'll do is just head over to our web routes and figure this out. This will need to go inside of auth. This will be a delete request and that will be post slash post. So we're deleting a specific post.

02:07

Then we'll hook that up to a controller and we'll call this posts and destroy. So let's create this controller out. It's just going to be post destroy controller. So make a controller out here called post destroy controller.

02:22

And let's switch this out now. So we've got the route registered in here. So post destroy controller. Great. So if we head over to this now, let's create out an invoke magic method.

02:31

And once again, we're going to create out a form request for this. So let's go ahead and make a request called post destroy request. And we can just go ahead and add that straight into here like so. We'll get the post in here through route model binding.

02:48

And like I said, all we want to do here is just delete the post. Of course, we can trigger other actions here if we want to later. But for now, that's all we need to do. There's nothing special that we need to do here.

02:58

So over in the post destroy request, let's just authorize this really quickly. So auth user can delete. And remember, we can reference this directly because we are working with a request. So over in the post component now,

03:13

we can go ahead and hook this up by just sending a request through with our router. Now, if we go ahead and make sure that's imported, first of all. So it's not at the moment. So let's import router and that comes from inertia.

03:28

So specifically. Using that to post through here, let's do a really quick confirmation here, we'll just use window confirm for now, you can always switch out to another solution later and just say, are you sure?

03:42

And then if the user press is OK, we're going to go ahead and make a delete request with the router through to that post dot delete route. And we're going to pass the post through,

03:54

which we know comes from our props, we've already used that here. So it's passed that in. And then for the options here, let's go ahead and preserve the scroll, because once that's deleted,

04:03

we don't want to really scroll up to the top of the page. Now, let's just make sure we've got the naming right here. And yeah, that was called destroy. So let's switch that over and we should be good.

04:12

Let's try this out. So I'm going to go ahead and delete this post here. Click cancel. Nothing happens. When I hit OK, sure enough, it is deleted.

Episode summary

In this episode, we dive into adding the ability for users to delete their own posts. It actually turns out to be a fairly straightforward process! First, we set up the proper permissions by updating our post policy to only allow the owner of a post to delete it. This ensures users can't delete posts that don't belong to them.

On the front-end, we duplicate the edit button and turn it into a delete button, but only show it for posts the current user owns. Then, we create the deletePost function that gets triggered when the user clicks the delete button.

We hook up the backend by creating a new route and controller to handle deleting the post, making sure it uses the correct authorization and request class to keep things secure. On the actual click, we pop up a quick confirmation using window.confirm, and if confirmed, send off the delete request. We also make sure to preserve the scroll position on the page after deleting to keep things feeling smooth.

After wiring everything together, we test it out, and everything works—posts get deleted, and only by their rightful owners! This episode is a great, practical look at tying together permissions, UI, and backend logic for a common feature.

Episode discussion

No comments, yet. Be the first!