Fetch Real Question Details

Author: adrianhajdin

app/(root)/questions/[id]/page.tsx

@@ -3,95 +3,20 @@ import { Preview } from "@/components/editor/Preview";
 import Metric from "@/components/Metric";
 import UserAvatar from "@/components/UserAvatar";
 import ROUTES from "@/constants/routes";
+import { getQuestion } from "@/lib/actions/question.action";
 import { formatNumber, getTimeStamp } from "@/lib/utils";
 import Link from "next/link";
+import { redirect } from "next/navigation";
+import { title } from "process";
 import React from "react";
 
-const sampleQuestion = {
-  id: "q123",
-  title: "How to improve React app performance?",
-  content: `### Question
-
-I'm looking for tips and best practices to enhance the performance of a React application. I have a moderately complex app with multiple components, and I've noticed some performance bottlenecks. What should I focus on?
-
-#### What I've Tried:
-- Lazy loading components
-- Using React.memo on some components
-- Managing state with React Context API
-
-#### Issues:
-- The app still lags when rendering large lists.
-- Switching between pages feels sluggish.
-- Sometimes, re-renders happen unexpectedly.
-
-#### Key Areas I Need Help With:
-1. Efficiently handling large datasets.
-2. Reducing unnecessary re-renders.
-3. Optimizing state management.
-
-Here is a snippet of my code that renders a large list. Maybe I'm doing something wrong here:
-
-\`\`\`js
-import React, { useState, useMemo } from "react";
-
-const LargeList = ({ items }) => {
-  const [filter, setFilter] = useState("");
-
-  // Filtering items dynamically
-  const filteredItems = useMemo(() => {
-    return items.filter((item) => item.includes(filter));
-  }, [items, filter]);
-
-  return (
-    <div>
-      <input
-        type="text"
-        value={filter}
-        onChange={(e) => setFilter(e.target.value)}
-        placeholder="Filter items"
-      />
-      <ul>
-        {filteredItems.map((item, index) => (
-          <li key={index}>{item}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-export default LargeList;
-\`\`\`
-
-#### Questions:
-1. Is using \`useMemo\` the right approach here, or is there a better alternative?
-2. Should I implement virtualization for the list? If yes, which library would you recommend?
-3. Are there better ways to optimize state changes when dealing with user input and dynamic data?
-
-Looking forward to your suggestions and examples!
-
-**Tags:** React, Performance, State Management
-  `,
-  createdAt: "2025-01-15T12:34:56.789Z",
-  upvotes: 42,
-  downvotes: 3,
-  views: 1234,
-  answers: 5,
-  tags: [
-    { _id: "tag1", name: "React" },
-    { _id: "tag2", name: "Node" },
-    { _id: "tag3", name: "PostgreSQL" },
-  ],
-  author: {
-    _id: "u456",
-    name: "Jane Doe",
-    image: "/avatars/jane-doe.png",
-  },
-};
-
 const QuestionDetails = async ({ params }: RouteParams) => {
   const { id } = await params;
+  const { success, data: question } = await getQuestion({ questionId: id });
+
+  if (!success || !question) return redirect("/404");
 
-  const { author, createdAt, answers, views, tags, content } = sampleQuestion;
+  const { author, createdAt, answers, views, tags, content, title } = question;
 
   return (
     <>
@@ -117,7 +42,7 @@ const QuestionDetails = async ({ params }: RouteParams) => {
         </div>
 
         <h2 className="h2-semibold text-dark200_light900 mt-3.5 w-full">
-          {sampleQuestion.title}
+          {title}
         </h2>
       </div>
 

app/globals.css

@@ -275,7 +275,7 @@ body {
   }
 
   .markdown {
-    @apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
+    @apply max-w-full prose prose-p:my-2 prose-ol:my-0 prose-ul:my-0 dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
   }
 
   .markdown-editor {

lib/actions/question.action.ts

@@ -203,7 +203,9 @@ export async function getQuestion(
   const { questionId } = validationResult.params!;
 
   try {
-    const question = await Question.findById(questionId).populate("tags");
+    const question = await Question.findById(questionId)
+      .populate("tags")
+      .populate("author", "_id name image");
 
     if (!question) {
       throw new Error("Question not found");