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.