Merge pull request #44 from CS3219-AY2425S1/jiale/frontend-improvements

Fix conflict due to refactor
CS3219-AY2425S1 · Nov 13, 2024 · 821ba4c · 821ba4c
2 parents 8d2883a + e37812e
commit 821ba4c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 50 deletions.
diff --git a/frontend/src/components/CodeContainer/CodeContainer.scss b/frontend/src/components/CodeContainer/CodeContainer.scss
@@ -59,4 +59,32 @@
       overflow: hidden;
     }
   }
+
+  .ai-hint-button {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    background-color: #2e2e2e;
+    border-radius: 20px;
+    padding: 10px 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+    transition:
+      background-color 0.2s ease,
+      transform 0.2s ease;
+    z-index: 1000;
+  }
+
+  .ai-hint-button:hover {
+    background-color: #373737;
+    transform: scale(1.05);
+  }
+
+  .ai-hint-button .MuiTypography-root {
+    color: #fff;
+    font-size: 1rem;
+    margin-left: 8px;
+  }
 }
diff --git a/frontend/src/components/CodeContainer/CodeContainer.tsx b/frontend/src/components/CodeContainer/CodeContainer.tsx
@@ -17,9 +17,11 @@ import { useMainDialog } from "../../contexts/MainDialogContext";
 import QuestionService from "../../services/question.service";
 import { SessionContext } from "../../contexts/SessionContext";
 import { UserContext } from "../../contexts/UserContext";
-import { Button } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import "./CodeContainer.scss";
+import HintBox from "../HintBox/HintBox";
+import LightbulbIcon from "@mui/icons-material/Lightbulb";
 
 const COLLABORATION_WEBSOCKET_URL = process.env.REACT_APP_COLLABORATION_SERVICE_URL as string;
 
@@ -127,6 +129,8 @@ const CodeContainer: React.FC<CodeContainerProps> = ({
   const codeRef = useRef<string>(code);
   const languageRef = useRef<Language>(language);
 
+  const [isHintBoxExpanded, setIsHintBoxExpanded] = useState(false);
+
   const [joinedRoom, setJoinedRoom] = useState(false);
   const [isExecuting, setIsExecuting] = useState<boolean>(false);
 
@@ -447,6 +451,25 @@ const CodeContainer: React.FC<CodeContainerProps> = ({
           theme={okaidia}
         />
       </div>
+
+      {/* Floating AI Hint Button */}
+      {!isHintBoxExpanded && (
+        <div className="ai-hint-button" onClick={() => setIsHintBoxExpanded(true)}>
+          <LightbulbIcon style={{ marginRight: "8px", color: "#FFD700" }} />
+          <Typography variant="body1" style={{ color: "#fff" }}>
+            AI Hint
+          </Typography>
+        </div>
+      )}
+
+      {isHintBoxExpanded && questionData && (
+        <HintBox
+          questionId={questionId}
+          onClose={() => setIsHintBoxExpanded(false)}
+          code={code} // Pass the current code
+          language={language} // Pass the current language
+        />
+      )}
     </div>
   );
 };

diff --git a/frontend/src/pages/CodeEditor/CodeEditor.scss b/frontend/src/pages/CodeEditor/CodeEditor.scss
@@ -14,33 +14,6 @@
   background: var(--Grey-10, #1a1a1a);
 }
 
-.ai-hint-button {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  background-color: #2e2e2e;
-  border-radius: 20px;
-  padding: 10px 20px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  transition:
-    background-color 0.2s ease,
-    transform 0.2s ease;
-  z-index: 1000;
-}
-
-.ai-hint-button:hover {
-  background-color: #373737;
-  transform: scale(1.05);
-}
-
-.ai-hint-button .MuiTypography-root {
-  color: #fff;
-  font-size: 1rem;
-  margin-left: 8px;
-}
 .buttons {
   margin: 10px;
 }

diff --git a/frontend/src/pages/CodeEditor/CodeEditor.tsx b/frontend/src/pages/CodeEditor/CodeEditor.tsx
@@ -2,9 +2,7 @@ import React, { useState, useEffect, useRef, useContext } from "react";
 import { Button, Typography } from "@mui/material";
 import Chatbox from "../../components/Chatbox/Chatbox";
 import VideoCall from "../../components/VideoCall/VideoCall";
-import HintBox from "../../components/HintBox/HintBox";
 import VideoCallIcon from "@mui/icons-material/VideoCall";
-import LightbulbIcon from "@mui/icons-material/Lightbulb";
 import ChatIcon from "@mui/icons-material/Chat";
 import io, { Socket } from "socket.io-client";
 import "./CodeEditor.scss";
@@ -39,7 +37,6 @@ const CodeEditor: React.FC = () => {
   const [customTestCases, setCustomTestCases] = useState<TestCase[]>([]);
 
   // States for UI display
-  const [isHintBoxExpanded, setIsHintBoxExpanded] = useState(false);
   const [isChatboxExpanded, setIsChatboxExpanded] = useState(false);
   const [isVideoCallExpanded, setIsVideoCallExpanded] = useState(false);
   const [hasNewChatMessage, setHasNewChatMessage] = useState(false);
@@ -398,25 +395,6 @@ const CodeEditor: React.FC = () => {
           isAudioEnabled={isAudioEnabled}
         />
       </div>
-
-      {/* Floating AI Hint Button */}
-      {!isHintBoxExpanded && (
-        <div className="ai-hint-button" onClick={() => setIsHintBoxExpanded(true)}>
-          <LightbulbIcon style={{ marginRight: "8px", color: "#FFD700" }} />
-          <Typography variant="body1" style={{ color: "#fff" }}>
-            AI Hint
-          </Typography>
-        </div>
-      )}
-
-      {isHintBoxExpanded && questionData && (
-        <HintBox
-          questionId={questionId}
-          onClose={() => setIsHintBoxExpanded(false)}
-          code={code} // Pass the current code
-          language={language} // Pass the current language
-        />
-      )}
     </div>
   );
 };