modal for question table and auto refresh when edit question

charltonator · charltonator · commit 5014312cf1e2 · 2023-11-09T16:07:21.000+08:00
diff --git a/frontend/src/components/ProblemSolverLeft.tsx b/frontend/src/components/ProblemSolverLeft.tsx
@@ -40,7 +40,7 @@ const ProblemSolverLeft = () => {
 }
 
   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>
diff --git a/frontend/src/components/ProblemSolverRight.tsx b/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>
   );
 }
diff --git a/frontend/src/components/Questions/AddQuestionTab.tsx b/frontend/src/components/Questions/AddQuestionTab.tsx
@@ -1,58 +1,61 @@
-import React from "react";
+import React, { useState } from "react";
 import QuestionForm from "./QuestionForm";
-import {Box, Button} from "@mui/material";
+import { Box, Button } from "@mui/material";
 import Question from "./Question";
 import Typography from "@mui/material/Typography";
-import {addQuestion} from "../../api/questions/data";
-import {AxiosError} from "axios";
-
+import { addQuestion } from "../../api/questions/data";
+import { AxiosError } from "axios";
 
 const AddQuestionTab: React.FC = () => {
-    const [addQuestions, setAddQuestions] = React.useState(false);
-
-    const handleAddQuestionClick = () => {
-        setAddQuestions(true);
-    }
-    const onSubmit = async (question: Question) => {
-        console.log(question);
-        let questionToAdd = new Question(question);
-
-        try {
-            const questionAdded = await addQuestion(questionToAdd);
-            console.log(questionAdded);
-            setAddQuestions(false);
-        } catch (e) {
-            if (e instanceof AxiosError && e.response) {
-                console.log(e.response.data.code);
-            } else if (e instanceof Error) {
-                console.log(e.message);
-            }
-        }
-    };
-
-    const onCancel = () => {
-        setAddQuestions(false);
+  const [addQuestions, setAddQuestions] = useState(false);
+  
+
+  const handleAddQuestionClick = () => {
+    setAddQuestions(true);
+  };
+
+  const onSubmit = async (question: Question) => {
+    console.log(question);
+    let questionToAdd = new Question(question);
+
+    try {
+      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);
+      } else if (e instanceof Error) {
+        console.log(e.message);
+      }
     }
-
-
-    return (
-        <React.Fragment>
-            <Box component="span" padding={2} width='80%'>
-                {addQuestions ?
-                    <React.Fragment>
-                        <Typography variant="h5" gutterBottom>
-                            Add Question
-                        </Typography>
-                        <QuestionForm onSubmit={onSubmit} onCancel={onCancel} />
-                    </React.Fragment>
-                    :
-                    <Button variant="contained" onClick={handleAddQuestionClick}>
-                        Add Question
-                    </Button>
-                }
-            </Box>
-        </React.Fragment>
-            );
-}
-
-export default AddQuestionTab;
+  };
+
+  const onCancel = () => {
+    setAddQuestions(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Box component="span" padding={2} width="80%">
+        {addQuestions ? (
+          <React.Fragment>
+            <Typography variant="h5" gutterBottom>
+              Add Question
+            </Typography>
+            <QuestionForm onSubmit={onSubmit} onCancel={onCancel} />
+          </React.Fragment>
+        ) : (
+          <Button variant="contained" onClick={handleAddQuestionClick}>
+            Add Question
+          </Button>
+        )}
+      </Box>
+    </React.Fragment>
+  );
+};
+
+export default AddQuestionTab;
diff --git a/frontend/src/components/Questions/EditQuestionsTab.tsx b/frontend/src/components/Questions/EditQuestionsTab.tsx
@@ -25,6 +25,7 @@ const EditQuestionsTab: React.FC = () => {
             await updateQuestion(editedQuestion.id, editedQuestion);
             console.log(`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);
@@ -41,6 +42,7 @@ const EditQuestionsTab: React.FC = () => {
             await deleteQuestion(questionToDelete.id);
             console.log(`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);
diff --git a/frontend/src/components/Questions/QuestionsTable.tsx b/frontend/src/components/Questions/QuestionsTable.tsx
@@ -1,5 +1,3 @@
-// InterviewQuestionsTable.tsx
-
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import {
@@ -14,6 +12,12 @@ import {
   MenuItem,
   TablePagination,
   SelectChangeEvent,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Typography,
 } from "@mui/material";
 import { useData } from "../../data/data.context";
 
@@ -37,32 +41,36 @@ const InterviewQuestionsTable: React.FC = () => {
   const [itemsPerPage, setItemsPerPage] = useState<number>(
     ITEMS_PER_PAGE_OPTIONS[0]
   );
+  const [selectedQuestion, setSelectedQuestion] = useState<Question | null>(
+    null
+  );
+  const [isQuestionModalOpen, setIsQuestionModalOpen] = useState(false);
   const { questions, getQuestions } = useData();
 
   useEffect(() => {
     async function getInterviewQuestions() {
       getQuestions();
     }
     getInterviewQuestions();
-    // console.log("here");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     setQuestions(questions);
-    //console.log(questionsData);
   }, [questions]);
 
   const handleCategoriesChange = (event: SelectChangeEvent<unknown>) => {
     setSelectedCategories(event.target.value as string[]);
-};
+  };
 
-const uniqueCategories = Array.from(new Set(questionsData.flatMap(question => question.categories)));
+  const uniqueCategories = Array.from(
+    new Set(questionsData.flatMap((question) => question.categories))
+  );
 
-const filteredQuestions = questionsData.filter(question => 
-    selectedCategories.length === 0 || 
-    selectedCategories.some(cat => question.categories.includes(cat))
-);
+  const filteredQuestions = questionsData.filter((question) =>
+    selectedCategories.length === 0
+      ? true
+      : selectedCategories.some((cat) => question.categories.includes(cat))
+  );
 
   const handlePageChange = (event: unknown, newPage: number) => {
     setCurrentPage(newPage);
@@ -80,6 +88,16 @@ const filteredQuestions = questionsData.filter(question =>
     indexOfLastQuestion
   );
 
+  const openQuestionModal = (question: Question) => {
+    setSelectedQuestion(question);
+    setIsQuestionModalOpen(true);
+  };
+
+  const closeQuestionModal = () => {
+    setSelectedQuestion(null);
+    setIsQuestionModalOpen(false);
+  };
+
   return (
     <>
       {/* Category Filter */}
@@ -107,32 +125,29 @@ const filteredQuestions = questionsData.filter(question =>
                 <TableCell>Title</TableCell>
                 <TableCell>Tags</TableCell>
                 <TableCell>Categories</TableCell>
-                {/* <TableCell>Constraints</TableCell> */}
                 <TableCell>Difficulty</TableCell>
-                {/* <TableCell>Description</TableCell> */}
               </TableRow>
             </TableHead>
             <TableBody>
               {currentQuestions.map((question: Question, index: number) => (
                 <TableRow key={index}>
                   <TableCell>
-                    <Link
-                      to={`/question/${question.id}`}
+                    <Button
+                      onClick={() => openQuestionModal(question)}
                       style={{
                         textDecoration: "none",
                         color: "inherit",
-                        fontSize: "16px", // Adjust to your preference
+                        fontSize: "16px",
                         fontWeight: "bold",
+                        textTransform: "initial"
                       }}
                     >
                       {question.title}
-                    </Link>
+                    </Button>
                   </TableCell>
                   <TableCell>{question.tags.join(", ")}</TableCell>
                   <TableCell>{question.categories.join(", ")}</TableCell>
-                  {/* <TableCell>{question.constraints.join(', ')}</TableCell> */}
                   <TableCell>{question.difficulty}</TableCell>
-                  {/* <TableCell>{question.description}</TableCell> */}
                 </TableRow>
               ))}
             </TableBody>
@@ -161,6 +176,42 @@ const filteredQuestions = questionsData.filter(question =>
           onPageChange={handlePageChange}
         />
       </div>
+      <Dialog
+        open={isQuestionModalOpen}
+        onClose={closeQuestionModal}
+        fullWidth
+        maxWidth="md"
+      >
+        {selectedQuestion && (
+          <>
+            <DialogTitle>{selectedQuestion.title}</DialogTitle>
+            <DialogContent >
+              <Typography variant="body2" style={{padding: "5px"}}>
+              <b>Categories:</b> {selectedQuestion.categories.join(", ")}
+              </Typography>
+              <Typography variant="body2" style={{padding: "5px"}}>
+                <b>Difficulty:</b> {selectedQuestion.difficulty}
+              </Typography>
+              <Typography variant="body2" style={{padding: "5px"}}>
+                <b>Description</b>: {selectedQuestion.description}
+              </Typography>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={closeQuestionModal} color="primary">
+                Close
+              </Button>
+              <Link
+                to={`/question/${selectedQuestion.id}`}
+                style={{ textDecoration: "none" }}
+              >
+                <Button color="primary" variant="contained">
+                  Solve Question
+                </Button>
+              </Link>
+            </DialogActions>
+          </>
+        )}
+      </Dialog>
     </>
   );
 };
diff --git a/frontend/src/pages/App.tsx b/frontend/src/pages/App.tsx
diff --git a/frontend/src/pages/ProblemSolver.tsx b/frontend/src/pages/ProblemSolver.tsx

Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ const ProblemSolverLeft = () => {`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`return (`
`43`		`- <Paper elevation={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', padding: 2 }}>`
	`43`	`+ <Paper elevation={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', padding: 2}}>`
`44`	`44`	`<Typography variant="h4" gutterBottom sx={{ fontSize: '24px' }}>`
`45`	`45`	`{question.title}`
`46`	`46`	`</Typography>`