Merge branch 'master' of https://github.com/CS3219-AY2324S1/ay2324s1-course-assessment-g14 into cicd

Author: ngjiayuan

MatchingService/src/matching/matching.service.ts

@@ -12,6 +12,7 @@ export function initializeMatchingService(io: Server) {
     socket.on('startMatching', (preferences: any) => {
       // Add the user to the list of active users with their preferences
       activeUsers.push({ socket, preferences });
+      //console.log('user is in queue to match with another user');
 
       // Attempt to find a match for the user
       tryMatchForUser(socket, preferences);
@@ -61,6 +62,7 @@ export function initializeMatchingService(io: Server) {
       removeUserFromActiveList(matchedUser.socket);
       const randomSeed = Date.now();
       // Emit "matchFound" to both users
+      //console.log('match found');
       socket.emit('matchFound', {matchedUserPreferences: matchedUser.preferences, seed: randomSeed});
       matchedUser.socket.emit('matchFound', {matchedUserPreferences: preferences, seed: randomSeed});
     } else {

frontend/src/auth/AdminAuthGuard.tsx renamed to frontend/src/auth/AdminGuard.tsx

@@ -6,10 +6,10 @@ interface AuthGuardProps {
   children: ReactNode;
 }
 
-export default function AdminAuthGuard({ children }: AuthGuardProps) {
+export default function AdminGuard({ children }: AuthGuardProps) {
   const { user } = useAuth();
-  if (user?.role !== "admin") {
-    return <Navigate to="/home" />;
+  if (user?.role !== "admin" && user?.role !== "master") {
+    return <Navigate to="/login" />;
   }
   return <>{children}</>;
 }

frontend/src/auth/MaintainerGuard.tsx renamed to frontend/src/auth/MasterGuard.tsx

@@ -6,9 +6,9 @@ interface AuthGuardProps {
   children: ReactNode;
 }
 
-export default function MaintainerGuard({ children }: AuthGuardProps) {
+export default function MasterGuard({ children }: AuthGuardProps) {
   const { user } = useAuth();
-  if (user?.role !== "maintainer") {
+  if (user?.role !== "master") {
     return <Navigate to="/login" />;
   }
   return <>{children}</>;

frontend/src/components/CollabProblemSolverLeft.tsx

@@ -45,7 +45,9 @@ function CollabProblemSolverLeft({
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
       <Typography variant="body1" sx={{ marginBottom: 2, fontSize: "18px" }}>
-        {question.description}
+        {question.description.split("\\n").map((s, key) => {
+          return <p key={key}>{s}</p>;
+        })}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
       <Typography variant="h6" gutterBottom sx={{ fontSize: "18px" }}>

frontend/src/components/MatchingService/MatchingForm.tsx

@@ -62,6 +62,21 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
   const userEmail = user?.email;
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
   const [snackbarMessage, setSnackbarMessage] = React.useState("");
+  const [remainingTime, setRemainingTime] = React.useState(0); // State for the countdown timer
+  const [timerId, setTimerId] = React.useState<NodeJS.Timeout | null>(null); // State to keep track of the timer
+
+
+  const startCountdown = () => {
+    setRemainingTime(30); // Start the timer at 30 seconds
+    setIsMatching(true);
+    // Clear any existing timer
+    if (timerId) clearInterval(timerId);
+    // Start a new timer
+    const id = setInterval(() => {
+      setRemainingTime((time) => time - 1);
+    }, 1000);
+    setTimerId(id);
+  };
 
   React.useEffect(() => {
     getQuestions();
@@ -91,8 +106,24 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
 
     socket.emit("startMatching", preferences);
     setIsMatching(true);
+    startCountdown();
   };
 
+  React.useEffect(() => {
+    if (remainingTime === 0 && timerId) {
+      clearInterval(timerId);
+      setIsMatching(false); // Update isMatching state to false as matching ends
+      setSnackbarMessage("Matching timed out after 30 seconds.");
+      setOpenSnackbar(true);
+    }
+  }, [remainingTime, timerId]);
+
+  React.useEffect(() => {
+    return () => {
+      if (timerId) clearInterval(timerId);
+    };
+  }, [timerId]);
+
   const generateConsistentRandomIndex = (seed: any, arrayLength: number) => {
     return seed % arrayLength;
   };
@@ -130,6 +161,8 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
     // eslint-disable-next-line
   }, [questions]);
 
+  
+
   React.useEffect(() => {
     socket.on("matchFound", async (matchedUserPreferences) => {
       console.log("Match Found:", matchedUserPreferences);
@@ -210,7 +243,10 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
         </select>
       </div>
       {isMatching ? (
-        <div>Loading...</div>
+        <div>Loading... 
+        <p>Time remaining: {remainingTime} seconds</p>
+        </div>
+        
       ) : (
         <Button sx={{ mt: "5%" }} variant="contained" onClick={handleConnect}>
           Connect
@@ -236,4 +272,4 @@ const MatchingForm = React.forwardRef(function MatchingForm() {
   );
 });
 
-export default MatchingForm;
+export default MatchingForm;

frontend/src/components/Navbar.tsx

@@ -68,7 +68,7 @@ export default function Navbar() {
     { name: "Dashboard", onclick: handleCloseUserMenu },
     { name: "Logout", onclick: logout },
   ];
-  if (user?.role === "maintainer") {
+  if (user?.role === "master") {
     settings = settings.concat({
       name: "Create Admin",
       onclick: () => navigate("/createadmin", { replace: true }),
@@ -133,7 +133,7 @@ export default function Navbar() {
                     <Typography textAlign="center">{page.name}</Typography>
                   </MenuItem>
                 ))}
-              {user?.role === "admin" &&
+              {(user?.role === "admin" || user?.role === "master") &&
                 adminPages.map((page) => (
                   <MenuItem key={page.name} onClick={() => navigate(page.link)}>
                     <Typography textAlign="center">{page.name}</Typography>
@@ -177,7 +177,7 @@ export default function Navbar() {
                   {page.name}
                 </Button>
               ))}
-            {user?.role === "admin" &&
+            {(user?.role === "admin" || user?.role === "master") &&
               adminPages.map((page) => (
                 <Button
                   key={page.name}

frontend/src/components/ProblemSolverLeft.tsx

@@ -1,5 +1,5 @@
 // ProblemSolverLeft.jsx
-import React, {useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Paper,
@@ -31,22 +31,24 @@ const ProblemSolverLeft = () => {
     // If the question is not found, display a message
     return (
       <Paper elevation={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', padding: 2 }}>
-      <Typography variant="h4" gutterBottom>
-        Question not found
-        {questionId}
-      </Typography>
-    </Paper>
-  );
-}
+        <Typography variant="h4" gutterBottom>
+          Question not found
+          {questionId}
+        </Typography>
+      </Paper>
+    );
+  }
 
   return (
-    <Paper elevation={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', padding: 2 }}>
+    <Paper elevation={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', padding: 2}}>
       <Typography variant="h4" gutterBottom sx={{ fontSize: '24px' }}>
         {question.title}
       </Typography>
       <Divider sx={{ marginBottom: 2, marginTop: 5 }} />
       <Typography variant="body1" sx={{ marginBottom: 2, fontSize: '18px' }}>
-        {question.description}
+        {question.description.split("\\n").map((s, key) => {
+          return <p key={key}>{s}</p>;
+        })}
       </Typography>
       <Divider sx={{ marginBottom: 10 }} />
       <Typography variant="h6" gutterBottom sx={{ fontSize: '18px' }}>
@@ -61,7 +63,7 @@ const ProblemSolverLeft = () => {
             <CardMedia
               component="img"
               alt={`Example ${index + 1}`}
-              sx={{maxHeight: '100%', width: 'auto' }}
+              sx={{ maxHeight: '100%', width: 'auto' }}
               height="140"
               image={example.image}
             />

frontend/src/components/ProblemSolverRight.tsx

@@ -1,14 +1,19 @@
-import React, { useState } from 'react';
-import { Paper, Typography, TextField, MenuItem, Button } from '@mui/material';
+import React, { useState } from "react";
+import { Paper, Typography, TextField, MenuItem, Button } from "@mui/material";
+import { Link } from "react-router-dom";
+
 import Editor from "@monaco-editor/react";
 
-const languages: string[] = ['C++', 'Java', 'JavaScript', 'Python'];
+const languages: string[] = ["C++", "Java", "JavaScript", "Python"];
 
 function ProblemSolverRight() {
-  const [selectedLanguage, setSelectedLanguage] = useState<string>('JavaScript');
+  const [selectedLanguage, setSelectedLanguage] =
+    useState<string>("JavaScript");
   // const [code, setCode] = useState<string>('class Solution:');
-  const code = "class Solution:"
-  const handleLanguageChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+  const code = "class Solution:";
+  const handleLanguageChange = (
+    event: React.ChangeEvent<{ value: unknown }>
+  ) => {
     setSelectedLanguage(event.target.value as string);
   };
 
@@ -22,7 +27,10 @@ function ProblemSolverRight() {
   };
 
   return (
-    <Paper elevation={3} style={{ flex: 1, padding: 16, display: 'flex', flexDirection: 'column' }}>
+    <Paper
+      elevation={3}
+      style={{ flex: 1, padding: 16, display: "flex", flexDirection: "column" }}
+    >
       <Typography variant="h6" gutterBottom>
         Select a Language:
       </Typography>
@@ -31,33 +39,34 @@ function ProblemSolverRight() {
         fullWidth
         value={selectedLanguage}
         onChange={handleLanguageChange}
-        style={{ width: '50%' }}
+        style={{ width: "50%" }}
       >
         {languages.map((language, index) => (
           <MenuItem key={index} value={language}>
             {language}
           </MenuItem>
         ))}
       </TextField>
-      <Typography variant="h6" gutterBottom style={{ marginTop: '16px' }}>
+      <Typography variant="h6" gutterBottom style={{ marginTop: "16px" }}>
         Code Editor:
       </Typography>
       <Editor
-      height="900px"
-      language={selectedLanguage.toLowerCase()}
-      theme="vs-dark"
-      value={code}
-     
-    />
-      <Button
-        variant="contained"
-        color="primary"
-        fullWidth
-        onClick={handleSubmit}
-        style={{ marginTop: '16px' }}
-      >
-        Submit
-      </Button>
+        height="900px"
+        language={selectedLanguage.toLowerCase()}
+        theme="vs-dark"
+        value={code}
+      />
+      <Link to={`/home`} style={{ textDecoration: "none" }}>
+        <Button
+          variant="contained"
+          color="primary"
+          fullWidth
+          onClick={handleSubmit}
+          style={{ marginTop: "16px" }}
+        >
+          Submit
+        </Button>
+      </Link>
     </Paper>
   );
 }

frontend/src/components/Questions/AddQuestionTab.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import QuestionForm from "./QuestionForm";
 import { Box, Button } from "@mui/material";
 import Question from "./Question";
@@ -7,7 +7,7 @@ import { addQuestion } from "../../api/questions/data";
 import { AxiosError } from "axios";
 
 const AddQuestionTab: React.FC = () => {
-  const [addQuestions, setAddQuestions] = React.useState(false);
+  const [addQuestions, setAddQuestions] = useState(false);
 
   const handleAddQuestionClick = () => {
     setAddQuestions(true);
@@ -20,6 +20,9 @@ const AddQuestionTab: React.FC = () => {
       const questionAdded = await addQuestion(questionToAdd);
       console.log(questionAdded);
       setAddQuestions(false);
+
+      // Navigate to the current location to refresh the page
+      window.location.reload();
     } catch (e) {
       if (e instanceof AxiosError && e.response) {
         console.log(e.response.data.code);

frontend/src/components/Questions/EditQuestionsTab.tsx

@@ -26,6 +26,7 @@ const EditQuestionsTab: React.FC = () => {
         `Question ${editedQuestion.id} updated: ${editedQuestion.title}`
       );
       setEditQuestions(false);
+      window.location.reload();
     } catch (e) {
       if (e instanceof AxiosError && e.response) {
         console.log(e.response.data.code);
@@ -34,7 +35,6 @@ const EditQuestionsTab: React.FC = () => {
       }
     }
   };
-
   const onDelete = async (questionToDelete: Question) => {
     console.log("Question to Delete: ", questionToDelete);
 
@@ -44,6 +44,7 @@ const EditQuestionsTab: React.FC = () => {
         `Question ${questionToDelete.id} deleted: ${questionToDelete.title}`
       );
       setEditQuestions(false);
+      window.location.reload();
     } catch (e) {
       if (e instanceof AxiosError && e.response) {
         console.log(e.response.data.code);