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
25. Adding the topic filter
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
We're going to add some more filters throughout the course as we add more features. But for now, we're going to tackle this topics filter. When we choose this, of course, we want to filter this by the topic we've chosen.
00:10
Now, we've got a topic under Laravel and Vue. We don't have one under Inertia, which is fine. So we can very easily test if these are working. Now, this is slightly different because these aren't links that we can just append the query
00:22
filter onto. What we need to do is when this select changes, when the option within it changes, we want to go ahead and make a manual request to the back end. So let's go ahead and open up the index page here and just find that select.
00:38
We want to add an event listener onto this for when this changes and then go ahead and make that request out. So let's start with this. We don't have a method for this or a function for this at the moment, but the event for
00:48
this is change. So let's call this filter topic and then go ahead and create a function out inside of our script to get this to work. Let's create our filter topic.
00:59
And that's just going to be a function here. And then in here, we want to make a manual request through to the back end, appending on that query string. To do this, we're going to go ahead and put in the router specifically from Inertia, which
01:13
allows us to make specific requests. So let's just go ahead and use this to visit the homepage. So if we were to just do that, that would actually work. We open up our network tab here and filter under fetch XHR.
01:29
What we can do is just click on this and you can see it's just making a request to the back end. It's not doing anything useful at the moment because, of course, it's just refreshing the data we already have on the page.
01:38
But with this, we can go ahead and actually pass that data in. So let's go ahead and do this really roughly. And we're going to very immediately see an issue with this. So the filter is going to be filter and topic.
01:50
And then we're going to pass in from the event we get through to this, the target, which is the select element itself and the value of the element. So this is going to be something like Inertia view. It will basically be the slug that we're passing through.
02:04
So what we're also going to do to this is let's just define this out as specifically data. First of all, that will make it a little bit easier. And then we're going to go ahead and preserve the scroll on this, which will keep the scroll
02:18
position within Inertia. If you've not seen this before, if we were to change this now, it should jump to the top once the request has come back in. But we want to set this to true.
02:30
So it keeps the position on the page that we're currently on. OK, so at the moment, when we select a filter, we can clearly see it's working because we're getting the request back that we have an invalid filter here. So we're going to go ahead and build that filter out.
02:45
And we're going to go ahead and make this work. So let's go over to our query filter section. Let's grab the no replies query filter. And let's create out a topic query filter here.
02:57
Paste this in. Let's go ahead and change the name. Topic query filter. And what do we need to do here?
03:04
There's a couple of ways that we could do this because we know that we can already say where belongs to. But that will involve us looking this up in the database to actually pass the instance of the model through to it, like we've been doing with the currently authenticated user.
03:18
So in this case, we're going to go ahead and say where has topic. And then within the closure here, what we can do is bring in the query builder. We can go ahead and pull the value that gets passed into the query filter into scope. And we can just say, well, within that topic that we have, make sure that the slug matches
03:39
the value that we've given inside of there. So it will then only pull back the discussions which have a topic where this slug matches. So now that we've got this topic query filter in, let's head over to our forum index controller and we'll add this in here.
03:52
Just at the top, I'm kind of separating these by general and authenticated. So we're going to call this topic and that's going to be our topic query filter. OK, so we should now see this not error, which is the first step. When I click on inertia, you can see that that works.
04:08
And when I click on Laravel, you can see we get Laravel topics and view. Sure enough, we get view topics. So it looks like everything is working really nicely. But we've got a couple of issues here.
04:19
The first issue is that it's not showing the topic that we're currently on. So I click on this, the data gets refreshed within inertia or within the back end. It pulls through to the front end and this just sort of loses all state altogether. The second issue is that when we want to go, say, to anything that has no replies and then filter,
04:42
we lose that filter on here. We want this to work alongside of this. So we want to be able to say I want to see anything with no replies within the Laravel topic. It's just not working at the moment.
04:55
Let's first of all, fix up the fact that this does not keep the state or the thing that we're currently looking at. That's the easiest to do. And then we will, of course, go ahead and work on the other thing.
05:04
So let's go over to the select here for each of these options. Let's just pull down the attributes and iteration we have here. And we want to go ahead and conditionally set selected based on, of course, a condition. So here we're going to say page, props, query and filter.
05:25
And we want to say topic because remember, we want to use a null. Save topic might not be in our filters because we're passing down the query. We could also just do query dot filter. That's probably a lot easier.
05:35
And we want to check if this equals the current slug that we're iterating through in this list. So is there a topic in here that matches the thing that we're iterating through? If so, set it as selected. And you can see it's already working here.
05:50
So that is the first step done. And of course, all topics works as well because that's just an empty value. Now, I think for now, what we'll do is we will just leave this until later. So this only selects all discussions with that particular topic.
06:07
We'll change that a little bit later because that gets a little bit more advanced. And we can figure that out, especially once we've implemented the search, which also ties into the query string. So we'll leave that for after we've implemented search.
06:19
But we've got a problem here. If I choose Laravel and then go back to all topics, you can see that the filter up here remains. Let's fix that now, first of all.
06:27
And of course, all discussions isn't highlighted, which it should be. Now, to do this, what we're going to do is come down to where we're making the request just here. And we basically want to omit anything from this object that doesn't have a value or has an empty or null value.
06:46
So to do this, we're going to go ahead and use the Lodash JavaScript library to achieve this. Now, we're not going to pull Lodash in in its entirety. Lodash is just a collection of JavaScript helpers. What we're going to do instead is install two specific helpers.
07:01
The first one is going to be Lodash emit by. And that's separated by a dot. This is going to allow us to remove items from an object under a specific condition. That's the first thing that we want to pull in.
07:15
The second one we want to pull in is Lodash is empty. This will be the condition that we pass into the emit by helper. OK, so we've got them two things in. Let's go ahead and import these at the top.
07:28
We're going to import these with an underscore prefix just so we know they're part of Lodash. So import emit by from Lodash dot emit by. And we also want to pull in is empty as well is empty. And that is from the is empty package under Lodash.
07:47
So now to do this, we want to go ahead and say emit by. Pass in the object and the condition is whether it is empty. That's all we do. So now if this is empty, it's going to get rid of the filter altogether.
08:01
And it's not going to send this down to our API or to our back end. So let's try this out. Let's just start off on a clean page here. Let's go over to inertia.
08:11
Let's go back to all topics. And there we go. Sure enough, that just disappears altogether. And we're back to all discussions.
62 episodes•6 hrs 54 mins•2 years 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!
Episode discussion
No comments, yet. Be the first!