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

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.

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.

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.

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.

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.

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.

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.

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,

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?

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.

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,

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,

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

And there it is. Great. So inside of here, we just need an invoke method. This is going to take in the query builder.

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.

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

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,

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.

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

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.

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

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.

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.

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.

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.