Redirects to question on match found and connect to websocket

Author: modembcc

collab/main.go

@@ -18,30 +18,30 @@ var upgrader = websocket.Upgrader{
 // Client represents a WebSocket client
 type Client struct {
 	conn   *websocket.Conn
-	secret string
+	roomID string
 }
 
-// Hub maintains the set of active clients, broadcasts messages, and stores the current color per secret
+// Hub maintains the set of active clients, broadcasts messages, and stores the current workspace per roomID
 type Hub struct {
 	clients    map[*Client]bool
-	colors     map[string]string // Store current color per secret
+	workspaces     map[string]string
 	broadcast  chan Message
 	register   chan *Client
 	unregister chan *Client
 	mutex      sync.Mutex
 }
 
-// Message represents a message with the associated secret
+// Message represents a message with the associated roomID
 type Message struct {
-	secret  string
+	roomID  string
 	content []byte
 }
 
 // NewHub creates a new hub instance
 func NewHub() *Hub {
 	return &Hub{
 		clients:    make(map[*Client]bool),
-		colors:     make(map[string]string),
+		workspaces:     make(map[string]string),
 		broadcast:  make(chan Message),
 		register:   make(chan *Client),
 		unregister: make(chan *Client),
@@ -67,10 +67,10 @@ func (h *Hub) Run() {
 
 		case message := <-h.broadcast:
 			h.mutex.Lock()
-			// Update the current color for this secret
-			h.colors[message.secret] = string(message.content)
+			// Update the current workspace for this roomID
+			h.workspaces[message.roomID] = string(message.content)
 			for client := range h.clients {
-				if client.secret == message.secret {
+				if client.roomID == message.roomID {
 					err := client.conn.WriteMessage(websocket.TextMessage, message.content)
 					if err != nil {
 						log.Printf("Error sending message: %v", err)
@@ -86,9 +86,9 @@ func (h *Hub) Run() {
 
 // ServeWs handles WebSocket requests
 func serveWs(hub *Hub, c *gin.Context) {
-	secret := c.Query("secret")
-	if secret == "" {
-		http.Error(c.Writer, "Secret required", http.StatusBadRequest)
+	roomID := c.Query("roomID")
+	if roomID == "" {
+		http.Error(c.Writer, "roomID required", http.StatusBadRequest)
 		return
 	}
 
@@ -98,13 +98,12 @@ func serveWs(hub *Hub, c *gin.Context) {
 		return
 	}
 
-	client := &Client{conn: conn, secret: secret}
+	client := &Client{conn: conn, roomID: roomID}
 	hub.register <- client
 
 	go handleMessages(client, hub)
 }
 
-// HandleMessages listens for color messages from the client
 func handleMessages(client *Client, hub *Hub) {
 	defer func() {
 		hub.unregister <- client
@@ -118,31 +117,31 @@ func handleMessages(client *Client, hub *Hub) {
 		}
 
 		// Broadcast the message to other clients
-		hub.broadcast <- Message{secret: client.secret, content: message}
+		hub.broadcast <- Message{roomID: client.roomID, content: message}
 	}
 }
 
-// Status endpoint that shows the number of clients and the current color for each secret
+// Status endpoint that shows the number of clients and the current color for each roomID
 func statusHandler(hub *Hub) gin.HandlerFunc {
 	return func(c *gin.Context) {
 		hub.mutex.Lock()
 		defer hub.mutex.Unlock()
 
 		status := make(map[string]interface{})
 		for client := range hub.clients {
-			secret := client.secret
-			currentStatus, ok := status[secret]
+			roomID := client.roomID
+			currentStatus, ok := status[roomID]
 			if !ok {
-				// Initialize status for a new secret
-				status[secret] = map[string]interface{}{
+				// Initialize status for a new roomID
+				status[roomID] = map[string]interface{}{
 					"clients": 1,
-					"color":   hub.colors[secret],
+					"workspace":   hub.workspaces[roomID],
 				}
 			} else {
-				// Update the client count for an existing secret
-				status[secret] = map[string]interface{}{
+				// Update the client count for an existing roomID
+				status[roomID] = map[string]interface{}{
 					"clients": currentStatus.(map[string]interface{})["clients"].(int) + 1,
-					"color":   hub.colors[secret],
+					"workspace":   hub.workspaces[roomID],
 				}
 			}
 		}

peerprep/app/questions/[question]/[roomID]/page.tsx

@@ -0,0 +1,29 @@
+import { fetchQuestion } from "@/api/gateway";
+import { Question as QnType, StatusBody, isError } from "@/api/structs";
+import styles from "@/style/question.module.css";
+import ErrorBlock from "@/components/shared/ErrorBlock";
+import React from "react";
+import QuestionBlock from "./question";
+
+type Props = {
+  params: {
+    question: string;
+    roomID: string;
+  };
+};
+
+async function Question({ params }: Props) {
+  const question = await fetchQuestion(params.question);
+
+  return (
+    <div className={styles.wrapper}>
+      {isError(question) ? (
+        <ErrorBlock err={question as StatusBody} />
+      ) : (
+        <QuestionBlock question={question as QnType} roomID={params.roomID} />
+      )}
+    </div>
+  );
+}
+
+export default Question;

peerprep/app/questions/[question]/[roomID]/question.tsx

@@ -0,0 +1,99 @@
+"use client";
+import React from "react";
+import { Difficulty, Question } from "@/api/structs";
+import Chip from "@/components/shared/Chip";
+import PeerprepButton from "@/components/shared/PeerprepButton";
+import styles from "@/style/question.module.css";
+import { useRouter } from "next/navigation";
+import { deleteQuestion } from "@/app/api/internal/questions/helper";
+import CollabEditor from "@/components/questionpage/CollabEditor";
+import DOMPurify from "dompurify";
+
+interface Props {
+  question: Question;
+  roomID?: String;
+}
+
+interface DifficultyChipProps {
+  diff: Difficulty;
+}
+
+function DifficultyChip({ diff }: DifficultyChipProps) {
+  return diff === Difficulty.Easy ? (
+    <Chip className={styles.easy}>Easy</Chip>
+  ) : diff === Difficulty.Medium ? (
+    <Chip className={styles.med}>Med</Chip>
+  ) : (
+    <Chip className={styles.hard}>Hard</Chip>
+  );
+}
+
+function QuestionBlock({ question, roomID }: Props) {
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    if (
+      confirm(
+        `Are you sure you want to delete ${question.title}? (ID: ${question.id}) `
+      )
+    ) {
+      const status = await deleteQuestion(question.id);
+      if (status.error) {
+        alert(
+          `Failed to delete question. Code ${status.status}:  ${status.error}`
+        );
+        return;
+      }
+      console.log(`Successfully deleted the question.`);
+      router.push("/questions");
+    } else {
+      console.log("Deletion cancelled.");
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.qn_container}>
+        <div className={styles.title_wrapper}>
+          <div className={styles.label_wrapper}>
+            <h1 className={styles.title}>
+              Q{question.id}: {question.title}
+            </h1>
+            <DifficultyChip diff={question.difficulty} />
+          </div>
+          <PeerprepButton
+            className={` ${styles.button}`}
+            onClick={handleDelete}
+          >
+            Delete
+          </PeerprepButton>
+        </div>
+        <div className={styles.label_wrapper}>
+          <p>Topics: </p>
+          {question.topicTags.length == 0 ? (
+            <p>No topics listed.</p>
+          ) : (
+            question.topicTags.map((elem, idx) => (
+              <p key={idx} className={styles.label_shadow}>
+                {elem}
+              </p>
+            ))
+          )}
+        </div>
+        {
+          <div
+            className={styles.editorHTML}
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(question.content),
+            }}
+          />
+        }
+      </div>
+      <div className={styles.editor_container}>
+        <CollabEditor question={question} roomID={roomID} />
+      </div>
+    </>
+  );
+}
+
+export default QuestionBlock;

peerprep/components/questionpage/CollabEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import AceEditor from "react-ace";
 
 import "ace-builds/src-noconflict/mode-python";
@@ -44,9 +44,10 @@ themes.forEach((theme) => require(`ace-builds/src-noconflict/theme-${theme}`));
 
 interface Props {
   question: Question;
+  roomID?: String;
 }
 
-export default function CollabEditor({ question }: Props) {
+export default function CollabEditor({ question, roomID }: Props) {
   const [theme, setTheme] = useState("terminal");
   const [fontSize, setFontSize] = useState(18);
   const [language, setLanguage] = useState("python");
@@ -67,8 +68,10 @@ export default function CollabEditor({ question }: Props) {
     editor.container.style.resize = "both";
   };
 
-  const connectWebSocket = () => {
-    const newSocket = new WebSocket("ws://localhost:4000/ws?secret=bruh");
+  useEffect(() => {
+    if (!roomID) return;
+
+    const newSocket = new WebSocket(`ws://localhost:4000/ws?roomID=${roomID}`);
 
     newSocket.onopen = () => {
       console.log("WebSocket connection established");
@@ -79,7 +82,7 @@ export default function CollabEditor({ question }: Props) {
       const message = JSON.parse(event.data);
       console.log("Received WebSocket message:", message);
 
-      // Handle incoming WebSocket messages if required
+      // Handle incoming WebSocket messages
       if (message.type === "content_change") {
         setValue(message.data); // Update the editor value
       }
@@ -91,10 +94,7 @@ export default function CollabEditor({ question }: Props) {
     };
 
     setSocket(newSocket);
-  };
-
-  // TODO: to be taken from question props instead
-  // const value = question[language] ?? "// Comment"
+  }, []);
 
   return (
     <>
@@ -128,17 +128,12 @@ export default function CollabEditor({ question }: Props) {
             "border border-gray-600 bg-gray-800 text-white p-2 rounded"
           }
         />
-
-        <div>
-          <button
-            onClick={connectWebSocket}
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-          >
-            {connected ? "Connected" : "Connect WebSocket"}
-          </button>
-        </div>
       </div>
-
+      {roomID && (
+        <div className="w-full text-center mb-[16px]">
+          {connected ? "Connected" : "Disconnected"}
+        </div>
+      )}
       <AceEditor
         mode={language}
         className={"editor"}

peerprep/components/questionpage/Matchmaking.tsx

@@ -56,7 +56,9 @@ const Matchmaking = () => {
   const router = useRouter();
   const [isMatching, setIsMatching] = useState<boolean>(false);
   const { difficulties, topicList } = useQuestionFilter();
-  const [difficultyFilter, setDifficultyFilter] = useState<string>(Difficulty.Easy);
+  const [difficultyFilter, setDifficultyFilter] = useState<string>(
+    Difficulty.Easy
+  );
   const [topicFilter, setTopicFilter] = useState<string[]>(topicList);
   const { userid } = useUserInfo();
   const timeout = useRef<NodeJS.Timeout>();
@@ -99,7 +101,7 @@ const Matchmaking = () => {
       console.log("Match attempted");
       console.debug(matchRequest);
 
-      // send match request
+      //   send match request
       const status = await findMatch(matchRequest);
       if (status.error) {
         stopTimer();
@@ -131,6 +133,8 @@ const Matchmaking = () => {
     User1: ${matchRes.data.user1}
     User2: ${matchRes.data.user2}`;
     window.alert(message);
+    // redirect to question page
+    router.push(`/questions/1/${matchRes.data.roomId}`);
   };
 
   usePeriodicCallback(queryResource, QUERY_INTERVAL_MILLISECONDS, isMatching);
@@ -145,19 +149,27 @@ const Matchmaking = () => {
         <PeerprepButton onClick={handleMatch}>
           {isMatching ? "Cancel Match" : "Find Match"}
         </PeerprepButton>
-        {!isMatching && 
-          <PeerprepDropdown label="Difficulty"
+        {!isMatching && (
+          <PeerprepDropdown
+            label="Difficulty"
             value={difficultyFilter}
-            onChange={e => setDifficultyFilter(e.target.value)}
+            onChange={(e) => setDifficultyFilter(e.target.value)}
             // truthfully we don't need this difficulties list, but we are temporarily including it
-            options={difficulties} />
-        }
-        {!isMatching && 
-          <PeerprepDropdown label="Topics"
+            options={difficulties}
+          />
+        )}
+        {!isMatching && (
+          <PeerprepDropdown
+            label="Topics"
             value={topicFilter[0]}
-            onChange={e => setTopicFilter(e.target.value === "all" ? topicList : [e.target.value])}
-            options={topicList} />
-        }
+            onChange={(e) =>
+              setTopicFilter(
+                e.target.value === "all" ? topicList : [e.target.value]
+              )
+            }
+            options={topicList}
+          />
+        )}
         {isMatching && <ResettingStopwatch isActive={isMatching} />}
       </div>
     </div>