Merge pull request #94 from CS3219-AY2425S1/nephelite-patch-3

Implement Various UI Changes

Author: Nephelite

backend/question-service/controllers/historyController.ts

@@ -1,5 +1,4 @@
 import { Response } from 'express';
-import jwt, { JwtPayload } from 'jsonwebtoken';
 import historyEntryModel from '../models/HistoryEntry';
 import { AuthenticatedRequest } from 'middlewares/auth';
 
@@ -37,12 +36,13 @@ export const getUserHistoryEntries = async (req: AuthenticatedRequest, res: Resp
       return {
         id: entry._id,
         key: entry._id,
+        roomId: entry.roomId,
         attemptStartedAt: entry.attemptStartedAt.getTime(),
         attemptCompletedAt: entry.attemptCompletedAt.getTime(),
         title: entry.question.title,
         difficulty: entry.question.difficulty,
         topics: entry.question.categories.map((cat: any) => cat.name),
-        attemptCode: entry.attemptCode,
+        attemptCodes: entry.attemptCodes,
     }});
     res.status(200).json(historyViewModels);
   } catch (error) {
@@ -71,7 +71,7 @@ export const createOrUpdateUserHistoryEntry = async (req: AuthenticatedRequest,
       existingEntry.attemptStartedAt = attemptStartedAt;
       existingEntry.attemptCompletedAt = attemptCompletedAt;
       existingEntry.collaboratorId = collaboratorId;
-      existingEntry.attemptCode = attemptCode;
+      existingEntry.attemptCodes.push(attemptCode);
 
       const updatedEntry = await existingEntry.save();
 
@@ -84,7 +84,7 @@ export const createOrUpdateUserHistoryEntry = async (req: AuthenticatedRequest,
         attemptStartedAt,
         attemptCompletedAt,
         collaboratorId,
-        attemptCode,
+        attemptCodes: [attemptCode],
       });
 
       const savedEntry = await newHistoryEntry.save();
@@ -96,6 +96,30 @@ export const createOrUpdateUserHistoryEntry = async (req: AuthenticatedRequest,
   }
 };
 
+export const removeRoomIdPresence = async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const userId = extractUserIdFromToken(req);
+
+    if (!userId) {
+      return res.status(401).json({ error: 'Invalid or missing token' });
+    }
+    const { roomId } = req.params;
+
+    const existingEntries = await historyEntryModel.find({ roomId });
+    const updatedEntries: string[] = [];
+
+    existingEntries.forEach(async (entry) => {
+      entry.roomId = "";
+      await entry.save();
+      updatedEntries.push(entry._id.toString());
+    });
+
+    return res.status(200).json({ updatedEntries })
+  } catch (error) {
+    return res.status(500).json({ error: getErrorMessage(error) });
+  }
+}
+
 export const deleteUserHistoryEntry = async (req: AuthenticatedRequest, res: Response) => {
   try {
     const userId = extractUserIdFromToken(req);

backend/question-service/models/HistoryEntry.ts

@@ -9,7 +9,7 @@ export interface HistoryEntry extends mongoose.Document {
   attemptStartedAt: Date;
   attemptCompletedAt: Date;
   collaboratorId: string;
-  attemptCode: string;
+  attemptCodes: string[];
 }
 
 const historyEntrySchema: Schema = new Schema<HistoryEntry>({
@@ -19,7 +19,7 @@ const historyEntrySchema: Schema = new Schema<HistoryEntry>({
   attemptStartedAt: { type: Date, required: true, default: Date.now() },
   attemptCompletedAt: { type: Date, required: true, default: Date.now() },
   collaboratorId: { type: String, required: true },
-  attemptCode: { type: String, required: true },
+  attemptCodes: [{ type: String, required: true }],
 });
 
 const historyEntryModel = mongoose.model<HistoryEntry>('historyEntry', historyEntrySchema);

backend/question-service/routes/historyRoutes.ts

@@ -5,13 +5,15 @@ import {
   deleteUserHistoryEntry,
   deleteUserHistoryEntries,
   deleteAllUserHistoryEntries,
+  removeRoomIdPresence,
 } from '../controllers/historyController';
 import { authenticateToken } from '../middlewares/auth';
 
 const router = express.Router();
 
 router.get("/", authenticateToken, getUserHistoryEntries);
 router.post("/", authenticateToken, createOrUpdateUserHistoryEntry);
+router.post("/room/:id", authenticateToken, removeRoomIdPresence);
 router.delete("/user/:id", authenticateToken, deleteUserHistoryEntry);
 router.delete("/user", authenticateToken, deleteUserHistoryEntries);
 router.delete("/all", authenticateToken, deleteAllUserHistoryEntries);

frontend/src/domain/entities/HistoryEntry.ts

@@ -1,10 +1,11 @@
 export interface HistoryEntry {
     _id: string;
     key: string;
+    roomId: string;
     attemptStartedAt: string;
     attemptCompletedAt: string;
     title: string;
     difficulty: 'Easy' | 'Medium' | 'Hard';
     topics: string[];
-    attemptCode: string;
+    attemptCodes: string[];
 }

frontend/src/presentation/components/CodeEditor/CodeEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import styles from "./CodeEditor.module.css";
 import Editor from "@monaco-editor/react";
-import { Button, Spin } from "antd";
+import { Button, Spin, Modal } from "antd";
 import { useCollaboration } from "domain/context/CollaborationContext";
 import * as monaco from "monaco-editor";
 import { SunOutlined, MoonFilled } from "@ant-design/icons";
@@ -16,6 +16,14 @@ interface CodeEditorProps {
     collaboratorId: string;
 }
 
+function usePrevious<T>(value: T): T | undefined {
+    const ref = useRef<T>();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+
 const CodeEditor: React.FC<CodeEditorProps> = ({ 
     questionId,
     roomId,
@@ -26,6 +34,10 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     const [theme, setTheme] = useState("vs-light");
     const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
     const containerRef = useRef<HTMLDivElement>(null);
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [leftUser, setLeftUser] = useState<string | null>(null);
+
+    const prevConnectedUsers = usePrevious(connectedUsers);
 
     useEffect(() => {
         let resizeObserver: ResizeObserver | null = null;
@@ -53,6 +65,21 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
         };
     }, []);
 
+    useEffect(() => {
+        if (prevConnectedUsers) {
+            const leftUsers = prevConnectedUsers.filter(user => !connectedUsers.includes(user));
+            if (leftUsers.length > 0) {
+                setLeftUser(leftUsers[0]);
+                setIsModalVisible(true);
+            }
+        }
+    }, [connectedUsers, prevConnectedUsers]);
+
+    const handleOk = () => {
+        setIsModalVisible(false);
+        setLeftUser(null);
+    };
+
     const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
         editorRef.current = editor;
         onEditorIsMounted(editor);
@@ -65,6 +92,24 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
 
     return (
         <div className={styles.container} ref={containerRef}>
+            <Modal
+                title="User Disconnected"
+                open={isModalVisible}
+                onOk={handleOk}
+                onCancel={handleOk}
+                footer={[
+                    <Button key="ok" type="primary" onClick={handleOk}>
+                        OK
+                    </Button>,
+                ]}
+            >
+                {leftUser ? (
+                    <p>User <strong>{leftUser}</strong> has left the session.</p>
+                ) : (
+                    <p>A user has left the session.</p>
+                )}
+            </Modal>
+
             <div className={styles.toolbar}>
                 <div className={styles.toolbarLeft}>
                     <LanguageSelector />

frontend/src/presentation/components/CodeEditor/LeaveButton.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, Modal } from "antd";
+import { Button, Modal, message } from "antd";
 import { StopOutlined } from "@ant-design/icons";
 import styles from "./LeaveButton.module.css";
 import { useNavigate } from "react-router-dom";
@@ -30,21 +30,38 @@ const LeaveButton: React.FC<LeaveButtonProps> = ({
         setIsModalVisible(true);
     };
 
-    const handleOk = async () => {
-        await historyUseCases.createOrUpdateUserHistory(
-            questionId,
-            roomId,
-            attemptStartedAt.getTime().toString(),
-            Date.now().toString(),
-            collaboratorId,
-            getEditorText(),
-        );
-        navigate('/')
+    const handleCancel = () => {
         setIsModalVisible(false);
     };
 
-    const handleCancel = () => {
+    const handleLeaveWithoutSaving = () => {
         setIsModalVisible(false);
+        navigate('/');
+    };
+
+    const handleSaveAndLeave = async () => {
+        try {
+            await historyUseCases.createOrUpdateUserHistory(
+                questionId,
+                roomId,
+                attemptStartedAt.getTime().toString(),
+                Date.now().toString(),
+                collaboratorId,
+                getEditorText(),
+            );
+            message.success("Your work has been saved successfully.");
+            navigate('/');
+        } catch (error) {
+            if (error instanceof Error) {
+                console.error("Failed to save before leaving:", error.message);
+                message.error(`Failed to save before leaving: ${error.message}`);
+            } else {
+                console.error("Unknown error occurred during saving");
+                message.error("Unknown error occurred during saving");
+            }
+        } finally {
+            setIsModalVisible(false);
+        }
     };
 
     return (
@@ -58,16 +75,23 @@ const LeaveButton: React.FC<LeaveButtonProps> = ({
                 Leave
             </Button>
             <Modal
-                title="Editor Content"
+                title="Confirm Leave"
                 open={isModalVisible}
-                onOk={handleOk}
                 onCancel={handleCancel}
                 footer={[
-                    <Button key="ok" type="primary" onClick={handleOk}>
-                        OK
+                    <Button key="cancel" onClick={handleCancel} color='danger'>
+                        Cancel
+                    </Button>,
+                    <Button key="leaveWithoutSaving" onClick={handleLeaveWithoutSaving} color='danger'>
+                        Leave without saving
+                    </Button>,
+                    <Button key="saveAndLeave" type="primary" onClick={handleSaveAndLeave}>
+                        Save and Leave
                     </Button>,
                 ]}
+                destroyOnClose
             >
+                <p>Do you want to save your code before leaving?</p>
                 <pre className={styles.modalContent}>{editorContent}</pre>
             </Modal>
         </>

frontend/src/presentation/components/CodeEditor/SubmitButton.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from "react";
-import { Button, Modal } from "antd";
-import { CloudUploadOutlined } from "@ant-design/icons";
+import { Button, Modal, message } from "antd";
+import { SaveOutlined } from "@ant-design/icons";
 import styles from "./CodeActionButtons.module.css";
 import { historyUseCases } from "domain/usecases/HistoryUseCases";
 
-interface SubmitButtonProps {
+interface SaveButtonProps {
     getEditorText: () => string;
     questionId: string;
     roomId: string;
     attemptStartedAt: Date;
     collaboratorId: string;
 }
 
-const SubmitButton: React.FC<SubmitButtonProps> = ({
+const SaveButton: React.FC<SaveButtonProps> = ({
     getEditorText,
     questionId,
     roomId,
@@ -28,47 +28,62 @@ const SubmitButton: React.FC<SubmitButtonProps> = ({
         setIsModalVisible(true);
     };
 
-    const handleOk = async () => {
-        await historyUseCases.createOrUpdateUserHistory(
-            questionId,
-            roomId,
-            attemptStartedAt.getTime().toString(),
-            Date.now().toString(),
-            collaboratorId,
-            getEditorText(),
-        );
+    const handleCancel = () => {
         setIsModalVisible(false);
     };
 
-    const handleCancel = () => {
-        setIsModalVisible(false);
+    const handleSave = async () => {
+        try {
+            await historyUseCases.createOrUpdateUserHistory(
+                questionId,
+                roomId,
+                attemptStartedAt.getTime().toString(),
+                Date.now().toString(),
+                collaboratorId,
+                getEditorText(),
+            );
+            message.success("Your work has been saved successfully.");
+            setIsModalVisible(false);
+        } catch (error) {
+            if (error instanceof Error) {
+                console.error("Failed to save:", error.message);
+                message.error(`Failed to save: ${error.message}`);
+            } else {
+                console.error("Unknown error occurred during saving");
+                message.error("Unknown error occurred during saving");
+            }
+        }
     };
 
     return (
         <>
             <Button
                 onClick={showModal}
                 type="text"
-                icon={<CloudUploadOutlined />}
+                icon={<SaveOutlined />}
                 className={styles.submitButton}
             >
-                Submit
+                Save
             </Button>
             <Modal
-                title="Editor Content"
+                title="Confirm Save"
                 open={isModalVisible}
-                onOk={handleOk}
                 onCancel={handleCancel}
                 footer={[
-                    <Button key="ok" type="primary" onClick={handleOk}>
-                        OK
+                    <Button key="cancel" onClick={handleCancel} color='danger'>
+                        Cancel
+                    </Button>,
+                    <Button key="save" type="primary" onClick={handleSave}>
+                        Save
                     </Button>,
                 ]}
+                destroyOnClose
             >
+                <p>Do you want to save your current work?</p>
                 <pre className={styles.modalContent}>{editorContent}</pre>
             </Modal>
         </>
     );
 };
 
-export default SubmitButton;
+export default SaveButton;