Add delete button to QuestionCard

Add delete/get all questions to gateway
TODO: Refresh page on delete (might need to refactor QuestionList)
Partially resolves #8

Author: alvinlim277

peerprep/api/gateway.ts

@@ -81,3 +81,45 @@ export async function addQuestion(body: QuestionFullBody): Promise<StatusBody> {
     return { error: err.message, status: 0 };
   }
 }
+
+export async function deleteQuestion(question: Question): Promise<StatusBody> {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions/delete/${question.id}`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-type": "application/json; charset=UTF-8",
+        },
+      }
+    );
+    if (response.ok) {
+      return {
+        status: response.status,
+      };
+    }
+    return {
+      error: (await response.json())["Error deleting question: "],
+      status: response.status,
+    };
+  } catch (err: any) {
+    return { error: err.message, status: 0 };
+  }
+}
+
+export async function getAllQuestions(): Promise<Question[] | StatusBody> {
+  try {
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`
+    );
+    if (!response.ok) {
+      return {
+        error: await response.text(),
+        status: response.status,
+      };
+    }
+    return (await response.json()) as Question[];
+  } catch (err: any) {
+    return { error: err.message, status: 400 };
+  }
+}

peerprep/api/structs.ts

@@ -29,6 +29,8 @@ export interface StatusBody {
   error?: string;
 }
 
-export function isError(obj: Question | StatusBody): obj is StatusBody {
+export function isError(
+  obj: Question[] | Question | StatusBody
+): obj is StatusBody {
   return (obj as StatusBody).status !== undefined;
 }

peerprep/components/questionpage/QuestionCard.tsx

@@ -1,16 +1,35 @@
 "use client";
+import { deleteQuestion } from "@/api/gateway";
 import React from "react";
 import { Question, Difficulty } from "@/api/structs";
 import PeerprepButton from "../shared/PeerprepButton";
 import { useRouter } from "next/navigation";
 import styles from "@/style/questionCard.module.css";
+import QuestionList from "./QuestionList";
 
 type QuestionCardProps = {
   question: Question;
 };
 
 const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const router = useRouter();
+  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) {
+        console.log("Failed to delete question.");
+        console.log(`Code ${status.status}:  ${status.error}`);
+        return;
+      }
+      console.log(`Successfully deleted the question.`);
+    } else {
+      console.log("Deletion cancelled.");
+    }
+  };
 
   const getDifficultyColor = (difficulty: Difficulty) => {
     switch (difficulty) {
@@ -55,12 +74,7 @@ const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
         <PeerprepButton onClick={() => router.push(`questions/${question.id}`)}>
           View
         </PeerprepButton>
-        <PeerprepButton
-          // no functionality here yet
-          onClick={() => console.log(`Deleting question ${question.id}`)}
-        >
-          Delete
-        </PeerprepButton>
+        <PeerprepButton onClick={handleDelete}>Delete</PeerprepButton>
       </div>
     </div>
   );

peerprep/components/questionpage/QuestionList.tsx

@@ -1,7 +1,8 @@
 "use client";
+import { getAllQuestions } from "@/api/gateway";
 import React, { useEffect, useState } from "react";
 import QuestionCard from "./QuestionCard";
-import { Question, StatusBody, Difficulty } from "@/api/structs";
+import { Question, StatusBody, Difficulty, isError } from "@/api/structs";
 import PeerprepDropdown from "../shared/PeerprepDropdown";
 import PeerprepSearchBar from "../shared/PeerprepSearchBar";
 
@@ -12,29 +13,26 @@ const QuestionList: React.FC = () => {
     Difficulty[0]
   );
   const [categoryFilter, setCategoryFilter] = useState<string>("all");
-  // will prolly have to search by name later
   const [searchFilter, setSearchFilter] = useState<string>("");
   const [categories, setCategories] = useState<string[]>(["all"]);
 
   useEffect(() => {
     const fetchQuestions = async () => {
-      try {
-        const response = await fetch(
-          `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`
-        );
-        const data: Question[] = await response.json();
-        setQuestions(data);
-
-        // get all present categories in all qns
-        const uniqueCategories = Array.from(
-          new Set(data.flatMap((question) => question.categories))
-        );
-        setCategories(["all", ...uniqueCategories]);
-      } catch (error) {
-        console.error("Error fetching questions:", error);
-      } finally {
-        setLoading(false);
+      const data = await getAllQuestions();
+      // uh
+      if (isError(data)) {
+        // should also reflect the error
+        return;
       }
+
+      setLoading(false);
+      setQuestions(data);
+
+      // get all present categories in all qns
+      const uniqueCategories = Array.from(
+        new Set(data.flatMap((question) => question.categories))
+      );
+      setCategories(["all", ...uniqueCategories]);
     };
 
     fetchQuestions();