Merge pull request #111 from tobihy/staging

Fix GUI and refactor questionPanel
CS3219-AY2324S1 · Nov 13, 2023 · ce93235 · ce93235
2 parents 0fee27f + 107f7b7
commit ce93235
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 153 deletions.
diff --git a/frontend/components/CollabPage/CollabPage.tsx b/frontend/components/CollabPage/CollabPage.tsx
@@ -13,7 +13,6 @@ import {
     DialogContent,
     Stack,
     Grid,
-    Fab,
 } from "@mui/material";
 import CodeEditor from "./CodeEditor";
 import dynamic from "next/dynamic";
@@ -97,8 +96,8 @@ const CollabPage = () => {
     };
 
     const questionPanelProps = {
-        question_number: questionNumber + 1,
-        question: questions[questionNumber],
+        question_number: questionNumber,
+        question: questions,
     };
 
     // Called when Next question button is pressed by this user
@@ -285,18 +284,16 @@ const CollabPage = () => {
     }, []);
 
     return (
-        <div>
-            <Grid container={true} spacing={2} sx={{ marginTop: "5px" }}>
+        <div style={{ margin: "10px", maxHeight: "100vh" }}>
+            <Grid container spacing={2}>
                 <Grid item xs={6}>
-                    {questions[questionNumber] ? (
+                    <Box display="flex">
                         <QuestionPanel {...questionPanelProps} />
-                    ) : (
-                        <p>No more questions available.</p>
-                    )}
+                    </Box>
                 </Grid>
                 <Grid item xs={6}>
                     <Stack direction="column" spacing={1}>
-                        <Box display="flex" justifyContent="space-between">
+                        <Box justifyContent="space-between">
                             {!isEndingSession && (
                                 <CollabPageNavigation
                                     {...collabPageNavigationProps}

diff --git a/frontend/components/CollabPage/CollabPageQuestion/CollabPageNavigation.tsx b/frontend/components/CollabPage/CollabPageQuestion/CollabPageNavigation.tsx
@@ -51,7 +51,6 @@ function CollabPageNavigation({
         isLastQuestion: isLastQuestion,
     };
 
-
     const EndSessionHandshakeModalProps = {
         isEndSessionHandshakeOpen: isEndSessionHandshakeOpen,
         setIsEndSessionHandshakeOpen: setIsEndSessionHandshakeOpen,

diff --git a/frontend/components/CollabPage/CollabPageQuestion/QuestionPanel.tsx b/frontend/components/CollabPage/CollabPageQuestion/QuestionPanel.tsx
@@ -32,27 +32,42 @@ import { Card, CardContent, Typography } from "@mui/material";
 
 interface QuestionPanelProps {
     question_number: number;
-    question: Question;
+    question: Question[];
 }
 
 function QuestionPanel({ question_number, question }: QuestionPanelProps) {
-    return (
-        <Card sx={{ height: "100%", padding: 2 }}>
+    return question[question_number] ? (
+        <Card
+            sx={{
+                maxHeight: "85vh",
+                width: "100vh",
+                padding: 2,
+                overflowY: "auto",
+            }}
+        >
             <CardContent>
                 <Typography
                     variant="h5"
                     component="div"
                     sx={{ marginBottom: 2 }}
                 >
-                    Question {question_number}:{" "}
-                    {question ? question.title : "No title found"}
+                    Question {question_number + 1}:{" "}
+                    {question
+                        ? question[question_number].title
+                        : "No title found"}
                 </Typography>
                 {/* Use pre element for preserving white spaces and new lines */}
-                <pre style={{ whiteSpace: 'pre-wrap', overflowX: 'auto' }}>
-                    {question ? question.description : "No description found"}
+                <pre style={{ whiteSpace: "pre-wrap", overflowX: "auto" }}>
+                    {question
+                        ? question[question_number].description
+                        : "No description found"}
                 </pre>
             </CardContent>
         </Card>
+    ) : (
+        <Card sx={{ maxHeight: "100vh", padding: 2 }}>
+            <Typography>No more questions available.</Typography>
+        </Card>
     );
 }
 

diff --git a/frontend/components/CollabPage/RejectEndSessionSnackBar.tsx b/frontend/components/CollabPage/RejectEndSessionSnackBar.tsx
diff --git a/frontend/components/CollabPage/RejectQuestionSnackBar.tsx b/frontend/components/CollabPage/RejectQuestionSnackBar.tsx
diff --git a/frontend/components/QuestionsPage/QuestionsPage.tsx b/frontend/components/QuestionsPage/QuestionsPage.tsx
@@ -95,12 +95,12 @@ const QuestionPage = () => {
         }
         setOpenResetDialog(false);
         return response.status;
-    }
+    };
     const confirmDialogProps = {
         open: openResetDialog,
         setOpen: setOpenResetDialog,
         handleConfirm: setToDefaultQns,
-    }
+    };
 
     useEffect(() => {
         const fetchQuestions = async () => {
@@ -122,7 +122,7 @@ const QuestionPage = () => {
                     addQuestion={addQuestion}
                 />
             )}
-            <Box display="flex" padding={2}>
+            <Box display="flex" maxHeight="80vh" padding={2}>
                 <QuestionTable
                     questions={questions}
                     deleteQuestion={deleteQuestion}
@@ -163,7 +163,7 @@ const QuestionPage = () => {
                     >
                         <AddIcon />
                     </Fab>
-                    <ConfirmResetDialog {...confirmDialogProps}/>
+                    <ConfirmResetDialog {...confirmDialogProps} />
                 </>
             )}
         </main>