From 7d95ade4ce1b3da9b711d578ba7ab9e78e814978 Mon Sep 17 00:00:00 2001
From: Tay Yi Hsuen <tayyihsuen@gmail.com>
Date: Mon, 13 Nov 2023 10:08:28 +0800
Subject: [PATCH] Create release 1.1.1 (#249)

Fix some bugs related to loading state, match-finding etc

---------

Co-authored-by: Ong Jun Xiong <junxiongong2@gmail.com>
Co-authored-by: chunweii <47494777+chunweii@users.noreply.github.com>
---
 README.md                                     |  9 ++-
 frontend/src/components/profile/columns.tsx   | 10 +--
 .../src/components/profile/data-table.tsx     | 25 ++++---
 frontend/src/components/room/code-editor.tsx  | 48 ++++++++-----
 frontend/src/components/room/video-room.tsx   | 24 +++++--
 frontend/src/hooks/useCollaboration.tsx       | 23 +++---
 frontend/src/hooks/useMatch.tsx               |  5 +-
 frontend/src/pages/api/matchHandler.ts        |  3 +-
 frontend/src/pages/api/questionHandler.ts     | 10 +--
 frontend/src/pages/attempt/[id]/index.tsx     |  3 +-
 frontend/src/pages/interviews/find-match.tsx  | 14 +++-
 frontend/src/pages/interviews/index.tsx       |  4 ++
 frontend/src/pages/questions/[id]/index.tsx   | 10 ++-
 frontend/src/pages/room/[id].tsx              | 54 ++++++++++----
 .../src/providers/MatchmakingProvider.tsx     | 58 +++++++++++++--
 .../collaboration-service/src/db/prisma-db.ts | 15 ++--
 .../collaboration-service/src/routes/room.ts  | 22 +++---
 services/matching-service/src/app.ts          |  3 +
 .../src/controllers/matchingController.ts     | 71 ++++++++++++++++++-
 services/question-service/src/routes/index.ts | 30 +++++++-
 20 files changed, 334 insertions(+), 107 deletions(-)

diff --git a/README.md b/README.md
index 5f79a4ca..031fcb93 100644
--- a/README.md
+++ b/README.md
@@ -37,8 +37,11 @@ your services / frontend.
 ├── /frontend
 │   └── /pages for peerprep (NextJs application)
 ├── /deployment
-│   ├── /docker
-│   └── /kubernetes
+│   ├── /gke-prod-manifests
+│   ├── /prod-dockerfiles
+│   └── build-export-prod-images.sh
+├── /prisma
+├── /utils
 ├── .env (not in git)
 ├── .env.firebase_emulators_test (not in git)
 └── README.md (and other root-level files & docs)
@@ -137,6 +140,8 @@ Docker and Docker Compose are used to set up a simulated production build (meani
 containers that will be spun up locally are almost identical to those in the production environment, with the exception
 of some environment variables).
 
+NOTE: Do not run both Docker and No Docker at the same time. This will cause port conflicts.
+
 1. **Run yarn docker:build:** From the root repo, run
 
 ```bash
diff --git a/frontend/src/components/profile/columns.tsx b/frontend/src/components/profile/columns.tsx
index 2f0cea8f..73d9cf15 100644
--- a/frontend/src/components/profile/columns.tsx
+++ b/frontend/src/components/profile/columns.tsx
@@ -1,5 +1,5 @@
-import { Attempt } from "@/types/UserTypes"
-import { ColumnDef } from "@tanstack/react-table"
+import { Attempt } from "@/types/UserTypes";
+import { ColumnDef } from "@tanstack/react-table";
 import { Button } from "../ui/button";
 
 export const columns: ColumnDef<Attempt>[] = [
@@ -16,7 +16,7 @@ export const columns: ColumnDef<Attempt>[] = [
     header: "Status",
     cell: ({ row }) => {
       const solved = row.getValue("solved") as boolean;
-      return (solved ? <div className="text-green-500">Solved</div> : "Unsolved");
+      return solved ? <div className="text-green-500">Solved</div> : "Unsolved";
     },
   },
   {
@@ -26,6 +26,8 @@ export const columns: ColumnDef<Attempt>[] = [
       const timeCreated = row.getValue("time_created") as Date;
       return timeCreated.toLocaleString();
     },
+    enableSorting: true,
+    sortDescFirst: true,
   },
   {
     id: "actions",
@@ -46,4 +48,4 @@ export const columns: ColumnDef<Attempt>[] = [
       );
     },
   },
-]
+];
diff --git a/frontend/src/components/profile/data-table.tsx b/frontend/src/components/profile/data-table.tsx
index a9bc6627..da262c2e 100644
--- a/frontend/src/components/profile/data-table.tsx
+++ b/frontend/src/components/profile/data-table.tsx
@@ -3,7 +3,8 @@ import {
   flexRender,
   getCoreRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+  getSortedRowModel,
+} from "@tanstack/react-table";
 
 import {
   Table,
@@ -12,11 +13,11 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
 
 interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
 }
 
 export function DataTable<TData, TValue>({
@@ -27,7 +28,11 @@ export function DataTable<TData, TValue>({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
-  })
+    initialState: {
+      sorting: [{ id: "time_created", desc: true }],
+    },
+    getSortedRowModel: getSortedRowModel(),
+  });
 
   return (
     <div className="rounded-md border">
@@ -41,11 +46,11 @@ export function DataTable<TData, TValue>({
                     {header.isPlaceholder
                       ? null
                       : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
                   </TableHead>
-                )
+                );
               })}
             </TableRow>
           ))}
@@ -74,5 +79,5 @@ export function DataTable<TData, TValue>({
         </TableBody>
       </Table>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/components/room/code-editor.tsx b/frontend/src/components/room/code-editor.tsx
index 4046a112..0dbeb2f5 100644
--- a/frontend/src/components/room/code-editor.tsx
+++ b/frontend/src/components/room/code-editor.tsx
@@ -37,7 +37,7 @@ type CodeEditorProps = {
   onChange: React.Dispatch<React.SetStateAction<string>>;
   onCursorChange?: React.Dispatch<React.SetStateAction<number>>;
   hasRoom?: boolean;
-  onSubmitClick?: (param: string) => void;
+  onSubmitClick?: (param: string, solved: boolean) => void;
   onLeaveRoomClick?: () => void;
 };
 
@@ -72,6 +72,7 @@ export default function CodeEditor({
 }: CodeEditorProps) {
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState("");
+  const [frameWork, setFrameWork] = React.useState(language); // default to python
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const [monacoInstance, setMonacoInstance] =
@@ -114,13 +115,13 @@ export default function CodeEditor({
     [onChange, onCursorChange, monacoInstance]
   );
 
-  const handleOnSubmitClick = async () => {
+  const handleOnSubmitClick = async (solved: boolean) => {
     if (isSubmitting) {
       return; // Do nothing if a submission is already in progress.
     }
     setIsSubmitting(true);
     try {
-      onSubmitClick(monacoInstance?.getValue() ?? value);
+      onSubmitClick(monacoInstance?.getValue() ?? value, solved);
     } catch (error) {
       console.log(error);
     }
@@ -137,8 +138,8 @@ export default function CodeEditor({
               aria-expanded={open}
               className="w-[240px] justify-between"
             >
-              {value
-                ? languages.find((framework) => framework.value === value)
+              {frameWork
+                ? languages.find((framework) => framework.value === frameWork)
                     ?.label
                 : "Select framework..."}
               <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -153,14 +154,18 @@ export default function CodeEditor({
                   <CommandItem
                     key={framework.value}
                     onSelect={(currentValue) => {
-                      setValue(currentValue === value ? "" : currentValue);
+                      setFrameWork(
+                        currentValue === frameWork ? "" : currentValue
+                      );
                       setOpen(false);
                     }}
                   >
                     <Check
                       className={cn(
                         "mr-2 h-4 w-4",
-                        value === framework.value ? "opacity-100" : "opacity-0"
+                        frameWork === framework.value
+                          ? "opacity-100"
+                          : "opacity-0"
                       )}
                     />
                     {framework.label}
@@ -183,8 +188,9 @@ export default function CodeEditor({
         </div>
       </div>
       <Editor
+        key={frameWork}
         height={height}
-        defaultLanguage={language}
+        defaultLanguage={frameWork}
         defaultValue={defaultValue}
         value={text}
         theme={theme}
@@ -198,14 +204,24 @@ export default function CodeEditor({
               Leave Room
             </Button>
           ) : (
-            <Button
-              size={"sm"}
-              variant="default"
-              onClick={handleOnSubmitClick}
-              disabled={isSubmitting}
-            >
-              Submit
-            </Button>
+            <div className="flex flex-row space-x-4">
+              <Button
+                size={"sm"}
+                variant="secondary"
+                onClick={() => handleOnSubmitClick(false)}
+                disabled={isSubmitting}
+              >
+                Submit as unsolved
+              </Button>
+              <Button
+                size={"sm"}
+                variant="default"
+                onClick={() => handleOnSubmitClick(true)}
+                disabled={isSubmitting}
+              >
+                Submit as Solved
+              </Button>
+            </div>
           )}
         </div>
       </Card>
diff --git a/frontend/src/components/room/video-room.tsx b/frontend/src/components/room/video-room.tsx
index 5a322815..e9b24c4b 100644
--- a/frontend/src/components/room/video-room.tsx
+++ b/frontend/src/components/room/video-room.tsx
@@ -1,16 +1,18 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { LocalParticipant, LocalVideoTrack, Participant, RemoteParticipant, RemoteAudioTrack, RemoteVideoTrack, Room, Track } from 'twilio-video';
 import { Button } from '../ui/button';
 import { Mic, MicOff, Video, VideoOff } from 'lucide-react';
+import { useUser } from '@/hooks/useUser';
+import { AuthContext } from '../../contexts/AuthContext';
 
 interface VideoRoomProps {
     room: Room | null;
     className?: string;
 }
 
-function SingleVideoTrack({ track, userId, isLocal, isMute, toggleMute, isCameraOn, toggleCamera }:
+function SingleVideoTrack({ track, userId, displayName, isLocal, isMute, toggleMute, isCameraOn, toggleCamera }:
     {
-        track: RemoteVideoTrack | LocalVideoTrack, userId: string, isLocal: boolean,
+        track: RemoteVideoTrack | LocalVideoTrack, userId: string, displayName: string, isLocal: boolean,
         isMute: boolean, toggleMute: () => void,
         isCameraOn: boolean, toggleCamera: () => void
     }) {
@@ -31,7 +33,7 @@ function SingleVideoTrack({ track, userId, isLocal, isMute, toggleMute, isCamera
         <div className="w-64 p-2 flex flex-col items-center justify-center border border-primary rounded-lg">
             <div ref={videoContainer}></div>
             <div className="flex-1 ml-1 w-full h-8 flex items-center justify-between">
-                <p>{userId}</p>
+                <p>{displayName}</p>
                 {isLocal ? <div className="flex flex-row gap-2 justify-end">
                     <Button variant="ghost" size="icon" onClick={toggleCamera}>
                         {isCameraOn ? <Video /> : <VideoOff />}
@@ -65,9 +67,18 @@ const VideoRoom: React.FC<VideoRoomProps> = ({ room, className }) => {
     const [isMute, setIsMute] = useState(true);
     const [participants, setParticipants] = useState<RemoteParticipant[]>([]);
     const [localParticipant, setLocalParticipant] = useState<LocalParticipant | null>(null);
+    const [participantNames, setParticipantNames] = useState<{[id: string]: string}>({});
+    const {user} = useContext(AuthContext);
+    const {getAppUser} = useUser();
 
 
     const handleNewParticipant = (participant: RemoteParticipant) => {
+        if (!(participant.identity in participantNames)) {
+            setParticipantNames(p => ({...p, [participant.identity]: "Loading..."}));
+            getAppUser(participant.identity, false).then(user => {
+                setParticipantNames(p => ({...p, [participant.identity]: user?.displayName || ""}));
+            }).catch(err => console.log);
+        }
 
         participant.on('trackSubscribed', track => {
             setParticipants(p => [...p])
@@ -82,7 +93,6 @@ const VideoRoom: React.FC<VideoRoomProps> = ({ room, className }) => {
         console.log('Participant "%s" connected,', participant.identity);
 
         setParticipants(participants => [...participants, participant]);
-
         handleNewParticipant(participant);
     };
 
@@ -134,13 +144,13 @@ const VideoRoom: React.FC<VideoRoomProps> = ({ room, className }) => {
         <div className="flex gap-4 absolute bottom-10">
             {localParticipant ? Array.from(localParticipant.videoTracks.values()).map(publication => {
                 if (publication.track.kind === 'video') {
-                    return <SingleVideoTrack track={publication.track} key={localParticipant.identity} userId={localParticipant.identity} isLocal={true} isMute={isMute} toggleMute={toggleMute} isCameraOn={isCameraOn} toggleCamera={toggleCamera} />;
+                    return <SingleVideoTrack track={publication.track} key={localParticipant.identity} userId={localParticipant.identity} displayName={user?.displayName || ""} isLocal={true} isMute={isMute} toggleMute={toggleMute} isCameraOn={isCameraOn} toggleCamera={toggleCamera} />;
                 } else { return null; }
             }) : null}
             {participants.flatMap(participant => {
                 return Array.from(participant.videoTracks.values()).map(publication => {
                     if (publication.track?.kind === 'video') {
-                        return <SingleVideoTrack track={publication.track} key={participant.identity} userId={participant.identity} isLocal={false} isMute={isMute} toggleMute={toggleMute} isCameraOn={isCameraOn} toggleCamera={toggleCamera} />;
+                        return <SingleVideoTrack track={publication.track} key={participant.identity} userId={participant.identity} displayName={participantNames[participant.identity] || "Loading..."} isLocal={false} isMute={isMute} toggleMute={toggleMute} isCameraOn={isCameraOn} toggleCamera={toggleCamera} />;
                     } else {
                         return null; 
                     }
diff --git a/frontend/src/hooks/useCollaboration.tsx b/frontend/src/hooks/useCollaboration.tsx
index 0b678849..e53bfcd0 100644
--- a/frontend/src/hooks/useCollaboration.tsx
+++ b/frontend/src/hooks/useCollaboration.tsx
@@ -77,7 +77,10 @@ const useCollaboration = ({
             "User-Id-Token": token,
           },
         });
-        setSocket(socketConnection);
+        setSocket((prevSocket) => {
+          prevSocket?.disconnect();
+          return socketConnection;
+        });
 
         socketConnection.emit(SocketEvents.ROOM_JOIN, roomId, userId);
         if (
@@ -123,11 +126,11 @@ const useCollaboration = ({
             cursor: number | undefined | null;
           }) => {
             prevCursorRef.current = cursorRef.current;
-            console.log("prevCursor: " + prevCursorRef.current);
+            // console.log("prevCursor: " + prevCursorRef.current);
 
-            console.log("cursor: " + cursor);
+            // console.log("cursor: " + cursor);
 
-            console.log("Update vers to " + version);
+            // console.log("Update vers to " + version);
             vers = version;
 
             if (awaitingAck.current) return;
@@ -136,13 +139,13 @@ const useCollaboration = ({
             prevTextRef.current = text;
             setText(text);
             if (cursor && cursor > -1) {
-              console.log("Update cursor to " + cursor);
+              // console.log("Update cursor to " + cursor);
               cursorRef.current = cursor;
               setCursor(cursor);
             } else {
               cursorRef.current = prevCursorRef.current;
               cursor = prevCursorRef.current;
-              console.log("Update cursor to " + prevCursorRef.current);
+              // console.log("Update cursor to " + prevCursorRef.current);
               setCursor(prevCursorRef.current);
             }
             awaitingSync.current = false;
@@ -177,9 +180,9 @@ const useCollaboration = ({
 
     awaitingAck.current = true;
 
-    console.log("prevtext: " + prevTextRef.current);
-    console.log("currenttext: " + textRef.current);
-    console.log("version: " + vers);
+    // console.log("prevtext: " + prevTextRef.current);
+    // console.log("currenttext: " + textRef.current);
+    // console.log("version: " + vers);
     const textOp: TextOp = createTextOpFromTexts(
       prevTextRef.current,
       textRef.current
@@ -187,7 +190,7 @@ const useCollaboration = ({
 
     prevTextRef.current = textRef.current;
 
-    console.log(textOp);
+    // console.log(textOp);
 
     const textOperationSet: TextOperationSetWithCursor = {
       version: vers,
diff --git a/frontend/src/hooks/useMatch.tsx b/frontend/src/hooks/useMatch.tsx
index d62b88db..4f5f95b2 100644
--- a/frontend/src/hooks/useMatch.tsx
+++ b/frontend/src/hooks/useMatch.tsx
@@ -18,10 +18,11 @@ export const useMatch = () => {
 
   const updateQuestionIdInMatch = async (
     roomId: string,
-    questionId: string
+    questionTitle: string,
+    questionId: string,
   ) => {
     if (authIsReady && currentUser) {
-      await patchMatchQuestionByRoomidApi(currentUser, roomId, questionId);
+      await patchMatchQuestionByRoomidApi(currentUser, roomId, questionId, questionTitle);
     }
   };
 
diff --git a/frontend/src/pages/api/matchHandler.ts b/frontend/src/pages/api/matchHandler.ts
index 5d124e9a..73bd3ad0 100644
--- a/frontend/src/pages/api/matchHandler.ts
+++ b/frontend/src/pages/api/matchHandler.ts
@@ -44,7 +44,8 @@ export const getMatchByRoomid = async (user: any, roomId: string) => {
 export const patchMatchQuestionByRoomid = async (
   user: any,
   roomId: string,
-  questionId: string
+  questionId: string,
+  questionTitle: string,
 ) => {
   try {
     const url = `${matchApiPathAddress}match/${roomId}`;
diff --git a/frontend/src/pages/api/questionHandler.ts b/frontend/src/pages/api/questionHandler.ts
index 206ee7ef..8a2d4e32 100644
--- a/frontend/src/pages/api/questionHandler.ts
+++ b/frontend/src/pages/api/questionHandler.ts
@@ -10,12 +10,14 @@ export const fetchRandomQuestion = async (
   topics: string[] = []
 ) => {
   try {
-    const url = `${questionApiPathAddress}random-question`;
+    const url = `${questionApiPathAddress}random-question?`;
     const idToken = await user.getIdToken(true);
 
-    const response = await fetch(url, {
-      method: "POST",
-      body: JSON.stringify({ difficulty, topics }),
+    const response = await fetch(url + new URLSearchParams({
+      difficulty: difficulty === "any" ? ["easy", "medium", "hard"][Math.floor(Math.random()*3)] : difficulty,
+      topics: topics.join(",")
+    }), {
+      method: "GET",
       headers: {
         "Content-Type": "application/json",
         "User-Id-Token": idToken,
diff --git a/frontend/src/pages/attempt/[id]/index.tsx b/frontend/src/pages/attempt/[id]/index.tsx
index 6633ddf1..829b6305 100644
--- a/frontend/src/pages/attempt/[id]/index.tsx
+++ b/frontend/src/pages/attempt/[id]/index.tsx
@@ -21,7 +21,8 @@ export default function Page() {
   const [loadingState, setLoadingState] = useState<"loading" | "error" | "success">("loading");
 
   useEffect(() => {
-    if (attemptId === undefined || Array.isArray(attemptId)) {
+    if (!attemptId) return;
+    if (Array.isArray(attemptId)) {
       router.push("/profile");
       return;
     }
diff --git a/frontend/src/pages/interviews/find-match.tsx b/frontend/src/pages/interviews/find-match.tsx
index e2d6428f..7550cb6e 100644
--- a/frontend/src/pages/interviews/find-match.tsx
+++ b/frontend/src/pages/interviews/find-match.tsx
@@ -2,7 +2,7 @@ import Loader from "@/components/interviews/loader";
 import { Button } from "@/components/ui/button";
 import { TypographyBody, TypographyH2 } from "@/components/ui/typography";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import { use, useEffect, useState } from "react";
 import { useMatchmaking } from "@/hooks/useMatchmaking";
 
 export default function FindMatch() {
@@ -10,12 +10,22 @@ export default function FindMatch() {
   const { match, cancelLooking } = useMatchmaking();
   const { query } = router;
   const { retry } = query;
+  const [timeElapsed, setTimeElapsed] = useState(0);
 
   const onClickCancel = () => {
     cancelLooking();
     router.push("/interviews");
   };
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeElapsed((prev) => prev + 1);
+    }, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
   useEffect(() => {
     if (retry) {
       router.push("/interviews");
@@ -43,7 +53,7 @@ export default function FindMatch() {
       <div className="gap-y-6 flex flex-col justify-center items-center">
         <TypographyH2>Finding a match for your interview prep...</TypographyH2>
 
-        <TypographyBody>Estimated time: 25 secs</TypographyBody>
+        <TypographyBody>Time elapsed: {timeElapsed} secs</TypographyBody>
       </div>
 
       <Loader />
diff --git a/frontend/src/pages/interviews/index.tsx b/frontend/src/pages/interviews/index.tsx
index 5ea7b28f..3f730c22 100644
--- a/frontend/src/pages/interviews/index.tsx
+++ b/frontend/src/pages/interviews/index.tsx
@@ -98,6 +98,10 @@ export default function Interviews() {
         }
         setIsLoading(false);
       });
+    } else {
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 2000);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentUser]);
diff --git a/frontend/src/pages/questions/[id]/index.tsx b/frontend/src/pages/questions/[id]/index.tsx
index 14ac3ac0..7137f507 100644
--- a/frontend/src/pages/questions/[id]/index.tsx
+++ b/frontend/src/pages/questions/[id]/index.tsx
@@ -10,6 +10,7 @@ import { fetchQuestion } from "../../api/questionHandler";
 import { MrMiyagi } from "@uiball/loaders";
 import { useHistory } from "@/hooks/useHistory";
 import Solution from "@/components/room/solution";
+import { useUser } from "@/hooks/useUser";
 
 export default function Questions() {
   const router = useRouter();
@@ -22,6 +23,10 @@ export default function Questions() {
   const { user: currentUser, authIsReady } = useContext(AuthContext);
 
   useEffect(() => {
+    if (!authIsReady || !questionId) {
+      console.log("auth not ready or questionId not found");
+      return;
+    }
     if (currentUser) {
       fetchQuestion(currentUser, questionId)
         .then((question) => {
@@ -43,12 +48,12 @@ export default function Questions() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [questionId, authIsReady, currentUser]);
 
-  function onSubmitClick(value: string) {
+  function onSubmitClick(value: string, solved: boolean) {
     postAttempt({
       uid: currentUser ? currentUser.uid : "user",
       question_id: questionId,
       answer: value || answer,
-      solved: true, // assume true
+      solved: solved, // assume true
     })
       .catch((err: any) => {
         console.log(err);
@@ -94,6 +99,7 @@ export default function Questions() {
           </Tabs>
           <div className="flex-1">
             <CodeEditor
+              language="python"
               defaultValue={question.defaultCode.python}
               onChange={setAnswer}
               text={answer}
diff --git a/frontend/src/pages/room/[id].tsx b/frontend/src/pages/room/[id].tsx
index 118b480a..efb92b20 100644
--- a/frontend/src/pages/room/[id].tsx
+++ b/frontend/src/pages/room/[id].tsx
@@ -15,6 +15,8 @@ import { useMatchmaking } from "@/hooks/useMatchmaking";
 import Solution from "@/components/room/solution";
 import { AuthContext } from "@/contexts/AuthContext";
 import { toast } from "react-toastify";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
 
 export default function Room() {
   const router = useRouter();
@@ -43,31 +45,34 @@ export default function Room() {
   const [loading, setLoading] = useState(true); // to be used later for loading states
 
   const { fetchQuestion, fetchRandomQuestion } = useQuestions();
-  const { updateQuestionIdInMatch } = useMatch();
-  const { match, leaveMatch } = useMatchmaking();
+  const { match, leaveMatch, changeQuestion, requestToChangeQuestion, setRequestToChangeQuestion } = useMatchmaking();
 
   useEffect(() => {
     if (match && match.questionId !== null) {
       const questionId = match.questionId;
       setQuestionId(questionId);
-    }
-
-    if (questionId !== "") {
       fetchQuestion(questionId).then((fetchQuestion) => {
-        if (fetchQuestion != null) {
+        if (fetchQuestion) {
           setQuestion(fetchQuestion);
         }
       });
     }
 
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+
     if (!match) {
       // leave room and redirect to interviews page
-      leaveMatch();
-      toast.info("Other user has left");
-      router.push("/interviews");
+      timeout = setTimeout(() => {
+        leaveMatch();
+        toast.info("Other user has left");
+        router.push("/interviews");
+      }, 5000);
     }
 
     setLoading(false);
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [match, questionId]);
 
@@ -78,9 +83,8 @@ export default function Room() {
       fetchRandomQuestion(difficulty)
         .then((question) => {
           if (question) {
-            updateQuestionIdInMatch(roomId, question.id);
-            setQuestion(question);
-            setQuestionId(question.id);
+            changeQuestion(question.id, question.title, roomId);
+            toast.info("Please wait for other user to accept.");
           }
         })
         .catch((err) => {
@@ -99,6 +103,13 @@ export default function Room() {
     router.push("/interviews");
   }
 
+  function replyToChangeRequest(accept: boolean): void {
+    if (requestToChangeQuestion) {
+      requestToChangeQuestion.cb(accept);
+      setRequestToChangeQuestion(null);
+    }
+  }
+
   return (
     <div>
       {!router.isReady ? (
@@ -107,6 +118,25 @@ export default function Room() {
         </div>
       ) : (
         <div>
+          {requestToChangeQuestion && (<AlertDialog defaultOpen={true}>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Do you agree to this change?</AlertDialogTitle>
+                <AlertDialogDescription>
+                The other user requested to change question to {requestToChangeQuestion.questionTitle}. 
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogAction onClick={() => replyToChangeRequest(true)}>
+                  Yes
+                </AlertDialogAction>
+                <AlertDialogAction onClick={() => replyToChangeRequest(false)}>
+                  No
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>)}
+          
           <div className="h-[calc(100vh-80px)] px-12 py-6">
             <div className="flex h-full">
               <Tabs defaultValue="description" className="flex-1">
diff --git a/frontend/src/providers/MatchmakingProvider.tsx b/frontend/src/providers/MatchmakingProvider.tsx
index a5b7ea12..1374b25d 100644
--- a/frontend/src/providers/MatchmakingProvider.tsx
+++ b/frontend/src/providers/MatchmakingProvider.tsx
@@ -14,6 +14,11 @@ import { toast } from "react-toastify";
 
 const SERVER_URL = wsMatchProxyGatewayAddress;
 
+interface RequestToChangeQuestion {
+  questionTitle: string,
+  cb: (x: boolean) => void,
+}
+
 interface MatchmakingContextValue {
   socket: Socket | null;
   match: Match | null;
@@ -23,6 +28,9 @@ interface MatchmakingContextValue {
   sendMessage: (message: string) => void;
   leaveMatch: () => void;
   cancelLooking: () => void;
+  changeQuestion: (questionId: string, questionTitle: string, roomId: string) => void;
+  requestToChangeQuestion: RequestToChangeQuestion | null;
+  setRequestToChangeQuestion: React.Dispatch<React.SetStateAction<RequestToChangeQuestion | null>>;
 }
 
 export const MatchmakingContext = createContext<
@@ -37,9 +45,11 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
   children,
 }) => {
   const [socket, setSocket] = useState<Socket | null>(null);
+  // undefined if is loading, null if not in a match, otherwise Match
   const [match, setMatch] = useState<Match | null>(null);
   const [message, setMessage] = useState<string>("");
   const [error, setError] = useState<string>("");
+  const [requestToChangeQuestion, setRequestToChangeQuestion] = useState<RequestToChangeQuestion | null>(null);
 
   const { user: currentUser, authIsReady } = useContext(AuthContext);
   const router = useRouter();
@@ -61,16 +71,21 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
             "User-Id-Token": token,
           },
         });
-        setSocket(newSocket);
+        setSocket((oldSocket) => {
+          if (oldSocket) {
+            oldSocket.close();
+          }
+          return newSocket;
+        });
         newSocket.connect();
 
         console.log("Socket connected");
-
-        return () => {
-          newSocket.close();
-        };
       });
     }
+    return () => {
+      console.log("Socket disconnected");
+      socket?.close();
+    };
   }, [currentUser]);
 
   useEffect(() => {
@@ -81,7 +96,8 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
     if (
       match &&
       router.route !== "/interviews/match-found" &&
-      router.route !== "/interviews/find-match"
+      router.route !== "/interviews/find-match" &&
+      router.route !== "/room/${match?.roomId}"
     ) {
       router.push(`/room/${match?.roomId}`);
     }
@@ -120,6 +136,23 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
       console.log("Disconnected from server");
     });
 
+    socket.on("changeQuestion", (questionTitle: string, cb: (x: boolean) => void) => {
+      setRequestToChangeQuestion({questionTitle, cb});
+    });
+
+    socket.on("questionChanged", (questionId: string) => {
+      toast.info("Question is changed");
+      setMatch((prevMatch) => {
+        if (prevMatch) {
+          return {
+            ...prevMatch,
+            questionId: questionId,
+          };
+        }
+        return prevMatch;
+      });
+    });
+
     return () => {
       socket.off("connect");
       socket.off("matchFound");
@@ -127,6 +160,8 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
       socket.off("receiveMessage");
       socket.off("error");
       socket.off("disconnect");
+      socket.off("changeQuestion");
+      socket.off("questionChanged");
     };
   }, [socket]);
 
@@ -160,7 +195,13 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
     socket.emit("cancelLooking");
   }, [socket]);
 
-  const value = {
+  const changeQuestion = useCallback((questionId: string, questionTitle: string, roomId: string) => {
+    if (!socket) return;
+
+    socket.emit("changeQuestion", questionId, questionTitle, roomId);
+  }, [socket]);
+
+  const value: MatchmakingContextValue = {
     socket,
     match,
     message,
@@ -169,6 +210,9 @@ export const MatchmakingProvider: React.FC<MatchmakingProviderProps> = ({
     sendMessage,
     leaveMatch,
     cancelLooking,
+    changeQuestion,
+    requestToChangeQuestion,
+    setRequestToChangeQuestion
   };
 
   return (
diff --git a/services/collaboration-service/src/db/prisma-db.ts b/services/collaboration-service/src/db/prisma-db.ts
index c5b8b059..a7222bfb 100644
--- a/services/collaboration-service/src/db/prisma-db.ts
+++ b/services/collaboration-service/src/db/prisma-db.ts
@@ -161,18 +161,18 @@ export async function createOrUpdateRoomWithUser(
     users = room.users;
     active_users = room.active_users;
     if (users.indexOf(user_id) === -1) {
-      users.push(user_id);
+      throw new Error("User is not authorized to be in the room");
     }
     if (active_users.indexOf(user_id) === -1) {
       active_users.push(user_id);
     }
   }
 
-  await prisma.room.upsert({
+  await prisma.room.update({
     where: {
       room_id: room_id,
     },
-    update: {
+    data: {
       status: "active",
       users: {
         set: users,
@@ -180,14 +180,7 @@ export async function createOrUpdateRoomWithUser(
       active_users: {
         set: active_users,
       },
-    },
-    create: {
-      room_id: room_id,
-      text: "",
-      status: "active",
-      users: [user_id],
-      active_users: [user_id],
-    },
+    }
   });
 }
 
diff --git a/services/collaboration-service/src/routes/room.ts b/services/collaboration-service/src/routes/room.ts
index 7b5a30e5..449746f7 100644
--- a/services/collaboration-service/src/routes/room.ts
+++ b/services/collaboration-service/src/routes/room.ts
@@ -3,7 +3,7 @@ import { type } from "ot-text-unicode";
 import { Socket, Server } from "socket.io";
 
 import {
-  createOrUpdateRoomWithUser,
+  createOrUpdateRoomWithUser as updateRoomWithUser,
   removeUserFromRoom,
   updateRoomText,
   updateRoomStatus,
@@ -112,8 +112,8 @@ async function handleTextOp(
   textOpSet: TextOperationSetWithCursor,
   room_id: string
 ): Promise<{ text: string; cursor: number }> {
-  console.log(textOpSet);
-  console.log(opMap.getLatest(room_id)?.version);
+  // console.log(textOpSet);
+  // console.log(opMap.getLatest(room_id)?.version);
   var resultTextOps = textOpSet.operations;
 
   if (opMap.checkIfLatestVersion(room_id, textOpSet.version)) {
@@ -133,7 +133,7 @@ async function handleTextOp(
       version: textOpSet.version + 1,
       operations: transformedLatestOp,
     });
-    console.log(transformedLatestOp);
+    // console.log(transformedLatestOp);
     resultTextOps = transformedLatestOp;
   }
 
@@ -286,17 +286,17 @@ export const roomRouter = (io: Server) => {
 
   // WebSocket style API
   io.on("connection", (socket: Socket) => {
-    console.log("Room.ts: User connected:", socket.id);
+    console.log("Room.ts: User connected:", socket.id, ", Number of connections:", io.engine.clientsCount);
 
     socket.on(SocketEvents.ROOM_JOIN, (room_id: string, user_id: string) => {
       socket.join(room_id);
       console.log(socket.id + " joined room:", room_id);
-      createOrUpdateRoomWithUser(room_id, user_id);
-      mapSocketToRoomAndUser(socket.id, room_id, user_id);
-      roomUpdateWithTextFromDb(io, socket, room_id);
-      socket.emit("twilio-token", getTwilioAccessToken(room_id, user_id));
-
-      initSocketListeners(io, socket, room_id);
+      updateRoomWithUser(room_id, user_id).then(() => {
+        mapSocketToRoomAndUser(socket.id, room_id, user_id);
+        roomUpdateWithTextFromDb(io, socket, room_id);
+        socket.emit("twilio-token", getTwilioAccessToken(room_id, user_id));
+        initSocketListeners(io, socket, room_id);
+      }).catch((error) => console.log);
     });
 
     socket.on("disconnect", async () => userDisconnect(socket));
diff --git a/services/matching-service/src/app.ts b/services/matching-service/src/app.ts
index 8aac8869..308c9089 100644
--- a/services/matching-service/src/app.ts
+++ b/services/matching-service/src/app.ts
@@ -7,6 +7,7 @@ import {
   handleDisconnect,
   handleJoinRoom,
   handleLooking,
+  handleChangeQuestion,
 } from "./controllers/matchingController";
 import { handleCancelLooking } from "./controllers/matchingController";
 import { handleLeaveMatch } from "./controllers/matchingController";
@@ -57,6 +58,8 @@ io.on("connection", async (socket) => {
 
   socket.on("joinRoom", handleJoinRoom(userId, socket));
 
+  socket.on("changeQuestion", handleChangeQuestion(userId, socket, io));
+
 });
 
 httpServer.listen(port, () => {
diff --git a/services/matching-service/src/controllers/matchingController.ts b/services/matching-service/src/controllers/matchingController.ts
index 3ea1a409..9414ed08 100644
--- a/services/matching-service/src/controllers/matchingController.ts
+++ b/services/matching-service/src/controllers/matchingController.ts
@@ -1,5 +1,5 @@
 import { Request, Response } from "express";
-import { Socket } from "socket.io";
+import { Server, Socket } from "socket.io";
 import { io } from "../app";
 import prisma from "../prismaClient";
 import { getRandomQuestionOfDifficulty } from "../questionAdapter";
@@ -9,7 +9,7 @@ export const MAX_WAITING_TIME = 60 * 1000; // 60 seconds
 
 export async function handleConnection(socket: Socket) {
   let userId = (socket.handshake.query.username as string) || "";
-  console.log(`User connected: ${socket.id} and username ${userId}`);
+  console.log(`User connected: ${socket.id} and username ${userId}. ${(await io.fetchSockets()).length} users in total.`);
 
   const { count: earlierWaitingCount } = await prisma.waitingUser.deleteMany({
     where: {
@@ -153,6 +153,7 @@ export function handleLooking(
               room_id: newMatch.roomId,
               status: EnumRoomStatus.active,
               text: "",
+              users: [matchingUser.userId, userId],
             },
           });
           await tx.waitingUser.deleteMany({
@@ -307,6 +308,72 @@ export function handleSendMessage(
   };
 }
 
+export function handleChangeQuestion(userId: string, socket: Socket, io: Server) {
+  return async (questionId: string, questionName: string, room_id: string) => {
+    if (!questionId || !userId || !questionName || !room_id) {
+      console.log(`Invalid request from user ${userId}`);
+      socket.emit("error", "Invalid request");
+      return;
+    }
+
+    console.log(`User ${userId} intends to change the question to ${questionName}`);
+
+    let hasError = false;
+    const match = await prisma.match
+      .findFirst({
+        where: {
+          roomId: room_id,
+          OR: [{ userId1: userId }, { userId2: userId }], // Ensures that the user is really part of the match
+        },
+      })
+      .catch((err) => {
+        console.log(err);
+        socket.emit("error", "An error occurred in sendMessage.");
+        hasError = true;
+      });
+
+    if (hasError) {
+      return;
+    }
+
+    const otherSockets = (await io.in(room_id).fetchSockets()).filter(sock => socket.id !== sock.id);
+
+    console.log(`There are ${otherSockets.length} other sockets in the room`);
+
+    if (otherSockets.length !== 1) {
+      socket.emit("error", "The number of users in the room is not correct.");
+      return;
+    }
+
+    otherSockets[0].timeout(30*1000).emit("changeQuestion", questionName, (err: any, ok: any) => {
+      if (err) {
+        socket.emit("error", "Your partner has not provided a valid acknowledgement, you cannot change questions.");
+        return;
+      }
+      if (!ok) {
+        socket.emit("error", "Your partner does not agree to change questions.");
+        return;
+      }
+      prisma.match.update({
+        where: {
+          roomId: room_id,
+        },
+        data: {
+          questionId: questionId,
+        },
+      }).then((match) => {
+        io.to(room_id).emit("questionChanged", questionId);
+      }).catch((err) => {
+        console.log(err);
+        io.to(room_id).emit("error", "Unable to change questions");
+      });
+    });
+  };
+}
+
+/**
+ * @deprecated Use the handleChangeQuestion function instead with socket.io
+ */
 export async function updateMatchQuestion(req: Request, res: Response) {
   const room_id = req.params.room_id as string;
 
diff --git a/services/question-service/src/routes/index.ts b/services/question-service/src/routes/index.ts
index 0b96647a..4bdeb692 100644
--- a/services/question-service/src/routes/index.ts
+++ b/services/question-service/src/routes/index.ts
@@ -1,5 +1,5 @@
 import util from "util";
-import express from "express";
+import express, { Response } from "express";
 import sanitizeHtml from "sanitize-html";
 import { MongoClient, ObjectId, ServerApiVersion } from "mongodb";
 import { NewQuestion, isDifficulty } from "../models/new_question.model";
@@ -285,9 +285,14 @@ router.delete("/question/:id", async (req, res, next) => {
   }
 });
 
+/**
+ * Deprecated: Use GET /random-question instead, with query params:
+ * - difficulty: string
+ * - topics: string separated by commas
+ */
 router.post("/random-question", async (req, res, next) => {
   /**
-   * #swagger.description = 'Get a random question.'
+   * #swagger.description = 'Get a random question. Deprecated: Use GET /random-question instead, with query params: difficulty: string, topics: string separated by commas'
    * #swagger.parameters['difficulty'] = { description: 'Difficulty of the question.', type: 'string' }
    * #swagger.parameters['topics'] = { description: 'Array of topics of the question to choose.', type: 'array' }
    */
@@ -297,6 +302,25 @@ router.post("/random-question", async (req, res, next) => {
   }
   let difficulty = req.body.difficulty;
   let topics = req.body.topics ?? [];
+  await getRandomQuestion(topics, difficulty, res);
+});
+
+router.get("/random-question", async (req, res, next) => {
+  /**
+   * #swagger.description = 'Get a random question.'
+   * #swagger.parameters['difficulty'] = { description: 'Difficulty of the question.', type: 'string' }
+   * #swagger.parameters['topics'] = { description: 'Topics of the question to choose, separated by commas', type: 'string' }
+   */
+  if (!isDifficulty(req.query.difficulty as string)) {
+    res.status(400).send("Invalid difficulty");
+    return;
+  }
+  let difficulty = req.query.difficulty as string;
+  let topics = req.query.topics ? (req.query.topics as string).split(",") : [];
+  await getRandomQuestion(topics, difficulty, res);
+});
+
+async function getRandomQuestion(topics: string[], difficulty: string, res: Response) {
   try {
     let db = mongoClient.db("question_db");
     let collection = db.collection<Question>("questions");
@@ -319,4 +343,4 @@ router.post("/random-question", async (req, res, next) => {
     );
     res.status(500).send("Failed to get random question");
   }
-});
+}