Merge pull request #88 from CS3219-AY2425S1/submit-button

Add Submit Button Functionality

Author: Nephelite

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

@@ -1,12 +1,25 @@
 import { Button } from "antd";
 import { useCollaboration } from "domain/context/CollaborationContext";
-import { PlayCircleOutlined, CloudUploadOutlined } from "@ant-design/icons";
+import { PlayCircleOutlined } from "@ant-design/icons";
 import styles from "./CodeActionButtons.module.css";
+import SubmitButton from "./SubmitButton";
 
 interface CodeActionButtonsProps {
     disabled?: boolean;
+    getEditorText: () => string;
+    questionId: string;
+    roomId: string;
+    attemptStartedAt: Date;
+    collaboratorId: string;
 }
-export const CodeActionButtons: React.FC<CodeActionButtonsProps> = ({ disabled = false }) => {
+export const CodeActionButtons: React.FC<CodeActionButtonsProps> = ({ 
+    disabled = false,
+    getEditorText,
+    questionId,
+    roomId,
+    attemptStartedAt,
+    collaboratorId,
+}) => {
     const { handleExecuteCode } = useCollaboration();
     return (
         <>
@@ -20,9 +33,13 @@ export const CodeActionButtons: React.FC<CodeActionButtonsProps> = ({ disabled =
             >
                 Run
             </Button>
-            <Button className={styles.submitButton} icon={<CloudUploadOutlined />} disabled={disabled}>
-                Submit
-            </Button>
+            <SubmitButton
+                getEditorText={getEditorText}
+                questionId={questionId}
+                roomId={roomId}
+                attemptStartedAt={attemptStartedAt}
+                collaboratorId={collaboratorId}
+            />
         </>
     );
 };

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

@@ -92,7 +92,14 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                             icon={theme === "vs-light" ? <SunOutlined /> : <MoonFilled />}
                         />
 
-                        <CodeActionButtons disabled={isExecuting} />
+                        <CodeActionButtons 
+                            disabled={isExecuting}
+                            getEditorText={() => editorRef.current?.getValue() || ""}
+                            questionId={questionId}
+                            roomId={roomId}
+                            attemptStartedAt={attemptStartedAt}
+                            collaboratorId={collaboratorId}
+                        />
                         <LeaveButton
                             getEditorText={() => editorRef.current?.getValue() || ""}
                             questionId={questionId}

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

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { Button, Modal } from "antd";
+import { CloudUploadOutlined } from "@ant-design/icons";
+import styles from "./CodeActionButtons.module.css";
+import { historyUseCases } from "domain/usecases/HistoryUseCases";
+
+interface SubmitButtonProps {
+    getEditorText: () => string;
+    questionId: string;
+    roomId: string;
+    attemptStartedAt: Date;
+    collaboratorId: string;
+}
+
+const SubmitButton: React.FC<SubmitButtonProps> = ({
+    getEditorText,
+    questionId,
+    roomId,
+    attemptStartedAt,
+    collaboratorId,
+}) => {
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [editorContent, setEditorContent] = useState("");
+
+    const showModal = () => {
+        const content = getEditorText();
+        setEditorContent(content);
+        setIsModalVisible(true);
+    };
+
+    const handleOk = async () => {
+        await historyUseCases.createOrUpdateUserHistory(
+            questionId,
+            roomId,
+            attemptStartedAt.getTime().toString(),
+            Date.now().toString(),
+            collaboratorId,
+            getEditorText(),
+        );
+        setIsModalVisible(false);
+    };
+
+    const handleCancel = () => {
+        setIsModalVisible(false);
+    };
+
+    return (
+        <>
+            <Button
+                onClick={showModal}
+                type="text"
+                icon={<CloudUploadOutlined />}
+                className={styles.submitButton}
+            >
+                Submit
+            </Button>
+            <Modal
+                title="Editor Content"
+                open={isModalVisible}
+                onOk={handleOk}
+                onCancel={handleCancel}
+                footer={[
+                    <Button key="ok" type="primary" onClick={handleOk}>
+                        OK
+                    </Button>,
+                ]}
+            >
+                <pre className={styles.modalContent}>{editorContent}</pre>
+            </Modal>
+        </>
+    );
+};
+
+export default SubmitButton;