Build a Forum with Inertia and Laravel
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
39. Jumping to 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
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
Now that we have our reply functionality working, let's go ahead and work on this jumping to the correct post functionality. Now to demo this, I'm just going to add a few more replies. So let's just say hello here and let's do just another one again.
00:14
Hey there. And what we're going to do is set the pagination here purposely low. So we know that the next post that we create is going to go into the second or third page. So I'm going to come over to the discussion show controller and let's go and adjust this pagination to show maybe just two per page. So we know now that we've got three pages and if we just put one more reply in here.
00:42
That is, of course, just linking us back to the first page, which we would expect, but the next reply that we create will go into the fourth page. Now, there's no way in Laravel natively with pagination that we can access or find out what the next page is going to be. We can do some weird calculations with this, but there's a much simpler way that we can handle this. Now, the first thing that we're going to do is look at how this functionality is going to work.
01:09
This is going to be via a redirect eventually. So what we want to do is when we actually store a post. So we just filled this in the last episode. What we actually want to do is redirect to this URL, but we want to add into the query string the post that we want to link through to by its ID.
01:28
So we'll have the post ID in here. And then by the time we hit the discussion show controller at the top, we're going to calculate which page we actually need to forward these over to. And then we're also going to add into the query string the post that we want the browser to scroll to. So if that's at the bottom of a page, it's going to work.
01:50
Now, this has two benefits. This whole functionality has two benefits. The first thing is wherever we need to link to a very specific post within a discussion, we can do that from anywhere in our app just by giving the post ID. Our back end will calculate what page the user needs to be on, and it will also then scroll to that position.
02:11
So this just means once we've finished up, we can just conveniently link to any single post in any single discussion. So we're going to change over the way this works very quickly just by redirecting to a route inside of here. And then we're just going to add on to the query string here the post that we want to go through to. There's probably other ways to do this, but this is just generally how I do this.
02:33
So we're going to go ahead and pass the post ID in here, and that's pretty much what we need to do. So now over here, when we put a new reply and hit that, you can see that we get post 19. What we want to do at this point is check if we have this post present in the query string, calculate the page and then redirect the user over to the correct page. In this case, it's going to be page four, but obviously it's going to be different for every single post.
02:57
So over on the discussion show controller, this is where we want this functionality to be. So let's quickly map out what this check is going to look like. We're going to go ahead and create an if statement, but at the same time grab the page or the post ID that we're trying to access. So we're going to use get and post.
03:15
And if that exists, then we're going to return a redirect inside of here. So we're going to redirect to the discussions show route, and we're still going to pass the discussion down into that like so. But we are going to go ahead and include in here the page, which at the moment we're not sure of. So let's just add that as one.
03:37
And we're going to add a post ID item onto the query string as well, which is going to be that post ID. So this is obviously going to jump to the correct page when we fill in the functionality to calculate it. And the post ID is going to be appended on. So we can scroll down with a view library to go ahead to that post.
03:55
So let's just try this out. Let's go over to a post that we've got here. And just to update this, let's go to our post view component. And let's pull these down here.
04:09
And let's bind into this the ID of this element. So let's say we want this to be post hyphen and then the post ID inside of here. So what that's going to do is for every single post within this discussion, whatever page we're on, we're going to end up with an ID of post and then the ID.
04:29
So we've got post 19 here. So if we go ahead and set post to 19, that now redirects us to the page that we want and to post ID in the query string, which we can use to push the user down to. So now all we need to do is really figure out how to grab this page number.
04:47
Let's extract this out to another method just so it's a little bit cleaner. So we're going to call this get page for post. And we need to pass the discussion in here. We'll talk about why in a second.
04:58
And we're going to pass the post ID into this. So let's just create this method here at the bottom of the controller. So get post or get page for post. And we're going to accept a discussion into here and then the post ID like so.
05:14
So that's just going to be an integer or a string. We will fill that in later. The first thing we want to do is find the index of the post within all of the discussion posts. So let's just try this out.
05:26
We're going to go ahead and die dump on discussion post just to see what we get here. So we're going to switch this back over to post 19. And sure enough, we get a Laravel collection, which is what we would expect when we access a relationship like this. Now, with a Laravel collection, we have a method on this called search.
05:45
What this will do is obviously by some sort of callback, it will look for a post. But what this will actually return to us is the index of this post in the discussion. So if we just look at this and we'll find post ID of 19, which is probably the next, yeah, it will be the last one. We need to find the index of this so then we can calculate it based on how many items we're displaying per page.
06:11
And then we can perform a calculation to work out what page that should sit on. So let's go ahead and just assign this a variable because that kind of makes sense. And then we'll just die dump on that index just down here. And let's go ahead and fill in the condition for this.
06:25
So we'll use an inline closure for this. We'll get a post for each of these. And the condition is really simple. It's just where the post ID equals the post ID that we're passing into here.
06:37
And we won't use strict type checking there just in case that's a string. So basically, find the post within the discussion posts that equals the post we're requesting in the query string. So let's go ahead and just give that a refresh. And you can see here we get an index of six.
06:54
Now, if we just look at how many posts we've got in here again, so discussion and posts, let's just see here. So this has seven items. So this is zero index of zero, one, two, three, all the way up to six. So we now know the position of that post.
07:12
Now, if, for example, it was post 17, we'll get index four. So we know the rough position of that within all of the posts. Because we're using pagination, we can't look within the pagination because it's only going to contain the first two, three results or 10 results, depending on how many you're displaying. So to calculate the page based on the index of that particular post within the discussion posts, what we want to do is go ahead and first of all, add one to the index because it's zero based.
07:42
So let's do that first of all. And we'll stick that in brackets. Divide this by the amount of posts that we are or pages that we're currently showing. So we've got two here.
07:52
So we're going to divide that by two. And if we actually die dump on page here and go back over to post 19, we know that the page is page four. Now, we're getting 3.5, which is obvious because we are just performing a calculation on the index of a post within these posts. So what we're going to do is we're going to round this up because when we're working pagination, it's always going to be the furthest away.
08:20
So the rounded up version of this. And sure enough, we get four. So lastly, we're going to go ahead and just make sure this is cast to an integer because we don't want to redirect the user over to page 4.0 and we end up with page four. So let's just test this out.
08:36
If we go over to this discussion here and we look on page two at this post here, let's find the ID of this post real quick. That's 16. So if we go ahead and switch this to post 16, we know we're on page two. Sure enough, we get page two.
08:53
So we now are calculating out the page that we need. Now, there's one real problem here, and that is if we go ahead and update our pagination, this functionality is obviously going to break. So what I'm going to do is at the top of this controller, we're going to create out a constant here. And let's make this protected.
09:12
And we're going to call this posts per page. That just means that what we can do is reference this in one place, and then if we need to update this, it updates everywhere and everything should work. So let's reference the posts per page just here. And let's go ahead and reference the posts per page here.
09:30
So finally, we're going to return that page. And now that is going to, if we have the post ID, redirect us over to the correct page with this post ID in the query string. And that will send us off down the page to the right post. So we're going to test this out with post 19.
09:47
And there we go. We're forwarded over to page four. Let's go ahead and try this with post 16. And we know that was on page two.
09:56
Sure enough, we're redirected over to the correct page. So looking for them posts within the entire list of posts means that we can now grab the index, divide that by the per page and round it up to get the page that we need to go through to. So a pretty simple calculation, but something we really have to do because Laravel doesn't handle this natively for us. Just while we're here and to see this in action, what we're going to do is over on the discussions list here, we're going to link up the last post here to actually go through to the last post.
10:32
At the moment, this links through to the discussion, but it doesn't actually go through to the correct page. So the last post was by me. And when I click on this, it's just obviously not doing anything. It should redirect us over to page four.
10:46
So let's go ahead and fix this up. We know that we need to open up our discussion component and let's look for last post and let's go ahead and forward this over to the correct page. So we're really all we need to do here is just back tick this string so we can go ahead and output the root, but also then output the post into here. And we know that we've got the latest post here, so we can just very easily add in the latest post ID.
11:16
As I mentioned earlier, anywhere in your application now that you need to go into a specific post in the discussion, you can just reference the ID. It's as easy as that now. So now when I click on this, we go through to the latest post. And of course, if there are multiple posts on this page, we will eventually get to the point where we scroll down to the correct post, which we're going to cover in the next episode.

Episode summary

In this episode, we dive into making it possible to "jump" directly to a specific post inside a paginated discussion thread. Now that our reply system works, we're focusing on a common discussion feature: when you click a link to a specific post, even if it's buried on another page, you'll land exactly where you need to be.

We start by adjusting our pagination so it's easy to test whether the app puts us on the correct page. The challenge is that Laravel's default paginator doesn't natively know which page a particular post lives on, so we need to figure that out ourselves. The approach here involves adding the target post's ID to the URL, then having the server-side controller calculate which page that post belongs on. Once that's figured out, we can redirect the user to the right page, with the post ID in the query string for easy scrolling.

You'll see how to find where a post sits within all replies using Laravel collections, calculate the correct page number, and then round up so everything works if the post is near the end. To make this future-proof, we also set a constant for "posts per page" so our calculation stays solid even if the per-page count changes.

Lastly, we improve the discussions list so clicking on the "last post" takes users directly to the right page and post, not just page one. Now anywhere in the app, you can easily generate a link to any specific post in any discussion! In the next episode, we’ll get fancy and actually scroll users to the post once the page loads.

Episode discussion

No comments, yet. Be the first!