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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.