Connect frontend questionId

frontend/src/hooks/useCollaboration.tsx

@@ -37,7 +37,7 @@ const useCollaboration = ({
     "#Write your solution here".length
   );
   const [room, setRoom] = useState<Room | null>(null); // twilio room
-  const [questionId, setQuestionId] = useState<string>("1");
+  const [questionId, setQuestionId] = useState<string>("");
   const textRef = useRef<string>(text);
   const cursorRef = useRef<number>(cursor);
   const prevCursorRef = useRef<number>(cursor);
@@ -59,7 +59,9 @@ const useCollaboration = ({
         setSocket(socketConnection);
 
         socketConnection.emit(SocketEvents.ROOM_JOIN, roomId, userId);
-        socketConnection.emit(SocketEvents.QUESTION_SET, questionId);
+        if (questionId !== "") {
+          socketConnection.emit(SocketEvents.QUESTION_SET, questionId);
+        }
 
         socketConnection.on("twilio-token", (token: string) => {
           twilioTokenRef.current = token;

frontend/src/hooks/useQuestions.ts

@@ -3,13 +3,20 @@ import {
   fetchQuestions as fetchQuestionsApi,
   fetchRandomQuestion as fetchRandomQuestionApi,
   postQuestion as postNewQuestionApi,
+  fetchQuestion as fetchQuestionApi,
 } from "./../pages/api/questionHandler";
 import { AuthContext } from "@/contexts/AuthContext";
 import { Difficulty } from "../types/QuestionTypes";
 
 export const useQuestions = () => {
   const { user: currentUser, authIsReady } = useContext(AuthContext);
 
+  const fetchQuestion = async (qid: string) => {
+    if (authIsReady && currentUser) {
+      return fetchQuestionApi(currentUser, qid);
+    }
+  };
+
   const fetchQuestions = async () => {
     if (authIsReady) {
       return fetchQuestionsApi(currentUser);
@@ -31,5 +38,10 @@ export const useQuestions = () => {
     }
   };
 
-  return { fetchQuestions, fetchRandomQuestion, postNewQuestion };
+  return {
+    fetchQuestion,
+    fetchQuestions,
+    fetchRandomQuestion,
+    postNewQuestion,
+  };
 };

frontend/src/pages/interviews/match-found.tsx

@@ -7,6 +7,7 @@ import {
   TypographyH3,
 } from "@/components/ui/typography";
 import { useMatchmaking } from "@/hooks/useMatchmaking";
+import { query } from "express";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
@@ -38,7 +39,10 @@ export default function MatchFound() {
   };
 
   const onClickAccept = () => {
-    router.push(`/room/${match?.roomId}`);
+    router.push({
+      pathname: `/room/${match?.roomId}`,
+      query: { questionId: match?.questionId },
+    });
   };
 
   return (

frontend/src/pages/room/[id].tsx

@@ -12,6 +12,7 @@ export default function Room() {
   const router = useRouter();
 
   const roomId = router.query.id as string;
+  const questionId = router.query.questionId as string;
   const userId = (router.query.userId as string) || "user1";
   const disableVideo =
     (router.query.disableVideo as string)?.toLowerCase() === "true";
@@ -23,12 +24,8 @@ export default function Room() {
       disableVideo,
     });
 
-  // const { } = useQuestions();
-  // TODO fetch question by question ID provided by matching service
-  // setQuestionId
-
-  const question: Question = {
-    title: "Two Sum",
+  let question: Question = {
+    title: "Example Question",
     difficulty: "Easy",
     topics: ["Array", "Hash Table"],
     description:
@@ -40,6 +37,14 @@ export default function Room() {
     author: "",
   };
 
+  const { fetchQuestion } = useQuestions();
+  fetchQuestion(questionId).then((fetchQuestion) => {
+    if (fetchQuestion != null) {
+      question = fetchQuestion;
+      setQuestionId(question.id);
+    }
+  });
+
   if (!router.isReady) return null;
 
   return (