change create qn history record to be at collab instead of match

Author: feliciagan

backend/collab-service/.env.sample

@@ -4,6 +4,8 @@ SERVICE_PORT=3003
 # Origins for cors
 ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 
+QN_HISTORY_SERVICE_URL=http://qn-history-service:3006/api/qnhistories
+
 # Redis configuration
 REDIS_URI=redis://collab-service-redis:6379
 

backend/collab-service/src/handlers/websocketHandler.ts

@@ -2,6 +2,7 @@ import { Socket } from "socket.io";
 import { io } from "../server";
 import redisClient from "../config/redis";
 import { Doc, applyUpdateV2, encodeStateAsUpdateV2 } from "yjs";
+import { qnHistoryService } from "../utils/api";
 
 enum CollabEvents {
   // Receive
@@ -55,19 +56,50 @@ export const handleWebsocketCollabEvents = (socket: Socket) => {
     }
   });
 
-  socket.on(CollabEvents.INIT_DOCUMENT, (roomId: string, template: string) => {
-    const doc = getDocument(roomId);
-    const isPartnerReady = partnerReadiness.get(roomId);
-
-    if (isPartnerReady && doc.getText().length === 0) {
-      doc.transact(() => {
-        doc.getText().insert(0, template);
-      });
-      io.to(roomId).emit(CollabEvents.DOCUMENT_READY);
-    } else {
-      partnerReadiness.set(roomId, true);
+  socket.on(
+    CollabEvents.INIT_DOCUMENT,
+    (
+      roomId: string,
+      template: string,
+      uid1: string,
+      uid2: string,
+      language: string,
+      qnId: string,
+      qnTitle: string
+    ) => {
+      const doc = getDocument(roomId);
+      const isPartnerReady = partnerReadiness.get(roomId);
+
+      if (isPartnerReady && doc.getText().length === 0) {
+        qnHistoryService
+          .post("/", {
+            userIds: [uid1, uid2],
+            questionId: qnId,
+            title: qnTitle,
+            submissionStatus: "Attempted",
+            dateAttempted: new Date(),
+            timeTaken: 0,
+            code: template,
+            language: language,
+          })
+          .then((res) => {
+            console.log("created in collab");
+            doc.transact(() => {
+              doc.getText().insert(0, template);
+            });
+            io.to(roomId).emit(
+              CollabEvents.DOCUMENT_READY,
+              res.data.qnHistory.id
+            );
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      } else {
+        partnerReadiness.set(roomId, true);
+      }
     }
-  });
+  );
 
   socket.on(
     CollabEvents.UPDATE_REQUEST,

backend/collab-service/src/utils/api.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const QN_HISTORY_SERVICE_URL =
+  process.env.QN_HISTORY_SERVICE_URL ||
+  "http://qn-history-service:3006/api/qnhistories";
+
+export const qnHistoryService = axios.create({
+  baseURL: QN_HISTORY_SERVICE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});

backend/matching-service/.env.sample

@@ -6,7 +6,6 @@ ORIGINS=http://localhost:5173,http://127.0.0.1:5173
 
 # Other service APIs
 QUESTION_SERVICE_URL=http://question-service:3000/api/questions
-QN_HISTORY_SERVICE_URL=http://qn-history-service:3006/api/qnhistories
 
 # RabbitMq configuration
 RABBITMQ_DEFAULT_USER=admin

backend/matching-service/src/handlers/websocketHandler.ts

@@ -11,7 +11,7 @@ import {
 } from "./matchHandler";
 import { io } from "../server";
 import { v4 as uuidv4 } from "uuid";
-import { qnHistoryService, questionService } from "../utils/api";
+import { questionService } from "../utils/api";
 
 enum MatchEvents {
   // Receive
@@ -129,28 +129,18 @@ export const handleWebsocketMatchEvents = (socket: Socket) => {
           return;
         }
 
-        const { complexity, category, language } = match;
+        const { complexity, category } = match;
         questionService
           .get("/random", { params: { complexity, category } })
           .then((res) => {
-            const qnId = res.data.question.id;
-            qnHistoryService
-              .post("/", {
-                userIds: [userId1, userId2],
-                questionId: qnId,
-                title: res.data.question.title,
-                submissionStatus: "Attempted",
-                dateAttempted: new Date(),
-                timeTaken: 0,
-                language: language,
-              })
-              .then((res) => {
-                io.to(matchId).emit(
-                  MatchEvents.MATCH_SUCCESSFUL,
-                  qnId,
-                  res.data.qnHistory.id
-                );
-              });
+            io.to(matchId).emit(
+              MatchEvents.MATCH_SUCCESSFUL,
+              res.data.question.id,
+              res.data.question.title
+            );
+          })
+          .catch((err) => {
+            console.log(err);
           });
       }
     }

backend/matching-service/src/utils/api.ts

@@ -4,20 +4,9 @@ const QUESTION_SERVICE_URL =
   process.env.QUESTION_SERVICE_URL ||
   "http://question-service:3000/api/questions";
 
-const QN_HISTORY_SERVICE_URL =
-  process.env.QN_HISTORY_SERVICE_URL ||
-  "http://qn-history-service:3006/api/qnhistories";
-
 export const questionService = axios.create({
   baseURL: QUESTION_SERVICE_URL,
   headers: {
     "Content-Type": "application/json",
   },
 });
-
-export const qnHistoryService = axios.create({
-  baseURL: QN_HISTORY_SERVICE_URL,
-  headers: {
-    "Content-Type": "application/json",
-  },
-});

frontend/src/components/CodeEditor/index.tsx

@@ -11,7 +11,8 @@ import { yCollab } from "y-codemirror.next";
 import { Text } from "yjs";
 import { Awareness } from "y-protocols/awareness";
 import { useCollab } from "../../contexts/CollabContext";
-import { USE_COLLAB_ERROR_MESSAGE } from "../../utils/constants";
+import { USE_COLLAB_ERROR_MESSAGE, USE_MATCH_ERROR_MESSAGE } from "../../utils/constants";
+import { useMatch } from "../../contexts/MatchContext";
 
 interface CodeEditorProps {
   editorState?: { text: Text; awareness: Awareness };
@@ -40,12 +41,19 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     isReadOnly = false,
   } = props;
 
+  const match = useMatch();
+  if (!match) {
+    throw new Error(USE_MATCH_ERROR_MESSAGE);
+  }
+
+  const { matchCriteria, matchUser, partner, questionId, questionTitle } = match;
+
   const collab = useCollab();
   if (!collab) {
     throw new Error(USE_COLLAB_ERROR_MESSAGE);
   }
 
-  const { setCode } = collab;
+  const { setCode, checkDocReady } = collab;
 
   const [isEditorReady, setIsEditorReady] = useState<boolean>(false);
   const [isDocumentLoaded, setIsDocumentLoaded] = useState<boolean>(false);
@@ -66,8 +74,11 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     }
 
     const loadTemplate = async () => {
-      await initDocument(uid, roomId, template);
-      setIsDocumentLoaded(true);
+      if (matchUser && partner && matchCriteria && questionId && questionTitle) {
+        await initDocument(uid, roomId, template, matchUser.id, partner.id, matchCriteria.language, questionId, questionTitle);
+        checkDocReady();
+        setIsDocumentLoaded(true);
+      }
     };
     loadTemplate();
     // eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/contexts/CollabContext.tsx

@@ -44,6 +44,7 @@ type CollabContextType = {
   isEndSessionModalOpen: boolean;
   time: number;
   resetCollab: () => void;
+  checkDocReady: () => void;
 };
 
 const CollabContext = createContext<CollabContextType | null>(null);
@@ -65,7 +66,6 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     getMatchId,
     stopMatch,
     questionId,
-    qnHistoryId,
   } = match;
 
   const [time, setTime] = useState<number>(0);
@@ -88,6 +88,8 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const [compilerResult, setCompilerResult] = useState<CompilerResult[]>([]);
   const [isEndSessionModalOpen, setIsEndSessionModalOpen] =
     useState<boolean>(false);
+  const [qnHistoryId, setQnHistoryId] = useState<string | null>(null);
+  let hasSubmitted: boolean = false;
 
   const handleSubmitSessionClick = async () => {
     try {
@@ -97,6 +99,7 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         code: code.replace(/\t/g, " ".repeat(4)),
         language: matchCriteria?.language.toLowerCase(),
       });
+      hasSubmitted = true;
       console.log([...res.data.data]);
       setCompilerResult([...res.data.data]);
 
@@ -140,11 +143,8 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const handleConfirmEndSession = async () => {
     setIsEndSessionModalOpen(false);
 
-    // Get queston history
-    const data = await qnHistoryClient.get(qnHistoryId as string);
-
     // Only update question history if it has not been submitted before
-    if (!data.data.qnHistory.code) {
+    if (!hasSubmitted) {
       updateQnHistoryById(
         qnHistoryId as string,
         {
@@ -172,6 +172,12 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     resetCollab();
   };
 
+  const checkDocReady = () => {
+    collabSocket.on(CollabEvents.DOCUMENT_READY, (qnHistoryId: string) => {
+      setQnHistoryId(qnHistoryId);
+    });
+  };
+
   const checkPartnerStatus = () => {
     collabSocket.on(CollabEvents.PARTNER_LEFT, () => {
       toast.error(COLLAB_ENDED_MESSAGE);
@@ -200,6 +206,7 @@ const CollabProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         isEndSessionModalOpen,
         time,
         resetCollab,
+        checkDocReady,
       }}
     >
       {children}

frontend/src/contexts/MatchContext.tsx

@@ -89,7 +89,7 @@ type MatchContextType = {
   matchPending: boolean;
   loading: boolean;
   questionId: string | null;
-  qnHistoryId: string | null;
+  questionTitle: string | null;
 };
 
 const requestTimeoutDuration = 5000;
@@ -115,7 +115,7 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const [matchPending, setMatchPending] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const [questionId, setQuestionId] = useState<string | null>(null);
-  const [qnHistoryId, setQnHistoryId] = useState<string | null>(null);
+  const [questionTitle, setQuestionTitle] = useState<string | null>(null);
 
   const navigator = useContext(UNSAFE_NavigationContext).navigator as History;
 
@@ -277,10 +277,10 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const initMatchedListeners = () => {
     matchSocket.on(
       MatchEvents.MATCH_SUCCESSFUL,
-      (qnId: string, qnHistId: string) => {
+      (qnId: string, title: string) => {
         setMatchPending(false);
         setQuestionId(qnId);
-        setQnHistoryId(qnHistId);
+        setQuestionTitle(title);
         appNavigate(MatchPaths.COLLAB);
       }
     );
@@ -512,7 +512,7 @@ const MatchProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         matchPending,
         loading,
         questionId,
-        qnHistoryId,
+        questionTitle,
       }}
     >
       {children}

frontend/src/utils/collabSocket.ts

@@ -72,8 +72,26 @@ export const join = (
   });
 };
 
-export const initDocument = (uid: string, roomId: string, template: string) => {
-  collabSocket.emit(CollabEvents.INIT_DOCUMENT, roomId, template);
+export const initDocument = (
+  uid: string,
+  roomId: string,
+  template: string,
+  uid1: string,
+  uid2: string,
+  language: string,
+  qnId: string,
+  qnTitle: string
+) => {
+  collabSocket.emit(
+    CollabEvents.INIT_DOCUMENT,
+    roomId,
+    template,
+    uid1,
+    uid2,
+    language,
+    qnId,
+    qnTitle
+  );
 
   return new Promise<void>((resolve) => {
     collabSocket.once(CollabEvents.UPDATE, (update) => {