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
22. Building our first filter

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
It's time to build out our first filter, and the first thing that we're going to do is scaffold out the navigation on the sidebar just here,
00:06
and we're going to put that into a separate component just so we can reuse it between all of the pages that we've already got. So over in our forum components section, let's create out a navigation.view component, and just scaffold this out with the template here, and we'll go ahead and create out a nav element just inside of here. Now if we head over to the forum index and we come down to the side section, we've already got this container here.
00:33
Now our entire side won't be contained within this, so I'm going to go ahead and just grab the code for this, pull this over to here, and let's actually put that nav directly inside of here, because we're going to have a button that sits outside of here at the top a little bit later. So inside of here is going to be just an unordered list with some list items.
00:55
These will represent each of the things that we want to add in here, and each of these will have an inertia link element. So first thing to do, let's go ahead and just make sure we pull that in. So we'll go ahead and import link from inertia and v3, and we can just start to add this. So this first one is going to be all discussions.
01:18
So this kind of represents the home page that we have here. Okay, so we will just space these things out a little bit. So let's say space y2, and we should be good. Let's just have a look at what we've got here, of course, once we switch this over.
01:36
So I'm going to go ahead and pull in the navigation just here, and let's pull that component in here. And of course, that comes from the forum section. And there we go. Great. So we've got all discussions. So let's build another one, and then they will be the two filters that we'll have done for this episode.
01:58
So we could build out no replies because we already have posts. We can detect if something doesn't have any replies. So let's just build this one filter out for here now. And then, of course, we'll link back to the home page with all discussions.
02:11
So the home page for discussions is pretty straightforward. We're just going to go back to home here. So that will clear all filters. And for the link here, let's go ahead and give this an href.
02:21
But we're not going to do anything just yet, because we need to do a little bit of work on the back end to make this work. Now, the way that we're going to implement filters is using the Laravel query builder package. So we're going to head over to the installation here,
02:33
and I'm going to guide you through how to get some basic filters set up here. And then if you need to add anything more advanced, of course, you can go ahead and add to this if you need. So how does this package work?
02:44
We're going to go over to the forum index controller just here. And we want to replace out what we're doing here with the query builder from this package. So really, what we need to do is keep everything we've got in here. But instead, we're going to replace this out with query builder from that package.
03:03
And we're going to say for and then give the model name and the fully qualified class name to this. And then we can just continue to chain on. Now, if we do this and head back over to our forum index,
03:15
notice that nothing has changed at all. What this query builder is doing for this particular model is it's doing anything that you can normally do with Eloquent. But what you can do in here is specify the list of allowed filters,
03:28
which you will build separately in classes. Them classes are responsible for them filtering this data down further. But what this package does is does everything for you via the query string. So you don't need to read any of this data yourself.
03:40
It will just all be applied automatically. So to use this, let's just do this pretty much anywhere in here. We're going to say allowed filters. And we're going to give an array of all of the classes that we have allowed filters for.
03:54
Well, not quite. We're going to choose an allowed filter class like this. Then we're going to go ahead and say custom. And we're going to give the name of this.
04:03
So, for example, the one that we're building is no replies. So what we could do is name this no replies. And then we could give the class name in here that deals with that. This will be what's picked up in the query string.
04:15
And then the class will be what filters down. So we're going to actually extract this out, because we're going to end up with quite a few filters to an allowed filters method inside of this class.
04:30
So let's go down here and just build that out really quickly. So allowed filters. And we'll just return this array from here. And then we can just build these on as we need them.
04:44
So we don't have that yet. So let's go ahead and create out our first filter. Now, probably the best place to place this is inside of HTTP. And we'll call this query filters.
04:58
And let's go ahead and create out a no replies query filter. So this is kind of like building scopes within your models. But in this case, they're class based. And this functionality is a lot more powerful.
05:15
So to get this working, let's go ahead and give this a namespace app HTTP and filters or query filters in this case. And let's go ahead and create our class called no replies query filter. Now, this is going to extend the base filter from that class or from that package.
05:35
And let's see if we can find it here. It doesn't look like it's pulled in. So let's just re-index this. And we'll try that again.
05:42
And there it is. Great. So inside of here, we just need an invoke method. This is going to take in the query builder.
05:51
So let's go ahead and pull this in from eloquent. And we can just call that query like we would with a scope. We also get the value in if we need that. And then we get in a property as well, which we're probably not going to be making use of.
06:09
So inside of here, we can just start to implement this filter. So if we think about the no replies filter, which we can now new up and pop in, so no replies query filter, what does this need to do? Well, it basically just needs to check that there's only one post inside of the thing
06:31
that we're looking at. So to do this, we can just use query has post and equals one. So if it just has one post, we're assuming that there are no replies. OK, so now that we've done that, we've created that, we've added it to here,
06:46
and we're passing this into the class. So now that we've done that, we've added it to here, and we're passing this into the allowed filters. Let's head over and see if this works.
06:54
And yes, sorry, this needs to be an interface that gets implemented, not an extends. So let's go ahead and implement that instead. Great. So the way that we use this in the query string is basically just filter
07:07
and then the name of the filter like this and then equals and then the value. So no replies equals one true, whatever it needs to be. As long as it's present, we're going to go ahead and actually start to filter that. So it looks like at the moment this is not working.
07:24
And if we just hop over here, yeah, has post equals one. We'll get there eventually. OK, so now this is working. If, of course, we get rid of this filter, we're going to end up with a list of all our topics
07:37
or all of our discussions because we have no filters applied. So let's go ahead and apply this to the navigation. And of course, that's actually now going to send a request to the back end rather than refresh the entire page.
07:47
So let's say filter and we'll obviously have the query string and this will be no replies and we'll just set that to one or you can set it to true. It doesn't really matter what the value is in this case. So now I can click no replies and that will instantly just start to filter this down.
08:03
Of course, without refreshing the page, because we're working with view and sending requests to the back end to just refresh this data. So that is how simple it is to get a filter working. First step, get that package installed.
08:14
Replace it out with this query builder for the particular thing we're looking for. Specify a list of the allowed filters, which can be added as closures. But in our case, it's a little bit tidier to use this as class based and just go ahead and continue to query build inside of there.
62 episodes6 hrs 54 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!