Implement Update functionalities

Author: tingkai-mai

frontend/src/api/leetcode-dashboard.tsx

@@ -1,7 +1,20 @@
-import { QuestionMinified } from "@/types/find-match";
+import {
+  QuestionMinified,
+  QuestionFull,
+  NewQuestionData,
+} from "@/types/find-match";
 
 const QUESTION_SERVICE = process.env.NEXT_PUBLIC_QUESTION_SERVICE;
 
+export const createSingleLeetcodeQuestion = async ({
+  title,
+  description,
+  category,
+  complexity,
+}: NewQuestionData) => {
+  const url = `${QUESTION_SERVICE}/create`;
+};
+
 export const getLeetcodeDashboardData = async (): Promise<
   QuestionMinified[]
 > => {
@@ -21,3 +34,50 @@ export const fetchSingleLeetcodeQuestion = async (
   // console.log(data);
   return data;
 };
+
+export const updateSingleLeetcodeQuestion = async ({
+  questionId,
+  title,
+  description,
+  category,
+  complexity,
+}: QuestionFull) => {
+  const url = `${QUESTION_SERVICE}/${questionId}/update`;
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      title: title,
+      description: description,
+      category: category,
+      complexity: complexity,
+    }),
+  });
+
+  if (!resp.ok) {
+    throw new Error("Failed to update the question");
+  }
+
+  return await resp.json();
+};
+
+export const deleteSingleLeetcodeQuestion = async (questionId: string) => {
+  const url = `${QUESTION_SERVICE}/${questionId}/delete`;
+  const resp = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      questionId: questionId,
+    }),
+  });
+
+  if (!resp.ok) {
+    throw new Error("Failed to update the question");
+  }
+
+  return await resp.json();
+};

frontend/src/app/(auth)/leetcode-dashboard/EditQuestionDialog.tsx

@@ -20,7 +20,10 @@ import { useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import { z } from "zod";
 import MoonLoader from "react-spinners/MoonLoader";
-import { fetchSingleLeetcodeQuestion } from "@/api/leetcode-dashboard";
+import {
+  fetchSingleLeetcodeQuestion,
+  updateSingleLeetcodeQuestion,
+} from "@/api/leetcode-dashboard";
 
 const QUESTION_SERVICE = process.env.NEXT_PUBLIC_QUESTION_SERVICE;
 
@@ -81,42 +84,36 @@ const EditQuestionDialog = ({
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     console.log(values);
-    // setIsSubmitting(true);
-    // const url = `${QUESTION_SERVICE}/create`;
-    // await fetch(url, {
-    //   method: "POST",
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   body: JSON.stringify({
-    //     title: values.questionTitle,
-    //     description: values.questionDescription,
-    //     category: values.questionTopics,
-    //     complexity: values.questionDifficulty,
-    //   }),
-    // })
-    //   .then((response) => {
-    //     if (response.ok) {
-    //       Swal.fire({
-    //         icon: "success",
-    //         title: "Question Added",
-    //         text: "Question has been added successfully.",
-    //       });
-    //     }
+    setIsSubmitting(true);
+    updateSingleLeetcodeQuestion({
+      title: values.questionTitle,
+      description: values.questionDescription,
+      category: values.questionTopics,
+      complexity: values.questionDifficulty,
+      questionId: questionId,
+    })
+      .then((response) => {
+        if (response.ok) {
+          Swal.fire({
+            icon: "success",
+            title: "Question Added",
+            text: "Question has been modified successfully.",
+          });
+        }
 
-    //     return response.json();
-    //   })
-    //   .catch((error) => {
-    //     Swal.fire({
-    //       icon: "error",
-    //       title: "Question Add Failed",
-    //       text: "Please try again later.",
-    //     });
-    //   })
-    //   .finally(() => {
-    //     setIsSubmitting(false);
-    //     setClose();
-    //   });
+        return response.json();
+      })
+      .catch((error) => {
+        Swal.fire({
+          icon: "error",
+          title: "Question Add Failed",
+          text: "Please try again later.",
+        });
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+        setClose();
+      });
   }
 
   return (
@@ -126,7 +123,7 @@ const EditQuestionDialog = ({
       </div>
       <Form {...form}>
         <form
-          onSubmit={form.handleSubmit(onSubmit)} // Ensure form.handleSubmit is used correctly
+          onSubmit={form.handleSubmit(onSubmit)}
           className="flex flex-col gap-4"
         >
           <FormField
@@ -158,7 +155,7 @@ const EditQuestionDialog = ({
                 <FormControl>
                   <select
                     className="w-full bg-primary-800 text-white p-2 rounded-md border border-white capitalize"
-                    {...field} // Connect field to the select element
+                    {...field}
                   >
                     <div>Select difficulty</div>
                     {Object.values(QuestionDifficulty).map((qd) => (

frontend/src/app/(auth)/leetcode-dashboard/LeetcodeDashboardTable.tsx

@@ -22,7 +22,10 @@ import {
 import { cn } from "@/lib/utils";
 import { HiOutlinePencil } from "react-icons/hi";
 import { FaRegTrashAlt } from "react-icons/fa";
-import { getLeetcodeDashboardData } from "@/api/leetcode-dashboard";
+import {
+  deleteSingleLeetcodeQuestion,
+  getLeetcodeDashboardData,
+} from "@/api/leetcode-dashboard";
 import { QuestionMinified } from "@/types/find-match";
 import MoonLoader from "react-spinners/MoonLoader";
 import EditQuestionDialog from "@/app/(auth)/leetcode-dashboard/EditQuestionDialog";
@@ -48,16 +51,21 @@ export function LeetcodeDashboardTable() {
     string | null
   >(null);
 
-  function handleDelete(questionid: string) {
+  function handleDelete(questionId: string) {
     Swal.fire({
       icon: "error",
       title: "Confirm delete?",
       text: "Are you sure you want to delete this question?",
       showCancelButton: true,
       confirmButtonText: "Confirm",
-    }).then((result) => {
+    }).then(async (result) => {
       if (result.isConfirmed) {
-        Swal.fire("Question deleted successfully!", "", "success");
+        const res = await deleteSingleLeetcodeQuestion(questionId);
+        if (res.ok) {
+          Swal.fire("Question deleted successfully!", "", "success");
+        } else {
+          Swal.fire("An error occured, please try again later");
+        }
       }
     });
   }

frontend/src/types/find-match.tsx

@@ -83,3 +83,14 @@ export interface QuestionMinified {
   title: string;
   complexity: string;
 }
+
+export interface NewQuestionData {
+  title: string;
+  description: string;
+  category: string[];
+  complexity: string;
+}
+
+export interface QuestionFull extends NewQuestionData {
+  questionId: string;
+}