Merge pull request #11 from CS3219-AY2425S1/jiale/homepage-fix

Jiale/homepage fix
CS3219-AY2425S1 · Oct 1, 2024 · 9ec7041 · 9ec7041
2 parents 7a07003 + 714fac0
commit 9ec7041
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 84 deletions.
diff --git a/frontend/src/components/Footer/Footer.scss b/frontend/src/components/Footer/Footer.scss
@@ -27,7 +27,11 @@
   }
 
   &-github {
-    background: #caff33 !important;
+    justify-self: start;
+
+    &-icon {
+      background: #caff33 !important;
+    }
   }
 
   &-trademark {

diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
@@ -22,8 +22,8 @@ const Footer = (): ReactElement => {
         <Typography>LuckyJinx</Typography>
       </Container>
       <Box className="Footer-bottom">
-        <a href={gitHubUrl} target="_blank" rel="noreferrer noopener">
-          <IconButton className="Footer-github">
+        <a href={gitHubUrl} className="Footer-github" target="_blank" rel="noreferrer noopener">
+          <IconButton className="Footer-github-icon">
             <GitHubIcon />
           </IconButton>
         </a>

diff --git a/frontend/src/components/QuestionList/QuestionList.module.scss b/frontend/src/components/QuestionList/QuestionList.module.scss
@@ -146,6 +146,14 @@ h1 {
   text-decoration: underline !important;
 }
 
+.questiontablebody {
+  padding-top: 10px;
+  min-height: 20vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 @media (max-width: 768px) {
   .table th,
   .table td {

diff --git a/frontend/src/components/QuestionList/QuestionList.tsx b/frontend/src/components/QuestionList/QuestionList.tsx
@@ -84,18 +84,6 @@ const QuestionList = (): ReactElement => {
     fetchQuestions();
   }, []);
 
-  if (loading) {
-    return <Typography variant="h6">Loading questions...</Typography>;
-  }
-
-  if (error) {
-    return (
-      <Typography variant="h6" color="error">
-        {error}
-      </Typography>
-    );
-  }
-
   const handleSort = (key: keyof Question) => {
     const order = sortKey === key && sortOrder === "asc" ? "desc" : "asc";
     setSortKey(key);
@@ -153,78 +141,91 @@ const QuestionList = (): ReactElement => {
 
   return (
     <div className={styles.container}>
-      <Typography variant="h4" align="center" gutterBottom>
+      <Typography variant="h5" gutterBottom>
         Question Repository
       </Typography>
-      <table className={styles.table}>
-        <thead>
-          <tr>
-            <th
-              onClick={() => handleSort("questionId")}
-              className={`${styles.clickable} ${sortKey === "questionId" ? styles[sortOrder] : ""}`}
-            >
-              ID
-            </th>
-            <th
-              onClick={() => handleSort("title")}
-              className={`${styles.clickable} ${sortKey === "title" ? styles[sortOrder] : ""}`}
+      <div className={styles.questiontablebody}>
+        {loading ? (
+          <Typography align="center">Loading questions...</Typography>
+        ) : error ? (
+          <Typography align="center" color="error">
+            {error}
+          </Typography>
+        ) : (
+          <div>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th
+                    onClick={() => handleSort("questionId")}
+                    className={`${styles.clickable} ${sortKey === "questionId" ? styles[sortOrder] : ""}`}
+                  >
+                    ID
+                  </th>
+                  <th
+                    onClick={() => handleSort("title")}
+                    className={`${styles.clickable} ${sortKey === "title" ? styles[sortOrder] : ""}`}
+                  >
+                    Title
+                  </th>
+                  <th>Categories</th>
+                  <th
+                    onClick={() => handleSort("complexity")}
+                    className={`${styles.clickable} ${sortKey === "complexity" ? styles[sortOrder] : ""}`}
+                  >
+                    Complexity
+                  </th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {questions.map((question) => (
+                  <tr key={question.questionId}>
+                    <td>{question.questionId}</td>
+                    <td>
+                      <Button className={styles.questiontitle} onClick={showQuestionDetails(question)}>
+                        {question.title}
+                      </Button>
+                      <a href={question.link} target="_blank" rel="noreferrer">
+                        <IconButton>
+                          <OpenInNew className={styles.questionlinkicon} color="primary" />
+                        </IconButton>
+                      </a>
+                    </td>
+                    <td>
+                      <div className={styles.tags}>
+                        {question.categories.map((tag, index) => (
+                          <span key={index} className={styles.tag}>
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    </td>
+                    <td className={styles.complexity}>{question.complexity}</td>
+                    <td className={styles.actions}>
+                      <IconButton onClick={() => openQuestionDialog(question)}>
+                        <EditNote className={styles.questionediticon} />
+                      </IconButton>
+                      <IconButton className={styles.questiondeleteicon} onClick={handleDelete(question)}>
+                        <DeleteForever />
+                      </IconButton>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            <Button
+              className={styles.questionaddicon}
+              color="primary"
+              variant="contained"
+              onClick={() => openQuestionDialog(null)}
             >
-              Title
-            </th>
-            <th>Categories</th>
-            <th
-              onClick={() => handleSort("complexity")}
-              className={`${styles.clickable} ${sortKey === "complexity" ? styles[sortOrder] : ""}`}
-            >
-              Complexity
-            </th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {questions.map((question) => (
-            <tr key={question.questionId}>
-              <td>{question.questionId}</td>
-              <td>
-                <Button className={styles.questiontitle} onClick={showQuestionDetails(question)}>
-                  {question.title}
-                </Button>
-                <a href={question.link} target="_blank" rel="noreferrer">
-                  <IconButton>
-                    <OpenInNew className={styles.questionlinkicon} color="primary" />
-                  </IconButton>
-                </a>
-              </td>
-              <td>
-                <div className={styles.tags}>
-                  {question.categories.map((tag, index) => (
-                    <span key={index} className={styles.tag}>
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              </td>
-              <td className={styles.complexity}>{question.complexity}</td>
-              <td className={styles.actions}>
-                <IconButton onClick={() => openQuestionDialog(question)}>
-                  <EditNote className={styles.questionediticon} />
-                </IconButton>
-                <IconButton className={styles.questiondeleteicon} onClick={handleDelete(question)}>
-                  <DeleteForever />
-                </IconButton>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <Button
-        className={styles.questionaddicon}
-        color="primary"
-        variant="contained"
-        onClick={() => openQuestionDialog(null)}
-      >
-        Add question
-      </Button>
+              Add question
+            </Button>
+          </div>
+        )}
+      </div>
+
       <QuestionDialog
         isAddNew={isAddNew}
         isOpen={isQuestionDialogOpen}

diff --git a/frontend/src/pages/Home/Home.scss b/frontend/src/pages/Home/Home.scss
@@ -1,5 +1,6 @@
 .Home {
   background: var(--Grey-10, #1a1a1a);
+  min-height: 100vh;
   padding: 40px 80px;
   display: flex;
   flex-direction: column;