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
23. Highlighting current filters, and merging with pagination
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
Although implementing filters was super easy, what we now need to do is figure out how to highlight the filter that we're currently looking at, because this kind of acts as navigation.
00:09
And second of all, see how this interacts with our pagination. So we'll go for the navigation first of all. And effectively, we want to go ahead and bind in a class in here, like FontBold, if a certain condition is true.
00:24
So if this is true, at the moment, of course, I've just hardcoded it into true. We see this highlighted in bold. So how are we going to know which filters are currently applied? There's probably a load of ways to do this.
00:35
But when I'm working with filters like this, I just like to pass down the entire query into the index that we're working in or into the page that we're working in. So let's go ahead and put in our request in here. And we're just going to say request query.
00:51
And that's it. We can now accept this into our component. We're also going to cast this to an object, because we always want an empty object, even if there's nothing in the query, just for when we start to check things.
01:04
And we can just start to read from this and highlight this. So over on the index here, over on that navigation component here, we're going to want to pass that query down to here. So let's pass that in.
01:16
And we want to, of course, accept this in as a prop as well. We know that's going to be an object. So now that we've got this inside of our navigation, let's just dump this out at the top somewhere just so we can see this.
01:28
Before we do anything else, let's go ahead and make sure we accept this in as a prop, because we're not going to see it otherwise. And of course, that's an object again. And if we head over, there we go.
01:38
So without anything, so on all discussions, we see an empty object. For no replies, we get filter. And then we get any of the filters that we've applied. In our case, it's only ever going to be one filter,
01:49
because it kind of makes sense for what we're building. But we would see multiple in there if we did have more. OK, so now that we have got this data, let's keep that there so we can reference it. Over in the navigation, we can go ahead and add in the condition
02:03
that will actually highlight each of these items. So for the no replies filter, we basically want to grab the query, check inside of the filter if no replies exist. And that is pretty much it.
02:19
Now, we're going to see an issue with this. If we just give this a refresh here, you can see that is now highlighted. If we head over to all discussions, you can see it breaks reading undefined or reading no replies from undefined.
02:31
That is just because filter doesn't exist in this case. So we're going to go ahead and use the null safe operator to get around this. And there we go. Sure enough, all discussions and no replies can now be clicked on nicely.
02:43
And we see this highlighted. Now, all discussions isn't highlighted, which is a problem, because, of course, we're always going to want that highlighted when we're on that page. So all we need to do for this one, we just, again, bind in that class here,
02:57
like we've done for the others, font bold. We're just going to say if there is no query filter and the page URL is forward slash. And there are tons of ways that we can do this as well. But this is just pretty simple.
03:12
Now, the reason that we're doing this is when we land over on this page and we implement the navigation here for all discussions, we don't want all discussions highlighted on here because we're not on the all discussions page. So now we have both of these highlighted and our navigation is looking a little bit better.
03:28
So there we go. That is our highlighting for each of our navigation items. As we add more filters, we can just do the same thing. Now, let's talk about pagination.
03:38
So we've got 10 per page at the moment. If we head over to the index controller for our forum, let's go ahead and set pagination to one, just so we see one per page here. Now, I'm going to hit no replies.
03:50
And at the moment, we obviously don't have any topics or discussions. So I'm actually going to go ahead and get rid of all of the posts that would stop this from working. So let's try that again. We've got this one and these three just here.
04:09
So we're going to go ahead and delete them. And that will mean that both of these now do not have replies. So now we've got two pages on our no replies filter. Now, as soon as I hit page two, that actually gets rid of that filter altogether, which is not good.
04:26
So we need to tackle this by merging in the query string with our pagination links. Now, this is really easy to do within Blade, but within an API a little bit different. And all we really need to do here is at the end to use append, much like we would do if we're outputting these pagination links within a Blade template.
04:46
We just want to pass in the query and that's going to merge everything together for us. So now I'm going to give this a refresh. Let's hit page two. And you can see that the filter is kept in here.
04:57
And you can see that's the case by this being highlighted. So now we can click on any filter or not and go through and see all of these. Now, again, we've got an issue here with the highlighting of our navigation. So to get around this, we can specifically rather than the URL,
05:12
we can check the page component. So we know that the page component here is forum index. So that will only now be highlighted on the forum index. It will work for pagination, but of course, it won't show when we're in any other page.
05:26
So although we don't have many filters here, we now have these working with pagination, which is really important. And we have our all discussions page as well fixed up. So everything is being nicely highlighted in our map.
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.