Add delete button

alvinlim277 · alvinlim277 · commit da1dad7720a1 · 2024-09-28T19:52:58.000+08:00
Button has no functionality for now
diff --git a/peerprep/api/gateway.ts b/peerprep/api/gateway.ts
@@ -1,73 +1,83 @@
 import { Question, StatusBody, QuestionFullBody } from "./structs";
 
 const questions: { [key: string]: Question } = {
-  "0" : {
-    "id": 0,
-    "difficulty": 2,
-    "title": "Two Sum",
-    "description": "Given an array of integers, return indices of the two numbers such that they add up to a specific target.",
-    "test_cases": {
-	  	"[2, 7, 11, 15], 9" : "[0, 1]",
-  		"[3, 2, 4], 6"      : "[1, 2]",
-  		"[3, 3], 6"         : "[0, 1]"
-	  }
+  "0": {
+    id: 0,
+    difficulty: 2,
+    title: "Two Sum",
+    description:
+      "Given an array of integers, return indices of the two numbers such that they add up to a specific target.",
+    categories: ["Hash Table", "Array"],
+    test_cases: {
+      "[2, 7, 11, 15], 9": "[0, 1]",
+      "[3, 2, 4], 6": "[1, 2]",
+      "[3, 3], 6": "[0, 1]",
+    },
+  },
+  "1": {
+    id: 1,
+    difficulty: 1,
+    title: "Reverse Integer",
+    description: "Given a 32-bit signed integer, reverse digits of an integer.",
+    categories: ["Math"],
+    test_cases: {
+      "123": "321",
+      "1": "1",
+      "22": "22",
+    },
   },
-  "1" : {
-    "id": 1,
-    "difficulty": 1,
-    "title": "Reverse Integer",
-    "description": "Given a 32-bit signed integer, reverse digits of an integer.",
-    "test_cases": {
-		  "123" : "321",
-		  "1"   : "1",
-		  "22"  : "22"
-	  }
-  }
 };
 
-export async function fetchQuestion(questionId: string): Promise<Question|StatusBody> {
+export async function fetchQuestion(
+  questionId: string
+): Promise<Question | StatusBody> {
   // remove this when services are up
   if (process.env.DEV_ENV === "dev") {
     return questions[questionId] === undefined
-        ? {error: "Question not found", status: 404}
-        : questions[questionId];
+      ? { error: "Question not found", status: 404 }
+      : questions[questionId];
   }
   try {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions/solve/${questionId}`);
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions/solve/${questionId}`
+    );
     if (!response.ok) {
       return {
         ...(await response.json()),
-        status: response.status
+        status: response.status,
       };
     }
-    return await response.json() as Question;
+    return (await response.json()) as Question;
   } catch (err: any) {
-    return { error: err.message, status: 0};
+    return { error: err.message, status: 0 };
   }
 }
 
 export async function addQuestion(body: QuestionFullBody): Promise<StatusBody> {
   try {
     const response = await fetch(
-        `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`,
-        {
-          method: "POST",
-          body: JSON.stringify(body).replace(/(\"difficulty\":)\"([1-3])\"/, `$1$2`),
-          headers: {
-            "Content-type": "application/json; charset=UTF-8"
-          }
-        }
+      `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`,
+      {
+        method: "POST",
+        body: JSON.stringify(body).replace(
+          /(\"difficulty\":)\"([1-3])\"/,
+          `$1$2`
+        ),
+        headers: {
+          "Content-type": "application/json; charset=UTF-8",
+        },
+      }
     );
     if (response.ok) {
       return {
-        status: response.status
+        status: response.status,
       };
     }
     return {
       error: (await response.json())["Error adding question: "],
-      status: response.status
+      status: response.status,
     };
   } catch (err: any) {
-    return { error: err.message, status: 0};
+    return { error: err.message, status: 0 };
   }
 }
diff --git a/peerprep/app/questions/new/page.tsx b/peerprep/app/questions/new/page.tsx
@@ -1,112 +1,166 @@
-'use client';
-import { useState, ChangeEvent, MouseEvent, FormEvent } from 'react';
-import { QuestionBody, Difficulty, QuestionFullBody } from '@/api/structs';
-import { addQuestion } from '@/api/gateway';
+"use client";
+import { useState, ChangeEvent, MouseEvent, FormEvent } from "react";
+import { QuestionBody, Difficulty, QuestionFullBody } from "@/api/structs";
+import { addQuestion } from "@/api/gateway";
 
-type Props = {}
+type Props = {};
 
 interface Mapping {
-  key: string,
-  value: string
+  key: string;
+  value: string;
 }
 
 function NewQuestion({}: Props) {
-  const [testCases, setTestCases] = useState<Mapping[]>([{
-    key: "", value: ""
-  }]);
+  const [testCases, setTestCases] = useState<Mapping[]>([
+    {
+      key: "",
+      value: "",
+    },
+  ]);
   const [formData, setFormData] = useState<QuestionBody>({
     title: "",
     difficulty: Difficulty.Easy,
     description: "",
+    categories: [],
   });
 
-  const handleTextInput = (e: ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) => setFormData({
-    ...formData,
-    [e.target.name]: e.target.value
-  });
+  const handleTextInput = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) =>
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
 
-  const handleTestCaseInput = (e: ChangeEvent<HTMLInputElement>, idx: number) => {
+  const handleTestCaseInput = (
+    e: ChangeEvent<HTMLInputElement>,
+    idx: number
+  ) => {
     const values = [...testCases];
     values[idx] = {
       ...values[idx],
-      [e.target.name]: e.target.value
+      [e.target.name]: e.target.value,
     };
-    setTestCases(values); 
-  }
+    setTestCases(values);
+  };
 
   const handleAddField = (e: MouseEvent<HTMLElement>) =>
-    setTestCases([...testCases, { key: "", value: ""}]);
+    setTestCases([...testCases, { key: "", value: "" }]);
 
   const handleDeleteField = (e: MouseEvent<HTMLElement>, idx: number) => {
     const values = [...testCases];
     values.splice(idx, 1);
     setTestCases(values);
-  }
-  
+  };
+
   const handleSubmission = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const question: QuestionFullBody = {
       ...formData,
-      test_cases: testCases.map((elem: Mapping) => ({
-        [elem.key]: elem.value
-      })).reduce((res, item) => ({...res, ...item}), {})
-    }
+      test_cases: testCases
+        .map((elem: Mapping) => ({
+          [elem.key]: elem.value,
+        }))
+        .reduce((res, item) => ({ ...res, ...item }), {}),
+    };
     const status = await addQuestion(question);
     if (status.error) {
       console.log("Failed to add question.");
       console.log(`Code ${status.status}:  ${status.error}`);
       return;
     }
     console.log(`Successfully added the question.`);
-  }
+  };
 
   return (
     <div>
-      <form style={{color: "black", padding: "5px"}} onSubmit={handleSubmission}>
-        <input type="text" name="title" value={formData.title} onChange={handleTextInput}/><br/>
-        <input type="radio" id="easy" name="difficulty" value={1} onChange={handleTextInput} />
-        <label htmlFor="easy">Easy</label><br/>
-        <input type="radio" id="med" name="difficulty" value={2} onChange={handleTextInput} />
-        <label htmlFor="med">Medium</label><br/>
-        <input type="radio" id="hard" name="difficulty" value={3} onChange={handleTextInput} />
-        <label htmlFor="hard">Hard</label><br/>
-        <textarea name="description" value={formData.description} onChange={handleTextInput}/><br/>
+      <form
+        style={{ color: "black", padding: "5px" }}
+        onSubmit={handleSubmission}
+      >
+        <input
+          type="text"
+          name="title"
+          value={formData.title}
+          onChange={handleTextInput}
+        />
+        <br />
+        <input
+          type="radio"
+          id="easy"
+          name="difficulty"
+          value={1}
+          onChange={handleTextInput}
+        />
+        <label htmlFor="easy">Easy</label>
+        <br />
+        <input
+          type="radio"
+          id="med"
+          name="difficulty"
+          value={2}
+          onChange={handleTextInput}
+        />
+        <label htmlFor="med">Medium</label>
+        <br />
+        <input
+          type="radio"
+          id="hard"
+          name="difficulty"
+          value={3}
+          onChange={handleTextInput}
+        />
+        <label htmlFor="hard">Hard</label>
+        <br />
+        <textarea
+          name="description"
+          value={formData.description}
+          onChange={handleTextInput}
+        />
+        <br />
         {testCases.map((elem, idx) => (
           <>
             <input
               name="key"
               type="text"
               id={`key_${idx.toLocaleString()}`}
               value={elem.key}
-              onChange={e => handleTestCaseInput(e, idx)} />
+              onChange={(e) => handleTestCaseInput(e, idx)}
+            />
             <input
               name="value"
               type="text"
               id={`val_${idx.toLocaleString()}`}
               value={elem.value}
-              onChange={e => handleTestCaseInput(e, idx)} />
+              onChange={(e) => handleTestCaseInput(e, idx)}
+            />
             <input
               type="button"
               name="del_entry"
               value="Delete..."
-              onClick={e => handleDeleteField(e, idx)}
-              style={{ backgroundColor: "white"}} />
-            <br/>
+              onClick={(e) => handleDeleteField(e, idx)}
+              style={{ backgroundColor: "white" }}
+            />
+            <br />
           </>
         ))}
         <input
           type="button"
           name="add_entry"
           value="Add..."
           onClick={handleAddField}
-          style={{ backgroundColor: "white"}} />
+          style={{ backgroundColor: "white" }}
+        />
         <button
           type="submit"
           name="submit"
-          style={{ backgroundColor: "white"}}>Submit</button>
+          style={{ backgroundColor: "white" }}
+        >
+          Submit
+        </button>
       </form>
     </div>
-  )
+  );
 }
 
-export default NewQuestion;
+export default NewQuestion;
diff --git a/peerprep/components/questionpage/QuestionCard.tsx b/peerprep/components/questionpage/QuestionCard.tsx
