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
08. Tackling pagination in Inertia
Episodes
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
OK, so let's tackle pagination in Inertia. So what we're going to do here is first
00:05
of all, just bump down the pagination to one per page. We don't see anything yet, of course, because we've not built pagination. But if we manually set the page here to two, you can see the next topic or the next discussion.
00:18
So we're going to go ahead and build out a separate pagination component because we're going to need to use this on the discussions page as well. So we'll put this under the forum section here. In actual fact, this could be used elsewhere.
00:31
So let's put it under the main components. And of course, we're going to call that pagination.view. Now, before we start to fill this component in, let's go over to the forum index and just check out the data we have
00:45
for our pagination. So if we head down to where we've got our discussion just here, let's just dump the discussions object out on the page. So inside of this, we have this meta object just here,
00:59
which gives us the current page, all of the other information about pagination. But it also contains the pagination links just here. So these are pretty much just all of the links we need to iterate through and output onto the page.
01:12
And this is pretty much how Laravel comes with pagination by default when you're working with Blade. But of course, because we've now moved over to view, we are going to have to build this ourselves.
01:22
But it's not too much trouble. So let's pull this pagination class in or this pagination component in just here, and we'll go ahead and import this. So let's pull in pagination from pagination,
01:39
and then let's go down to this pagination and we're going to pass into this that meta object that I'm going to call that pagination. This is going to be discussions.meta. OK, so we can head over to this pagination
01:52
component and under our script section, we can go ahead and accept this in as a prop. And we'll call that pagination, and this is an object. So inside of here now,
02:05
we're exclusively going to work with pagination as this prop and then the links. These are what we want to start to iterate over. You can see the first one here is previous. That's going to be the previous link.
02:17
And then we have page one. We have page two, and then we have the next link. So all we need to do here is just iterate over these. Before we do that, we're going to go ahead and pull in the link component
02:28
from Inertia because we're going to need to link through to this properly, of course, without refreshing the page. So we'll pull link in from Inertia.js view three, and then we'll add this link into here and then just start iterating over each
02:42
of them objects. So we're going to say link in pagination dot links, and we'll give this an href for now. We'll just set that to a forward slash and we also need a key in here. So let's set that to the label because that's unique.
03:01
OK, so let's unbind this just so we can test this out. And if we give that a refresh, yeah, we don't see anything at the moment. So that is just because we haven't given this a title. Let's go ahead and do that now.
03:14
Just end that tag off. And in here we'll say link and label. Let's have a look. OK, great. So although this doesn't look great at the moment,
03:26
it is actually going to be functional as soon as we add that href in. And you can actually see the previous link one, two and the next link. So for the href, all we need to do here is bind in link dot URL. And now we can actually hit next and go
03:43
to the next page, previous and go to the previous page. And we can click the actual individual page numbers as well. So all that's left to do is just style this and a couple more tweaks to this as well. The first thing you'll notice is that the link label has an entity in it.
03:58
So ideally, what we want to do is actually bind this in as HTML. So link label rather than have the label in here. So we can actually self-close this now. And that should be good. Let's just have a look.
04:11
And there we go. So we now have these arrows which are HTML entities being rendered out correctly. I'm going to show you in a minute how to get rid of them and customize the previous and next links if you need to. But let's go ahead and just style this up.
04:23
And we can go ahead and get this looking a little bit better. So I'm just going to pull all of these attributes down just so we have a little bit more space to work with. And let's add some styles in here so we can wrap this in an overall nav
04:39
component, I think, and then each of these links will be part of this nav. Kind of makes sense. And for this nav component, we'll set this to relative in case we have anything trying to come out of this container.
04:52
And we'll set this to justify center. That's just going to put everything in the center here for us, which kind of makes sense. For each individual link itself, we're going to set these to a flex so we
05:03
can give it some padding, but center the text inside of it. So we're going to say item center and justify center, and then we're going to go ahead and set some padding on this on the X axis and the Y axis will vary that slightly. We'll set the text to small.
05:17
We'll set the rounded on this to large and we'll set the text to say gray 600. So that should space things out a little bit and make everything look a little bit nicer. Now, the reason that we've gone ahead
05:29
and set a rounded large on this is we're eventually going to have a gray background for something that's been selected. So BG gray, let's say 400 just to demo that. So this is how it's going to look
05:43
when we're on the item that we have currently selected. How are we going to do that? Well, we can conditionally bind in a class here. So, for example, BG gray 200, if the link is active,
05:56
so we'll have an active property on each of them objects. And you can see now that is highlighted and this is starting to nicely come together. Now, if a link doesn't have a URL like this previous page doesn't have a URL just now, we can go ahead and just gray
06:11
that out or do something completely different. So I'm going to set the text to gray 400 on this if the link doesn't have a URL and that doesn't really show up. So let's just bump that down to maybe 200, maybe bump it up a little bit.
06:28
Three. OK, so let's give this an opacity instead. Let's say 75. And yeah, that still doesn't look great. Let's try 50. OK, that's a little bit better.
06:39
So now if next isn't available, the opacity goes half. Same with previous as well. So that is pretty much our pagination done and working. We open up our console just to have a look
06:51
at this and it looks like everything is good. We should be fine. Sometimes if you have an href bound in and the URL doesn't exist in this case, you might see an issue with this.
07:03
So what I'm actually going to do is say give an empty string if the URL is null or something like that, just to avoid anything being passed in that we don't need to. So now our pagination is working.
07:12
Regardless of how many discussions you have in here, you're going to be able to navigate between them. So to finish off, let's just set our pagination back to 10 just to check this out. And you can see that the pagination is still there.
07:25
You can choose to hide this if there are less than 10 topics if you want to. And to do that, you would just go ahead and over on the index, just have a simple V on here so you could say V if discussions. And let's just dump this out so we can see what is best to hide this.
07:44
We'll say meta or we could say links, but let's just. Try this one out first. So we've got total and per page, I think we'll leave that. What you do is you compare the total
07:56
to the per page or make sure that the total is less than per page. What I'm actually going to do is not hide that if there are no discussions. But what we are going to do is add a really simple wrapper around this. Or if there are no discussions at all,
08:10
because we do not want to show them at all. So discussions dot length and that would be data dot link. So now if there are no discussions, we won't see the pagination and we won't start to iterate through the list.
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.