Shift question request back to question display

Fix history by letting the question display handle question request

Author: dylkaw

frontend/components/collab/collab-room.tsx

@@ -1,64 +1,17 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { X } from "lucide-react";
 import Chat from "./chat";
 import QuestionDisplay from "./question-display";
 import CodeEditor from "./code-editor";
-import LoadingScreen from "@/components/common/loading-screen";
-import { getQuestion } from "@/lib/api/question-service/get-question";
-import { useAuth } from "@/app/auth/auth-context";
-import { getQuestionId } from "@/lib/api/collab-service/get-questionId";
-import { Question } from "@/lib/schemas/question-schema";
-import { useToast } from "@/components/hooks/use-toast";
 import Link from "next/link";
+import { Question } from "@/lib/schemas/question-schema";
 
 export default function CollabRoom({ roomId }: { roomId: string }) {
-  const auth = useAuth();
-  const token = auth?.token;
-  const { toast } = useToast();
-
-  const [question, setQuestion] = useState<Question | null>(null);
-  const [loading, setLoading] = useState(true);
   const [code, setCode] = useState<string>("");
-
-  useEffect(() => {
-    async function fetchQuestion() {
-      try {
-        if (!auth || !auth.token) {
-          toast({
-            title: "Access denied",
-            description: "No authentication token found",
-            variant: "destructive",
-          });
-          return;
-        }
-
-        // Call to the collab microservice to get questionId by roomId
-        const response = await getQuestionId(auth.token, roomId);
-        const data = await response.json();
-
-        if (data.questionId) {
-          // Fetch the question details using the questionId
-          if (token) {
-            const questionResponse = await getQuestion(token, data.questionId);
-            const questionData = await questionResponse.json();
-            setQuestion(questionData);
-          } else {
-            console.error("Token is not available");
-          }
-        }
-      } catch (error) {
-        console.error("Error fetching question:", error);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchQuestion();
-  }, [roomId]);
-
+  const [exposedQuestion, setExposedQuestion] = useState<Question | null>(null);
   return (
     <div className="h-screen flex flex-col mx-4 p-4 overflow-hidden">
       <header className="flex justify-between border-b">
@@ -72,12 +25,11 @@ export default function CollabRoom({ roomId }: { roomId: string }) {
       </header>
       <div className="flex flex-1 overflow-hidden">
         <div className="w-2/5 p-4 flex flex-col space-y-4 overflow-hidden">
-          {loading ? (
-            <LoadingScreen />
-          ) : (
-            <QuestionDisplay question={question} />
-          )}
-          <Chat roomId={roomId} question={question} code={code} />
+          <QuestionDisplay
+            roomId={roomId}
+            setExposedQuestion={setExposedQuestion}
+          />
+          <Chat roomId={roomId} question={exposedQuestion} code={code} />
         </div>
         <CodeEditor roomId={roomId} setCode={setCode} />
       </div>

frontend/components/collab/question-display.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import clsx from "clsx";
 import {
   Card,
@@ -8,8 +8,13 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { getQuestion } from "@/lib/api/question-service/get-question";
+import { useAuth } from "@/app/auth/auth-context";
+import { getQuestionId } from "@/lib/api/collab-service/get-questionId";
+import { useToast } from "@/components/hooks/use-toast";
 import { Badge } from "@/components/ui/badge";
 import { Question } from "@/lib/schemas/question-schema";
+import LoadingScreen from "@/components/common/loading-screen";
 
 const difficultyColors = {
   Easy: "bg-green-500",
@@ -20,12 +25,64 @@ const difficultyColors = {
 export default function QuestionDisplay({
   className,
   date,
-  question,
+  roomId,
+  setExposedQuestion,
 }: {
   className?: string;
   date?: Date;
-  question: Question | null;
+  roomId: string;
+  setExposedQuestion?: (question: Question) => void;
 }) {
+  const auth = useAuth();
+  const token = auth?.token;
+  const { toast } = useToast();
+
+  const [question, setQuestion] = useState<Question | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchQuestion() {
+      try {
+        if (!auth || !auth.token) {
+          toast({
+            title: "Access denied",
+            description: "No authentication token found",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        // Call to the collab microservice to get questionId by roomId
+        const response = await getQuestionId(auth.token, roomId);
+        const data = await response.json();
+
+        if (data.questionId) {
+          // Fetch the question details using the questionId
+          if (token) {
+            const questionResponse = await getQuestion(token, data.questionId);
+            const questionData = await questionResponse.json();
+            setQuestion(questionData);
+            if (setExposedQuestion) {
+              setExposedQuestion(questionData);
+            }
+          } else {
+            console.error("Token is not available");
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching question:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchQuestion();
+  }, [roomId]);
+
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
   if (!question) {
     return <div>Question not found</div>;
   }