"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Complete source code for this lesson is available at
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
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.