Build a Forum with Inertia and Laravel

Sign in Get started

This episode is for members only

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

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

02. Getting set up

03. Modifying registration for usernames

04. Figuring out the forum layout

05. Creating and listing topics

06. Basic discussion listing

07. Pinning discussions

08. Tackling pagination in Inertia

09. Customising pagination text in Laravel

10. Showing a discussion

11. Setting up discussion posts

12. Listing through discussion posts

13. Adding more data to posts

14. Adding pagination to posts

15. Adding a post preview to discussions

16. Adding the last reply to discussions

17. Outputting discussion participants

18. Limiting participants in the UI

19. Ordering discussions by last post

20. Handling deleted users

21. Counting replies

22. Building our first filter

23. Highlighting current filters, and merging with pagination

24. Adding auth specific filters

25. Adding the topic filter

26. Scaffolding the new discussion form

27. Toggling the create discussion form

28. Keeping form state

29. Storing a new discussion

30. Discussion validation and authorization

31. Generating markdown for posts

32. Toggling the markdown preview

33. Fetching and displaying markdown

34. Adding a markdown shortcut toolbar

35. Dealing with SVG icons

36. Creating the reply form

37. Basic Inertia permission checking

38. Creating replies to discussions

39. Jumping to posts

40. Automatically scrolling to posts

41. Toggling post editing

42. Editing posts

43. Deleting posts

44. Deleting discussions

45. Setting up for best answers

46. Toggling the best discussion answer

47. Solved and unsolved filters

48. Indexing discussions for search

49. Searching discussions

50. Debouncing search

51. Adding mentionable functionality to forms

52. Indexing users for mentioning

53. Hooking up users for mentions

54. Detecting and storing mentioned users

55. Adding the mentioned filter

56. Adding mentions to the markdown toolbar

57. Adding mentions to the reply form

58. Fixing up some unauthenticated state

59. Fixing up post scrolling

60. Reviewing SSR (Server-side rendering)

61. Preventing parent posts from being deleted

62. Improving solution marking

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.

Episode summary

In this episode, we jump right in and build our very first filter for our forum app! The first thing we do is set up a reusable navigation component for our sidebar — this is where we'll list different discussions filters. That way, as we add more filters in the future, it's super tidy and easy to manage.

We start by creating a Navigation.vue component, move the existing sidebar navigation over, and then add Inertia links for our different filter options. For now, we create a filter for "All Discussions" (the default view) and "No Replies" (to show discussions with no responses yet).

Next, we switch over to the backend and install the Laravel Query Builder package, which is awesome for handling filter logic through the query string. We update our forum controller to use this new query builder, and set up a system for class-based filters — making things clean and extendable.

For our "No Replies" filter, we create a custom filter class that checks for discussions with only one post (meaning no replies yet). After wiring everything up, we show how the frontend filter link triggers the backend filter — all without a page refresh, thanks to Vue and Inertia.

By the end of the episode, you'll have a slick sidebar filter in place and a solid understanding of how to structure and extend this system as your app grows!

Episode discussion

No comments, yet. Be the first!