Highlighting current filters, and merging with pagination: Build a Forum with Inertia and Laravel

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.

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

Episodes

Transcript

Episode summary

Episode discussion