Fix modal background issue

Author: tingkai-mai

frontend/package-lock.json

@@ -32,6 +32,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
+    "react-modal": "^3.16.1",
     "react-pro-sidebar": "^1.1.0",
     "react-spinners": "^0.14.1",
     "sweetalert2": "^11.14.1",
@@ -50,4 +51,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}

frontend/package.json

@@ -2,11 +2,6 @@
 
 import { topicsList } from "@/app/(auth)/match/page";
 import { Button } from "@/components/ui/button";
-import {
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -26,7 +21,11 @@ import { z } from "zod";
 
 const QUESTION_SERVICE = process.env.NEXT_PUBLIC_QUESTION_SERVICE;
 
-const AddQuestionDialog = () => {
+interface AddQuestionDialogProp {
+  setClose: () => void;
+}
+
+const AddQuestionDialog = ({ setClose }: AddQuestionDialogProp) => {
   const formSchema = z.object({
     questionTitle: z.string().min(2, {
       message: "Title must be at least 2 characters.",
@@ -66,30 +65,33 @@ const AddQuestionDialog = () => {
         category: values.questionTopics,
         complexity: values.questionDifficulty,
       }),
-    }).then((response) => {
-      if (response.ok) {
+    })
+      .then((response) => {
+        if (response.ok) {
+          Swal.fire({
+            icon: "success",
+            title: "Question Added",
+            text: "Question has been added successfully.",
+          });
+        }
+
+        return response.json();
+      })
+      .catch((error) => {
         Swal.fire({
-          icon: "success",
-          title: "Question Added",
-          text: "Question has been added successfully.",
+          icon: "error",
+          title: "Question Add Failed",
+          text: "Please try again later.",
         });
-      }
-
-      return response.json();
-    }).catch((error) => {
-      Swal.fire({
-        icon: "error",
-        title: "Question Add Failed",
-        text: "Please try again later.",
       })
-    });
+      .finally(() => setClose());
   }
 
   return (
-    <DialogContent className="bg-primary-700 h-80%">
-      <DialogHeader className="text-[32px] font-semibold text-yellow-500">
+    <div className="bg-primary-700 p-10 w-[40vw] h-[80vh] rounded-lg">
+      <div className="text-[32px] font-semibold text-yellow-500">
         Add Question
-      </DialogHeader>
+      </div>
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)} // Ensure form.handleSubmit is used correctly
@@ -177,12 +179,10 @@ const AddQuestionDialog = () => {
               </FormItem>
             )}
           />
-          <DialogClose>
-            <Button type="submit">Submit</Button>
-          </DialogClose>
+          <Button type="submit">Submit</Button>
         </form>
       </Form>
-    </DialogContent>
+    </div>
   );
 };
 

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

@@ -85,7 +85,7 @@ const EditQuestionDialog = ({ id }: { id: string }) => {
   return (
     <DialogContent className="bg-primary-700 h-80%">
       <DialogHeader className="text-[32px] font-semibold text-yellow-500">
-        Add Question
+        Edit Question
       </DialogHeader>
       <Form {...form}>
         <form

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

@@ -25,6 +25,8 @@ import { FaRegTrashAlt } from "react-icons/fa";
 import { getLeetcodeDashboardData } from "@/api/leetcode-dashboard";
 import { QuestionMinified } from "@/types/find-match";
 import MoonLoader from "react-spinners/MoonLoader";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import EditQuestionDialog from "@/app/(auth)/leetcode-dashboard/EditQuestionDialog";
 
 const Cell = ({
   className,
@@ -66,12 +68,15 @@ export const columns: ColumnDef<QuestionMinified>[] = [
   {
     accessorKey: "actions",
     header: () => <Cell>Actions</Cell>,
-    cell: ({}) => {
+    cell: ({ row }) => {
       return (
         <Cell>
-          <Button variant={"ghost"}>
-            <HiOutlinePencil />
-          </Button>
+          <Dialog>
+            <DialogTrigger>
+              <HiOutlinePencil />
+              <EditQuestionDialog />
+            </DialogTrigger>
+          </Dialog>
           <Button variant={"ghost"}>
             <FaRegTrashAlt />
           </Button>

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

@@ -1,10 +1,12 @@
 "use client";
 
+import AddQuestionDialog from "@/app/(auth)/leetcode-dashboard/AddQuestionDialog";
 import { LeetcodeDashboardTable } from "@/app/(auth)/leetcode-dashboard/LeetcodeDashboardTable";
+import { Button } from "@/components/ui/button";
 import Container from "@/components/ui/Container";
 import { PlusIcon } from "lucide-react";
-import { Dialog, DialogTrigger } from "@/components/ui/dialog";
-import AddQuestionDialog from "@/app/(auth)/leetcode-dashboard/AddQuestionDialog";
+import { useState } from "react";
+import Modal from "react-modal";
 
 const LeetcodeDashboardHeader = () => {
   return (
@@ -22,17 +24,39 @@ const LeetcodeDashboardHeader = () => {
 };
 
 const LeetcodeDashboard = () => {
+  const [modalIsOpen, setIsOpen] = useState(false);
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
   return (
     <Container>
       <LeetcodeDashboardHeader />
       <div className="flex justify-end mb-4">
-        <Dialog>
-          {/* Unable to reuse Button as cannot render Button inside DialogTrigger (causes hydration error) */}
-          <DialogTrigger className="bg-yellow-500 text-primary-foreground hover:bg-yellow-300 rounded flex text-primary-900 p-3">
-            <PlusIcon /> Add A Question
-          </DialogTrigger>
-          <AddQuestionDialog />
-        </Dialog>
+        <Button
+          onClick={openModal}
+          className="bg-yellow-500 hover:bg-yellow-300 text-black hover:text-primary-800 flex flex-row gap-2"
+        >
+          <PlusIcon />
+          Add a Question
+        </Button>
+        <Modal
+          isOpen={modalIsOpen}
+          onRequestClose={closeModal}
+          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          style={{
+            overlay: {
+              backgroundColor: "rgba(29, 36, 51, 0.8)",
+            },
+          }}
+        >
+          <AddQuestionDialog setClose={closeModal} />
+        </Modal>
       </div>
       <LeetcodeDashboardTable />
     </Container>