00:00:02 Okay, the filters for the homepage have been implemented, but do we have to now go through every other page that displays some data,

00:00:10 like the community section, the tags, or maybe even something like collections?

00:00:16 Well, of course not.

00:00:18 We can go straight into the code and start integrating our common filter throughout all of the pages.

00:00:24 Let's start with the collection page.

00:00:26 So that is page.tsx root collection.

00:00:30 and we can also navigate to it by heading over to collections.

00:00:33 These are our saved questions.

00:00:36 So, to implement a common filter there, we need to head over below the local search and add it here.

00:00:43 Common filter, import it, and give it filters equal to collection filters coming from constants filters, and give it other classes equal to min-h-56 pixels,

00:01:00 as well as on small devices, min-w of 170 pixels.

00:01:06 And immediately, crazy filters appear.

00:01:09 And by default, this should look good on desktop devices as well.

00:01:12 Check this out.

00:01:13 They appear right at the right side of the search questions input.

00:01:17 So of course, I can go ahead and search it.

00:01:19 We worked super hard on making that happen.

00:01:22 And what if I try to filter it by most voted?

00:01:27 Well, both have the same number of votes, so maybe most viewed, because this one has many more views.

00:01:32 So I'm going to click most viewed and it is first.

00:01:35 Or maybe most recent.

00:01:37 Well, it is also the first.

00:01:39 Most answered.

00:01:40 Well, this one is also right here at the top.

00:01:43 But if I switch to oldest, you can see that it actually works.

00:01:46 This one was created three months ago and this one was created two months ago.

00:01:50 So that means that our sorting and filtering is working.

00:01:54 Looks good both on desktop and on mobile.

00:01:56 Let's also implement it within our community page.

00:01:59 So I'll head over into community.

00:02:02 I'll scroll down and right below the local search, I will do the same thing as before.

00:02:07 You know what?

00:02:08 We might as well copy it from the collection page and paste it below.

00:02:13 Make sure to import it, of course, and change the filters to user filters.

00:02:18 Also, make sure to add the class names.

00:02:21 to this div that's wrapping both the search and the filters.

00:02:25 So I'll copy them and I'll also override them here.

00:02:29 So now if you head over to community, you'll see that we have filters right here and we can sort the users by newest, oldest and most popular,

00:02:39 and this is also looking great on desktop devices.

00:02:43 Now, here's an interesting one.

00:02:44 We can reuse the common filters on another place within our app that I don't think crossed your mind initially.

00:02:51 But check this out.

00:02:52 If we head over into a specific question, here we have different answers.

00:02:57 And what if we could filter out or sort out the answers based on recency or the number of upvotes?

00:03:04 How cool would that be?

00:03:05 Well, we can do it pretty easily, I gotta say.

00:03:08 Just head over into the question details page.

00:03:11 So that is question ID.

00:03:13 And right at the top, we'll have to get access to all of the search programs.

00:03:17 So I'll say const, give me the page, the page size.

00:03:22 and the filter, which is equal to await search params.

00:03:27 And we can get the search params right here through the props, since this is a server rendered component.

00:03:33 And now that we have those, we can pass them when we're trying to fetch the answers.

00:03:38 Now the questions, but the answers.

00:03:41 I'll pass the page equal to a number version of that page or one by default.

00:03:47 Same thing for the page size, which will be a number version of the page size coming from the URL or 10 by default.

00:03:55 as well as I'll pass the filter, not default to latest, but I'll actually pass the variable coming from the URL params.

00:04:04 So if we do this, the last thing we have to do is head over into the all answers component and see, we even made a note for ourselves here to render the

00:04:13 common filters.

00:04:14 So I'll go ahead and render the common filter self-closing component.

00:04:19 Make sure to import it and to it, pass.

00:04:23 the filters equal to answer filters coming from constants, and I'll also pass you some classes like other classes is equal to On small devices,

00:04:37 min-w of 32, so here it takes a bit less width than usual and container classes will be equal to max-xs w full.

00:04:48 So on smaller devices, it takes the full width.

00:04:51 So check this out.

00:04:52 This one was provided three weeks ago.

00:04:55 The one below it was provided three weeks ago and the one below it a month ago.

00:05:00 So let's say we want to sort them by the oldest one.

00:05:04 immediately that one pops at the top.

00:05:06 What if we want to get the newest?

00:05:08 Well, this one is the newest.

00:05:10 And what if I downvote this one, but I go ahead and upvote the oldest one?

00:05:15 So now, the newest one is downvoted, but if I want to get the most quality responses, I would go with popular.

00:05:22 And that'll filter it by the number of up quotes.

00:05:26 So just like this, we have implemented filtering for the answers within the question details page as well.

00:05:34 I'm sure you wouldn't think of this place when we were talking about creating a reusable common filter component.

00:05:39 And there's another place, which is the tags page.

00:05:42 So to provide it there, let's simply head over to tags page.

00:05:48 We're already importing all of these things.

00:05:51 We just have to render the comment filter below.

00:05:54 Let's copy it from the community page.

00:05:56 I'll first copy this div that's wrapping the search as well as the comment filter.

00:06:03 And then I'll paste the comment filter itself right below it.

00:06:06 Make sure to import it.

00:06:08 and to pass over not the user filters, but the tag filters.

00:06:13 So if you check it out, we can filter from A to Z.

00:06:16 JavaScript is at the top.

00:06:18 From recent, Next.js was the most recently added.

00:06:21 But what I care about the most is the popular.

00:06:24 So this one has two questions and then we have 11111110, right?

00:06:28 So we want to see what is trending among programming technologies right now on our platform.

00:06:34 And we can do that by using the sorting functionality right here on the tags page.

00:06:39 Now what you can do is implement that comment filter component anywhere you like, such as on the tag details page.

00:06:46 Check it out.

00:06:47 This is another page we have created, which is missing those filters.

00:06:52 So just as a test, go ahead and implement it there as well.

00:06:56 But other than that, you just saw how simple it is.

00:06:59 So now that we have added it, let's remove the unused imports, if there are any, in some of the files that I have created.

00:07:06 And let's go ahead and commit it.

00:07:09 I'll do something like integrate filters everywhere.

00:07:12 Commit and sync.

00:07:15 Great job.

00:07:16 It was easier than we thought, right?

00:07:19 But now that we can filter and sort through different things across all the different pages, wouldn't it be great if we could also implement pagination

00:07:29 across all pages?

00:07:30 Well, of course, it's a feature that is needed on every single serious application where there's a lot of data.

00:07:36 Sure, we only have two questions and it's easy to look at them right now while we're still developing it, but later on, once we have more questions and

00:07:44 once users actually want to browse through them, it is crucial to have the pagination feature.

00:07:50 So, let's do that next.