Merge pull request #13 from CS3219-AY2425S1/enhance-indiv-qn

Implemented proper AddQn Page, add Delete button on individual question page

Author: alvinlim277

peerprep/app/questions/[question]/page.tsx

@@ -1,28 +1,28 @@
-import { fetchQuestion } from '@/api/gateway';
+import { fetchQuestion } from "@/api/gateway";
 import { Question as QnType, StatusBody, isError } from "@/api/structs";
-import styles from '@/style/question.module.css';
-import ErrorBlock from '@/components/shared/ErrorBlock';
-import React from 'react'
-import QuestionBlock from './question';
+import styles from "@/style/question.module.css";
+import ErrorBlock from "@/components/shared/ErrorBlock";
+import React from "react";
+import QuestionBlock from "./question";
 
 type Props = {
   params: {
-    question: string
-  }
-}
+    question: string;
+  };
+};
 
 async function Question({ params }: Props) {
   const question = await fetchQuestion(params.question);
 
   return (
     <div className={styles.wrapper}>
-      {
-        isError(question)
-        ? <ErrorBlock err={question as StatusBody}/>
-        : <QuestionBlock question={question as QnType}/>
-      }
+      {isError(question) ? (
+        <ErrorBlock err={question as StatusBody} />
+      ) : (
+        <QuestionBlock question={question as QnType} />
+      )}
     </div>
-  )
+  );
 }
 
-export default Question;
+export default Question;

peerprep/app/questions/[question]/question.tsx

@@ -1,55 +1,114 @@
-import { Question, StatusBody, Difficulty } from "@/api/structs";
-import styles from '@/style/question.module.css';
+"use client";
+import { deleteQuestion } from "@/api/gateway";
+import { Question, Difficulty } from "@/api/structs";
+import Chip from "@/components/shared/Chip";
+import PeerprepButton from "@/components/shared/PeerprepButton";
+import styles from "@/style/question.module.css";
+import { useRouter } from "next/navigation";
 
 interface Props {
-  question : Question;
+  question: Question;
 }
 
-const difficultyColor = (diff: Difficulty) => {
-  return (
-    diff === Difficulty.Easy ? <p className={`${styles.title} ${styles.easy}`}>Easy</p>
-    : diff === Difficulty.Medium ? <p className={`${styles.title} ${styles.med}`}>Med</p>
-    : <p className={`${styles.title} ${styles.hard}`}>Hard</p>
+interface DifficultyChipProps {
+  diff: Difficulty;
+}
+
+function DifficultyChip({ diff }: DifficultyChipProps) {
+  return diff === Difficulty.Easy ? (
+    <Chip className={styles.easy}>Easy</Chip>
+  ) : diff === Difficulty.Medium ? (
+    <Chip className={styles.med}>Med</Chip>
+  ) : (
+    <Chip className={styles.hard}>Hard</Chip>
   );
 }
 
 function QuestionBlock({ question }: Props) {
+  const router = useRouter();
   const keys = question.test_cases ? Object.keys(question.test_cases) : [];
 
   const createRow = (key: string) => (
     <tr key={key}>
       <td className={`${styles.table} ${styles.cell}`}>{key}</td>
-      <td className={`${styles.table} ${styles.cell}`}>{question.test_cases[key]}</td>
+      <td className={`${styles.table} ${styles.cell}`}>
+        {question.test_cases[key]}
+      </td>
     </tr>
   );
 
+  const handleDelete = async () => {
+    if (
+      confirm(
+        `Are you sure you want to delete ${question.title}? (ID: ${question.id}) `
+      )
+    ) {
+      const status = await deleteQuestion(question);
+      if (status.error) {
+        alert(
+          `Failed to delete question. Code ${status.status}:  ${status.error}`
+        );
+        return;
+      }
+      console.log(`Successfully deleted the question.`);
+      router.push("/questions");
+    } else {
+      console.log("Deletion cancelled.");
+    }
+  };
+
   return (
     <>
       <div className={styles.qn_container}>
         <div className={styles.title_wrapper}>
-          <h1 className={styles.title}>Q{question.id}: {question.title}</h1>
-          {difficultyColor(question.difficulty)}
+          <div className={styles.label_wrapper}>
+            <h1 className={styles.title}>
+              Q{question.id}: {question.title}
+            </h1>
+            <DifficultyChip diff={question.difficulty} />
+          </div>
+          <PeerprepButton
+            className={` ${styles.button}`}
+            onClick={handleDelete}
+          >
+            Delete
+          </PeerprepButton>
+        </div>
+        <div className={styles.label_wrapper}>
+          <p>Categories: </p>
+          {question.categories.length == 0 ? (
+            <p>No categories listed.</p>
+          ) : (
+            question.categories.map((elem, idx) => <p key={idx}>{elem}</p>)
+          )}
         </div>
-        <br/>
         <p>{question.description}</p>
-        <br/>
+        <br />
         {question.test_cases && (
           <table className={styles.table}>
             <tbody>
               <tr>
-                <th className={`${styles.table} ${styles.header} ${styles.input}`}>Input</th>
-                <th className={`${styles.table} ${styles.header} ${styles.output}`}>Expected Output</th>
+                <th
+                  className={`${styles.table} ${styles.header} ${styles.input}`}
+                >
+                  Input
+                </th>
+                <th
+                  className={`${styles.table} ${styles.header} ${styles.output}`}
+                >
+                  Expected Output
+                </th>
               </tr>
               {keys.map(createRow)}
             </tbody>
           </table>
         )}
       </div>
       <form className={styles.editor_container}>
-        <textarea className={styles.code_editor}/>
+        <textarea className={styles.code_editor} />
       </form>
     </>
   );
 }
 
-export default QuestionBlock;
+export default QuestionBlock;