Merge pull request #95 from CS3219-AY2425S1/add-on-leave-saving-attempt

Add On Unexpected Leave Code Saving

Author: SPWwj

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
 import styles from "./CodeEditor.module.css";
 import Editor from "@monaco-editor/react";
 import { Button, Spin, Modal } from "antd";
@@ -14,6 +14,10 @@ interface CodeEditorProps {
     roomId: string;
     attemptStartedAt: Date;
     collaboratorId: string;
+    onUserConfirmedLeave: (shouldSave: boolean) => void; // New prop
+}
+export interface CodeEditorHandle {
+  getEditorText: () => string;
 }
 
 function usePrevious<T>(value: T): T | undefined {
@@ -24,19 +28,25 @@ function usePrevious<T>(value: T): T | undefined {
     return ref.current;
 }
 
-const CodeEditor: React.FC<CodeEditorProps> = ({ 
+const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({
     questionId,
     roomId,
     attemptStartedAt,
-    collaboratorId
-}) => {
+    collaboratorId,
+    onUserConfirmedLeave,
+  }, ref) => {
     const { onEditorIsMounted, isExecuting, setRoomId, connectedUsers } = useCollaboration();
     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);
 
+    // Expose the getEditorText method using useImperativeHandle
+    useImperativeHandle(ref, () => ({
+      getEditorText: () => editorRef.current?.getValue() || "",
+    }));
+
     const prevConnectedUsers = usePrevious(connectedUsers);
 
     useEffect(() => {
@@ -151,6 +161,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                             roomId={roomId}
                             attemptStartedAt={attemptStartedAt}
                             collaboratorId={collaboratorId}
+                            onUserConfirmedLeave={onUserConfirmedLeave}
                         />
                     </div>
                 </div>
@@ -168,6 +179,6 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
             </div>
         </div>
     );
-};
+});
 
 export default CodeEditor;

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

@@ -11,6 +11,7 @@ interface LeaveButtonProps {
     roomId: string;
     attemptStartedAt: Date;
     collaboratorId: string;
+    onUserConfirmedLeave: (shouldSave: boolean) => void;
 }
 
 const LeaveButton: React.FC<LeaveButtonProps> = ({
@@ -19,6 +20,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = ({
     roomId,
     attemptStartedAt,
     collaboratorId,
+    onUserConfirmedLeave,
 }) => {
     const navigate = useNavigate();
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -34,8 +36,10 @@ const LeaveButton: React.FC<LeaveButtonProps> = ({
         setIsModalVisible(false);
     };
 
+    
     const handleLeaveWithoutSaving = () => {
         setIsModalVisible(false);
+        onUserConfirmedLeave(false);
         navigate('/');
     };
 
@@ -50,6 +54,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = ({
                 getEditorText(),
             );
             message.success("Your work has been saved successfully.");
+            onUserConfirmedLeave(false);
             navigate('/');
         } catch (error) {
             if (error instanceof Error) {

frontend/src/presentation/pages/CollaborationRoomPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
+import { CodeEditorHandle } from "../../presentation/components/CodeEditor/CodeEditor";
 import styles from "./CollaborationRoomPage.module.css";
 import CodeEditor from "../../presentation/components/CodeEditor/CodeEditor";
 import { QuestionDetail } from "../../presentation/components/QuestionDetail";
@@ -15,6 +16,7 @@ import { Room } from "../../domain/entities/Room";
 import { useAuth } from "../../domain/context/AuthContext";
 import { Spin } from "antd";
 import { toast } from "react-toastify";
+import { historyUseCases } from "domain/usecases/HistoryUseCases";
 
 const CollaborationRoomPage: React.FC = () => {
     const location = useLocation();
@@ -23,12 +25,15 @@ const CollaborationRoomPage: React.FC = () => {
 
     // State Definitions
     const { urlRoomId } = useParams<{ urlRoomId: string }>();
-    const [room, setRoom] = useState<Room | null>(null);
+    const [hasUserConfirmedLeave, setHasUserConfirmedLeave] = useState(false);
+    const [shouldSaveOnLeave, setShouldSaveOnLeave] = useState(true);
+    const [room, setRoom] = useState<Room>();
     const [question, setQuestion] = useState<Question | undefined>(undefined);
     const [showChat, setShowChat] = useState(false);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
     const resizeTimeoutRef = useRef<NodeJS.Timeout>();
+    const codeEditorRef = useRef<CodeEditorHandle>(null);
 
     // Extract details from location.state if available
     const { roomId, attemptStartedAt, matchUserId, questionId } = locationState || {};
@@ -111,7 +116,68 @@ const CollaborationRoomPage: React.FC = () => {
             if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
         };
     }, [handleResize]);
+    
+      
+    useEffect(() => {
+    
+        const saveAttempt = async () => {
+            if (hasUserConfirmedLeave) {
+                if (!shouldSaveOnLeave) return; // User chose not to save
+            }
+        
+            // Attempt to save
+            try {
+                if (!room) return;
+                await historyUseCases.createOrUpdateUserHistory(
+                    room.questionId,
+                    room.roomId,
+                    new Date(room.attemptStartedAt).getTime().toString(),
+                    Date.now().toString(),
+                    room.userIdTwo?._id,
+                    codeEditorRef.current?.getEditorText() || "",
+                );
+                console.log("Attempt saved successfully.");
+            } catch (error) {
+            console.error("Failed to save attempt on unmount:", error);
+            }
+        };
+
+        return () => {
+            saveAttempt();
+        };
+    }, [hasUserConfirmedLeave, room, shouldSaveOnLeave]);
+      
+    useEffect(() => {
+    
+        const saveAttemptAsync = async () => {
+            if (!room) return;
+            if (hasUserConfirmedLeave) {
+                if (!shouldSaveOnLeave) return;
+            }
+        
+            const editorContent = codeEditorRef.current?.getEditorText() || "";
+            await historyUseCases.createOrUpdateUserHistory(
+                room.questionId,
+                room.roomId,
+                new Date(room.attemptStartedAt).getTime().toString(),
+                Date.now().toString(),
+                room.userIdTwo?._id,
+                editorContent,
+            );
+        };
 
+        const handleBeforeUnload = async (event: BeforeUnloadEvent) => {
+            await saveAttemptAsync();
+        };
+      
+        window.addEventListener('beforeunload', handleBeforeUnload);
+      
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [hasUserConfirmedLeave, room, shouldSaveOnLeave]);
+      
+      
     // Resizable Layout Configurations
     const { position: questionPosition, separatorProps: verticalSeparatorProps } = useResizable({
         axis: "x",
@@ -164,10 +230,15 @@ const CollaborationRoomPage: React.FC = () => {
                     <div className={styles.editorAndOutputContainer}>
                         <div className={styles.editorContainer}>
                             <CodeEditor
+                                ref={codeEditorRef}
                                 questionId={room.questionId}
                                 roomId={room.roomId}
                                 attemptStartedAt={new Date(room.attemptStartedAt)}
                                 collaboratorId={room.userIdTwo?._id}
+                                onUserConfirmedLeave={(shouldSave: boolean) => {
+                                  setHasUserConfirmedLeave(true);
+                                  setShouldSaveOnLeave(shouldSave);
+                                }}
                             />
                         </div>