"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 Let's give our right sidebar some love.
00:00:04 Currently, we only have some static data right here.
00:00:07 It doesn't do anything, and clicking on tags just breaks our application.
00:00:11 So finally, it's time to make it work.
00:00:14 At the top, we'll return questions that have most views and upvotes, and below it, we'll return the tags that have the most questions associated with them.
00:00:22 So let's start with the hot questions.
00:00:24 To implement it, we first have to create a server action that returns the questions that have the most votes and views.
00:00:32 So let's head over into lib, actions, question.action.
00:00:37 We can collapse all of the actions we have right now.
00:00:39 Below the last server action we implemented, we'll create a new one.
00:00:44 export async function getHotQuestions.
00:00:49 It'll return a promise, which will then be resolved in an action response.
00:00:54 That'll then return an array of questions.
00:00:58 So this is how we have to open up our function.
00:01:01 We can open up a try and catch block.
00:01:04 In the catch, we'll return the handle error as error response, as always.
00:01:09 And in the try, we'll start with something different.
00:01:13 Here, we'll do something different.
00:01:15 This server action doesn't need any params or authorization or validation.
00:01:21 It simply needs to do its job.
00:01:23 So instead of calling our very detailed, but a bit wordy, action utility function that checks the validation, the authorization,
00:01:33 and returns all the params, in this case, our job is going to be a bit simpler.
00:01:38 Here, we can make a direct database call.
00:01:40 So what we can do is say await dbConnect.
00:01:46 And right below it, we can try to access our questions by saying const questions is equal to await question.find.
00:01:55 And we simply want to sort the questions that we do find based on views.
00:02:00 So views minus one.
00:02:02 as well as the number of upvotes.
00:02:05 So we'll say upvotes minus one as well.
00:02:08 And a limited only to the first five that we get back.
00:02:11 Finally, let's return a success of true, as well as data of JSON.parse, JSON.stringify, and a list of questions.
00:02:21 Pretty straightforward, right?
00:02:23 So now let's head over into our sidebar.
00:02:27 So that's going to be the right sidebar component.
00:02:29 Yeah, see, these are hard coded for now.
00:02:32 So let's go ahead and remove those constants.
00:02:35 And instead, right at the top, we can destructure the success variable, as well as the data, which we can rename to hot questions.
00:02:45 And we can also get the error and we'll make it equal to await get hot questions server action.
00:02:53 Like this.
00:02:54 Of course, since we're using await, we have to make this async.
00:02:58 So if we do that, we're now mapping over the hot questions right here, but we won't simply map over them.
00:03:04 Instead, we'll use our data renderer.
00:03:07 So copy this presentation of how we're currently displaying a link, because we'll use it later on.
00:03:13 But instead of this div, we'll simply render a data renderer component.
00:03:18 And for now, I will comment out the second div that contains the popular tags.
00:03:22 We'll bring it back later on.
00:03:24 For now, let's make it work for the popular questions.
00:03:27 To it.
00:03:28 We have to pass the data, which will be equal to hot questions.
00:03:32 We also need to pass the empty state, which will be equal to an object where the title is no questions found and description of no questions have been
00:03:42 asked yet.
00:03:43 Or rather, I think we called it a message.
00:03:45 TypeScript saved me there.
00:03:46 We'll pass over a success equal to success, an error equal to error, and when we try to render the data, we'll get back the hot questions and we can return
00:03:59 a div that'll have a class name equal to margin top of seven.
00:04:05 flex, wfool, flex-call, and a gap of 30 pixels.
00:04:12 And within this div, we can say hotquestions.map, where for each one, we get access to a question.
00:04:19 And for each question, we want to return, and now we can paste what we copied.
00:04:24 That is a link that contains the ID, title, and an image.
00:04:29 So we can just destructure the underscore ID and the title from the question.
00:04:33 And to this question title, we can just provide a line clamp to, just so it doesn't take more than two lines of text.
00:04:42 Perfect.
00:04:43 The rest is looking good to me.
00:04:45 So if we head back over to our app, check this out on the right side, we see top questions and we have this carrot indicating that this entire link is
00:04:55 clickable and it renders a question title.
00:04:57 So if I click on it right now, it redirects to the profile page.
00:05:01 So instead of routes profile, we want to make it lead to routes question.
00:05:06 And if you reload and click on them now, they should redirect to the right pages.
00:05:13 There we go.
00:05:14 So now we have an extra point of navigation.
00:05:17 In case we want to check out some of the top questions for a specific day, well, we have them right here at the top.
00:05:23 Great.
00:05:23 For now, we have only three, but we can have up to five on the top questions part.
00:05:28 And I'm noticing that the design is a bit different.
00:05:31 It has a bit of a bigger text and some unique icons right here.
00:05:34 So if you want to put that into practice, just go ahead.
00:05:37 You can download the icon right here and increase the font size.
00:05:41 I'm fine with these as it's the title that matters and this caret shows that it is clickable so we can go to that page.
00:05:47 Now let's focus on the popular tags.
