From c49619ec42117799c727a3bfacb095aee9332eb3 Mon Sep 17 00:00:00 2001
From: leonleerl <leon.runlongli@gmail.com>
Date: Wed, 15 Jan 2025 02:56:53 +0000
Subject: [PATCH 1/5] feat(question): add Preview Modal

---
 client/package-lock.json                      |  78 +++++++++-----
 client/package.json                           |   3 +-
 .../components/ui/Question/preview-modal.tsx  | 100 ++++++++++++++++++
 client/src/pages/question/create.tsx          |  83 +++++++++++----
 client/src/types/app-sidebar.ts               |   4 +-
 client/src/types/question.ts                  |  24 ++++-
 6 files changed, 239 insertions(+), 53 deletions(-)
 create mode 100644 client/src/components/ui/Question/preview-modal.tsx

diff --git a/client/package-lock.json b/client/package-lock.json
index ffb24c2..d34f930 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-separator": "^1.1.1",
         "@radix-ui/react-slot": "^1.1.1",
         "@radix-ui/react-tooltip": "^1.1.6",
+        "@radix-ui/react-visually-hidden": "^1.1.1",
         "@tanstack/react-query": "^5.51.23",
         "@tanstack/react-query-devtools": "^5.51.23",
         "@types/js-cookie": "^3.0.6",
@@ -1580,6 +1581,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.1.tgz",
@@ -1843,29 +1867,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.1.tgz",
-      "integrity": "sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1984,12 +1985,35 @@
       }
     },
     "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
-      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.1.tgz",
+      "integrity": "sha512-vVfA2IZ9q/J+gEamvj761Oq1FpWgCDaNOOIfbPVp2MVPLEomUr5+Vf7kJGwQ24YxZSlQVar7Bes8kyTo5Dshpg==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
diff --git a/client/package.json b/client/package.json
index df68f75..5fc4054 100644
--- a/client/package.json
+++ b/client/package.json
@@ -16,14 +16,15 @@
     "check-all": "npm run lint && npm run format:check && npm run typecheck"
   },
   "dependencies": {
-    "@radix-ui/react-collapsible": "^1.1.2",
     "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
+    "@radix-ui/react-visually-hidden": "^1.1.1",
     "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-query-devtools": "^5.51.23",
     "@types/js-cookie": "^3.0.6",
diff --git a/client/src/components/ui/Question/preview-modal.tsx b/client/src/components/ui/Question/preview-modal.tsx
new file mode 100644
index 0000000..5750e51
--- /dev/null
+++ b/client/src/components/ui/Question/preview-modal.tsx
@@ -0,0 +1,100 @@
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { useEffect, useState } from "react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { PreviewModalProps } from "@/types/question";
+
+import { Button } from "../button";
+import { MathInput } from "../math-input";
+
+export default function PreviewModal({
+  children,
+  dataContext,
+  onClose,
+}: PreviewModalProps) {
+  const [question, setQuestion] = useState<string>(dataContext.question);
+  const [isSolutionVisible, setIsSolutionVisible] = useState<boolean>(true);
+
+  const handleSolutionVisible = () => {
+    setIsSolutionVisible(!isSolutionVisible);
+  };
+
+  // When close button is clicked, bring the modified question data back to Create page
+  const handleDialogClose = () => {
+    onClose(question);
+  };
+
+  useEffect(() => {
+    if (dataContext?.question) {
+      setQuestion(dataContext.question);
+    }
+  }, [dataContext]);
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger asChild>{children}</DialogTrigger>
+        <DialogContent
+          className="flex h-full max-h-[750px] w-[95%] max-w-[750px] items-center rounded-[40px] border-0 bg-accent p-1 shadow-lg"
+          style={{ borderRadius: "32px" }}
+        >
+          <VisuallyHidden.Root>
+            <DialogTitle>Preview Data</DialogTitle>
+            <DialogDescription></DialogDescription>
+          </VisuallyHidden.Root>
+
+          <div className="h-full w-full space-y-6 overflow-y-auto rounded-[30px] border-accent bg-white px-10 py-4 text-xl">
+            {/* Question */}
+            <div className="space-y-4">
+              <div className="flex space-x-4 text-2xl font-semibold text-gray-600">
+                <span>{dataContext.questionName}</span>
+                <span>[{dataContext.mark} marks]</span>
+              </div>
+              <p></p>
+              <MathInput
+                input={question}
+                onChange={(e) => {
+                  setQuestion(e.target.value);
+                }}
+              ></MathInput>
+            </div>
+            {/* Solution */}
+            <div
+              className={`space-y-2 ${isSolutionVisible ? "" : "invisible"}`}
+            >
+              <p className="text-2xl font-semibold text-gray-600">Solution</p>
+              <div>
+                <p>
+                  Answer:{" "}
+                  <span className="font-bold">{dataContext.answer}</span>
+                </p>
+                <p>{dataContext.solution}</p>
+              </div>
+            </div>
+
+            {/* Bottom buttons */}
+            <div className="flex justify-evenly">
+              <DialogTrigger asChild>
+                <Button
+                  onClick={handleDialogClose}
+                  variant={"ghost"}
+                  className="w-36 border border-black"
+                >
+                  Close
+                </Button>
+              </DialogTrigger>
+              <Button onClick={handleSolutionVisible} className="w-36">
+                Hide Solution
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/client/src/pages/question/create.tsx b/client/src/pages/question/create.tsx
index 97f4013..60ceaa5 100644
--- a/client/src/pages/question/create.tsx
+++ b/client/src/pages/question/create.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
-import { useForm } from "react-hook-form";
+import React, { useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
 import { Button } from "@/components/ui/button";
@@ -14,6 +14,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import PreviewModal from "@/components/ui/Question/preview-modal";
 import {
   Select,
   SelectContent,
@@ -42,7 +43,7 @@ const formSchema = z.object({
           ),
       {
         message:
-          "Answers must be integers between 0-999, separated by commas without spaces.",
+          "Must be an integer from 0-999, use “,” to separate multiple answers",
       },
     ),
   solution: z.string().optional(),
@@ -70,28 +71,40 @@ export default function Create() {
     },
   });
 
-  const onSubmit = (data: FormValues) => {
+  const watchedValues = useWatch<FormValues>({
+    control: form.control,
+  });
+
+  const handleSubmit = (data: FormValues) => {
     console.log("Form Data:", data);
     alert(JSON.stringify(data, null, 2));
   };
 
+  const handlePreviewClose = (updatedQuestion: string) => {
+    form.setValue("question", updatedQuestion);
+  };
+
   return (
     <div className="mx-auto my-4 max-w-3xl rounded-lg bg-gray-50 p-4 shadow-lg">
       <h1 className="mb-6 text-center text-xl font-bold">Create Question</h1>
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
           {/* Question Name */}
           <FormField
             name="questionName"
             control={form.control}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>
+                <FormLabel htmlFor="questionName">
                   Question Name <span className="text-red-500">*</span>
                 </FormLabel>
                 <FormControl>
-                  <Input placeholder="Please input question name" {...field} />
+                  <Input
+                    id="questionName"
+                    placeholder="Please input question name"
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -104,11 +117,12 @@ export default function Create() {
             control={form.control}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>
+                <FormLabel htmlFor="question">
                   Question <span className="text-red-500">*</span>
                 </FormLabel>
                 <FormControl>
                   <Textarea
+                    id="question"
                     placeholder="Please input question detail"
                     {...field}
                   />
@@ -124,7 +138,7 @@ export default function Create() {
             control={form.control}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>
+                <FormLabel htmlFor="answer">
                   Answer <span className="text-red-500">*</span>
                 </FormLabel>
                 <FormDescription>
@@ -132,7 +146,11 @@ export default function Create() {
                   answers
                 </FormDescription>
                 <FormControl>
-                  <Input placeholder="Please input answer" {...field} />
+                  <Input
+                    id="answer"
+                    placeholder="Please input answer"
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -145,9 +163,13 @@ export default function Create() {
             control={form.control}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Solution</FormLabel>
+                <FormLabel htmlFor="solution">Solution</FormLabel>
                 <FormControl>
-                  <Textarea placeholder="Please input solution" {...field} />
+                  <Textarea
+                    id="solution"
+                    placeholder="Please input solution"
+                    {...field}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -160,11 +182,12 @@ export default function Create() {
             control={form.control}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>
+                <FormLabel htmlFor="mark">
                   Mark <span className="text-red-500">*</span>
                 </FormLabel>
                 <FormControl>
                   <Input
+                    id="mark"
                     placeholder="Please input marks to this question"
                     {...field}
                   />
@@ -182,12 +205,15 @@ export default function Create() {
               control={form.control}
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>
+                  <FormLabel htmlFor="difficulty-select">
                     Difficulty <span className="text-red-500">*</span>
                   </FormLabel>
                   <FormControl>
                     <Select onValueChange={field.onChange} value={field.value}>
-                      <SelectTrigger className="bg-yellow-400 w-24">
+                      <SelectTrigger
+                        id="difficulty-select"
+                        className="bg-yellow-400 w-24"
+                      >
                         <SelectValue placeholder="Select" />
                       </SelectTrigger>
                       <SelectContent className="w-24">
@@ -208,12 +234,15 @@ export default function Create() {
               control={form.control}
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>
+                  <FormLabel htmlFor="genre-select">
                     Genre <span className="text-red-500">*</span>
                   </FormLabel>
                   <FormControl>
                     <Select onValueChange={field.onChange} value={field.value}>
-                      <SelectTrigger className="bg-yellow-400 w-32">
+                      <SelectTrigger
+                        id="genre-select"
+                        className="bg-yellow-400 w-32"
+                      >
                         <SelectValue placeholder="Select" />
                       </SelectTrigger>
                       <SelectContent className="w-32">
@@ -230,9 +259,23 @@ export default function Create() {
           </div>
 
           <div className="flex justify-end gap-4">
-            <Button type="button" variant={"ghost"} className="bg-gray-200">
-              Preview
-            </Button>
+            <PreviewModal
+              dataContext={{
+                questionName: watchedValues.questionName || "",
+                question: watchedValues.question || "",
+                answer: watchedValues.answer || "",
+                solution: watchedValues.solution || "",
+                mark: watchedValues.mark || "",
+                difficulty: watchedValues.difficulty || "",
+                genre: watchedValues.genre || "",
+              }}
+              onClose={handlePreviewClose}
+            >
+              <Button type="button" variant={"ghost"} className="bg-gray-200">
+                Preview
+              </Button>
+            </PreviewModal>
+
             <Button type="submit" variant={"outline"}>
               Save
             </Button>
diff --git a/client/src/types/app-sidebar.ts b/client/src/types/app-sidebar.ts
index 686a918..f0aba4a 100644
--- a/client/src/types/app-sidebar.ts
+++ b/client/src/types/app-sidebar.ts
@@ -39,8 +39,8 @@ export const navData: NavigationData = {
       title: "Question Management",
       icon: FileJson,
       items: [
-        { title: "Create Question", url: "#" },
-        { title: "Question Bank", url: "#" },
+        { title: "Create Question", url: "/question/create" },
+        { title: "Question Bank", url: "/question" },
       ],
     },
     {
diff --git a/client/src/types/question.ts b/client/src/types/question.ts
index bbec3d5..e70b528 100644
--- a/client/src/types/question.ts
+++ b/client/src/types/question.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 /**
  * Represents a Question object with its properties.
  *
@@ -13,7 +15,7 @@
  *   difficulty: "Difficult"
  * };
  */
-interface Question {
+export interface Question {
   name: string;
   category: string;
   difficulty: string;
@@ -37,7 +39,7 @@ interface Question {
  *   changePage: 1
  * };
  */
-interface DatagridProps {
+export interface DatagridProps {
   datacontext: Question[];
   onDataChange: (updatedData: Question[]) => void;
   changePage: number;
@@ -60,9 +62,25 @@ interface DatagridProps {
  *   className: "flex text-lg"
  * };
  */
-interface PaginationProps {
+export interface PaginationProps {
   totalPages: number;
   currentPage: number;
   onPageChange: (page: number) => void;
   className?: string;
 }
+
+export interface PreviewModalDataContext {
+  questionName: string;
+  question: string;
+  answer: string;
+  solution: string;
+  mark: string;
+  difficulty: string;
+  genre: string;
+}
+
+export interface PreviewModalProps {
+  children: ReactNode;
+  dataContext: PreviewModalDataContext;
+  onClose: (question: string) => void;
+}

From a351e2cff8a00e2f9dd3dae1bbbb7cde705d8be3 Mon Sep 17 00:00:00 2001
From: leonleerl <leon.runlongli@gmail.com>
Date: Wed, 15 Jan 2025 03:11:49 +0000
Subject: [PATCH 2/5] fix(pagination, data-grid): prettier code style
 modification

---
 client/src/components/ui/Question/data-grid.tsx | 3 ++-
 client/src/components/ui/pagination.tsx         | 2 ++
 client/src/pages/question/create.tsx            | 2 +-
 client/src/pages/question/index.tsx             | 1 +
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/Question/data-grid.tsx b/client/src/components/ui/Question/data-grid.tsx
index 9581cbe..b0a2ba0 100644
--- a/client/src/components/ui/Question/data-grid.tsx
+++ b/client/src/components/ui/Question/data-grid.tsx
@@ -8,6 +8,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { DatagridProps, Question } from "@/types/question";
 
 import { Button } from "../button";
 import { Pagination } from "../pagination";
@@ -168,7 +169,7 @@ export function Datagrid({
       <Pagination
         totalPages={totalPages}
         currentPage={currentPage}
-        onPageChange={(page) => handlePageChange(page)}
+        onPageChange={(page: number) => handlePageChange(page)}
         className="mr-20 mt-5 flex justify-end"
       />
     </div>
diff --git a/client/src/components/ui/pagination.tsx b/client/src/components/ui/pagination.tsx
index 3b8cec9..1027442 100644
--- a/client/src/components/ui/pagination.tsx
+++ b/client/src/components/ui/pagination.tsx
@@ -1,3 +1,5 @@
+import { PaginationProps } from "@/types/question";
+
 export function Pagination({
   totalPages,
   currentPage,
diff --git a/client/src/pages/question/create.tsx b/client/src/pages/question/create.tsx
index 60ceaa5..a37ea22 100644
--- a/client/src/pages/question/create.tsx
+++ b/client/src/pages/question/create.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState } from "react";
+import React from "react";
 import { useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
diff --git a/client/src/pages/question/index.tsx b/client/src/pages/question/index.tsx
index 0970743..1109063 100644
--- a/client/src/pages/question/index.tsx
+++ b/client/src/pages/question/index.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { Datagrid } from "@/components/ui/Question/data-grid";
 import { SearchInput } from "@/components/ui/search";
 import { useFetchData } from "@/hooks/use-fetch-data";
+import { Question } from "@/types/question";
 
 export default function Index() {
   // Fetches the list of questions using the custom hook.

From befe8c832c79947cef8946615dcda23c6f85bff7 Mon Sep 17 00:00:00 2001
From: leonleerl <leon.runlongli@gmail.com>
Date: Wed, 15 Jan 2025 03:21:31 +0000
Subject: [PATCH 3/5] chore(question): add comment for props

---
 client/src/types/question.ts | 48 ++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/client/src/types/question.ts b/client/src/types/question.ts
index e70b528..5504808 100644
--- a/client/src/types/question.ts
+++ b/client/src/types/question.ts
@@ -69,6 +69,29 @@ export interface PaginationProps {
   className?: string;
 }
 
+/**
+ * Represents the data context used within the PreviewModal component.
+ *
+ * @interface PreviewModalDataContext
+ * @property {string} questionName - The name or title of the question.
+ * @property {string} question - The detailed content of the question.
+ * @property {string} answer - The correct answer(s) to the question.
+ * @property {string} solution - A detailed explanation or solution for the question.
+ * @property {string} mark - The number of marks assigned to the question.
+ * @property {string} difficulty - The difficulty level of the question (e.g., Easy, Medium, Hard).
+ * @property {string} genre - The category or type of the question (e.g., Math, Science).
+ *
+ * @example
+ * const exampleContext: PreviewModalDataContext = {
+ *   questionName: "Question01_2024",
+ *   question: "What is the sum of 2 and 3?",
+ *   answer: "5",
+ *   solution: "Adding 2 and 3 gives 5.",
+ *   mark: "5",
+ *   difficulty: "Easy",
+ *   genre: "Arithmetic"
+ * };
+ */
 export interface PreviewModalDataContext {
   questionName: string;
   question: string;
@@ -79,6 +102,31 @@ export interface PreviewModalDataContext {
   genre: string;
 }
 
+/**
+ * Represents the properties for the PreviewModal component.
+ *
+ * @interface PreviewModalProps
+ * @property {ReactNode} children - The child components to render inside the modal (e.g., buttons or triggers).
+ * @property {PreviewModalDataContext} dataContext - The context containing the data to display in the modal.
+ * @property {(question: string) => void} onClose - Callback function triggered when the modal is closed. It returns the updated question as a string.
+ *
+ * @see {@link https://github.com/codersforcauses/wajo/pull/29} for more details.
+ *
+ * @example
+ * const exampleProps: PreviewModalProps = {
+ *   children: <button>Preview</button>,
+ *   dataContext: {
+ *     questionName: "Question01_2024",
+ *     question: "What is the capital of France?",
+ *     answer: "Paris",
+ *     solution: "The capital of France is Paris.",
+ *     mark: "10",
+ *     difficulty: "Medium",
+ *     genre: "Geography"
+ *   },
+ *   onClose: (updatedQuestion) => console.log("Modal closed with updated question:", updatedQuestion)
+ * };
+ */
 export interface PreviewModalProps {
   children: ReactNode;
   dataContext: PreviewModalDataContext;

From 7218402a4f47444efee2c716ceee31d2f018c988 Mon Sep 17 00:00:00 2001
From: leonleerl <leon.runlongli@gmail.com>
Date: Wed, 15 Jan 2025 03:33:36 +0000
Subject: [PATCH 4/5] fix(question): add import

---
 client/src/pages/api/question/list.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/pages/api/question/list.ts b/client/src/pages/api/question/list.ts
index 911b280..d0a9242 100644
--- a/client/src/pages/api/question/list.ts
+++ b/client/src/pages/api/question/list.ts
@@ -12,6 +12,8 @@
 
 import { NextApiRequest, NextApiResponse } from "next";
 
+import { Question } from "@/types/question";
+
 // Mock data representing question entries
 const mockQuestions: Question[] = [
   {

From 40f6466250af6bdc4ae8ae633360cfefd44b94b6 Mon Sep 17 00:00:00 2001
From: leonleerl <leon.runlongli@gmail.com>
Date: Thu, 16 Jan 2025 06:46:40 +0000
Subject: [PATCH 5/5] fix(preview modal): remain the buttons at the bottom;
 make the modal stretchable

---
 client/src/components/ui/Question/preview-modal.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/src/components/ui/Question/preview-modal.tsx b/client/src/components/ui/Question/preview-modal.tsx
index 5750e51..414b006 100644
--- a/client/src/components/ui/Question/preview-modal.tsx
+++ b/client/src/components/ui/Question/preview-modal.tsx
@@ -40,7 +40,7 @@ export default function PreviewModal({
       <Dialog>
         <DialogTrigger asChild>{children}</DialogTrigger>
         <DialogContent
-          className="flex h-full max-h-[750px] w-[95%] max-w-[750px] items-center rounded-[40px] border-0 bg-accent p-1 shadow-lg"
+          className="flex h-auto w-[95%] max-w-[750px] flex-col items-center rounded-[40px] border-0 bg-accent p-1 shadow-lg"
           style={{ borderRadius: "32px" }}
         >
           <VisuallyHidden.Root>
@@ -48,20 +48,19 @@ export default function PreviewModal({
             <DialogDescription></DialogDescription>
           </VisuallyHidden.Root>
 
-          <div className="h-full w-full space-y-6 overflow-y-auto rounded-[30px] border-accent bg-white px-10 py-4 text-xl">
+          <div className="flex h-full w-full flex-col space-y-6 rounded-[30px] border-accent bg-white px-10 py-4 text-xl">
             {/* Question */}
-            <div className="space-y-4">
+            <div className="flex-grow space-y-4">
               <div className="flex space-x-4 text-2xl font-semibold text-gray-600">
                 <span>{dataContext.questionName}</span>
                 <span>[{dataContext.mark} marks]</span>
               </div>
-              <p></p>
               <MathInput
                 input={question}
                 onChange={(e) => {
                   setQuestion(e.target.value);
                 }}
-              ></MathInput>
+              />
             </div>
             {/* Solution */}
             <div
@@ -77,8 +76,8 @@ export default function PreviewModal({
               </div>
             </div>
 
-            {/* Bottom buttons */}
-            <div className="flex justify-evenly">
+            {/* Buttons */}
+            <div className="mt-auto flex justify-evenly">
               <DialogTrigger asChild>
                 <Button
                   onClick={handleDialogClose}