Revert Attempt at Using ImperativeHandle

Author: Nephelite

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import styles from "./CodeEditor.module.css";
 import Editor from "@monaco-editor/react";
 import { Button, Spin, Modal } from "antd";
@@ -14,10 +14,6 @@ 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 {
@@ -28,25 +24,19 @@ function usePrevious<T>(value: T): T | undefined {
     return ref.current;
 }
 
-const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({
+const CodeEditor: React.FC<CodeEditorProps> = ({ 
     questionId,
     roomId,
     attemptStartedAt,
-    collaboratorId,
-    onUserConfirmedLeave,
-  }, ref) => {
+    collaboratorId
+}) => {
     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(() => {
@@ -161,7 +151,6 @@ const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({
                             roomId={roomId}
                             attemptStartedAt={attemptStartedAt}
                             collaboratorId={collaboratorId}
-                            onUserConfirmedLeave={onUserConfirmedLeave}
                         />
                     </div>
                 </div>
@@ -179,6 +168,6 @@ const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({
             </div>
         </div>
     );
-});
+};
 
 export default CodeEditor;

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

@@ -11,7 +11,6 @@ interface LeaveButtonProps {
     roomId: string;
     attemptStartedAt: Date;
     collaboratorId: string;
-    onUserConfirmedLeave: (shouldSave: boolean) => void;
 }
 
 const LeaveButton: React.FC<LeaveButtonProps> = ({
@@ -20,7 +19,6 @@ const LeaveButton: React.FC<LeaveButtonProps> = ({
     roomId,
     attemptStartedAt,
     collaboratorId,
-    onUserConfirmedLeave,
 }) => {
     const navigate = useNavigate();
     const [isModalVisible, setIsModalVisible] = useState(false);
@@ -36,10 +34,8 @@ const LeaveButton: React.FC<LeaveButtonProps> = ({
         setIsModalVisible(false);
     };
 
-    
     const handleLeaveWithoutSaving = () => {
         setIsModalVisible(false);
-        onUserConfirmedLeave(false);
         navigate('/');
     };
 
@@ -54,7 +50,6 @@ 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,5 +1,4 @@
 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";
@@ -16,7 +15,6 @@ 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();
@@ -25,14 +23,11 @@ const CollaborationRoomPage: React.FC = () => {
 
     // State Definitions
     const { urlRoomId } = useParams<{ urlRoomId: string }>();
-    const [hasUserConfirmedLeave, setHasUserConfirmedLeave] = useState(false);
-    const [shouldSaveOnLeave, setShouldSaveOnLeave] = useState(true);
-    const [room, setRoom] = useState<Room>();
+    const [room, setRoom] = useState<Room | null>(null);
     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 codeEditorRef = useRef<CodeEditorHandle>(null);
 
     // Extract details from location.state if available
     const { roomId, attemptStartedAt, matchUserId, questionId } = locationState || {};
@@ -94,65 +89,6 @@ const CollaborationRoomPage: React.FC = () => {
         fetchQuestion();
     }, [room]);
 
-    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",
@@ -198,15 +134,10 @@ 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>