Move getQuestion to collab room

Pass question into question display instead.
Use Question schema instead of creating a new interface

Author: dylkaw

frontend/components/collab/collab-room.tsx

@@ -1,11 +1,51 @@
-import React from "react";
+"use client";
+
+import React, { useState, useEffect } 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";
 
 export default function CollabRoom({ roomId }: { roomId: string }) {
+  const auth = useAuth();
+  const token = auth?.token;
+
+  const [question, setQuestion] = useState<Question | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchQuestion() {
+      try {
+        // Call to the collab microservice to get questionId by roomId
+        const response = await getQuestionId(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]);
+
   return (
     <div className="h-full flex flex-col mx-4 p-4">
       <header className="flex justify-between border-b">
@@ -17,7 +57,11 @@ export default function CollabRoom({ roomId }: { roomId: string }) {
       </header>
       <div className="flex flex-1">
         <div className="w-2/5 p-4 flex flex-col space-y-4">
-          <QuestionDisplay roomId={roomId} />
+          {loading ? (
+            <LoadingScreen />
+          ) : (
+            <QuestionDisplay question={question} />
+          )}
           <Chat roomId={roomId} />
         </div>
         <CodeEditor roomId={roomId} />

frontend/components/collab/question-display.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import {
   Card,
   CardContent,
@@ -8,60 +8,15 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-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";
 
 const difficultyColors = {
   Easy: "bg-green-500",
   Medium: "bg-yellow-500",
   Hard: "bg-red-500",
 };
 
-interface Question {
-  title: string;
-  categories: string;
-  complexity: keyof typeof difficultyColors;
-  description: string;
-}
-
-export default function QuestionDisplay({ roomId }: { roomId: string }) {
-  const auth = useAuth();
-  const token = auth?.token;
-  const [question, setQuestion] = useState<Question | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function fetchQuestion() {
-      try {
-        // Call to the collab microservice to get questionId by roomId
-        const response = await getQuestionId(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]);
-
-  if (loading) {
-    return <LoadingScreen />;
-  }
+export default function QuestionDisplay({ question }: { question: Question | null }) {
 
   if (!question) {
     return <div>Question not found</div>;