Merge pull request #14 from CS3219-AY2425S1/ben/fix-missing-code

Fix minor bugs and add template code for individual question page

Author: chiaryan

apps/question-service/src/app/page.tsx

@@ -14,7 +14,7 @@ import {
   TableProps,
   Tabs,
   Tag,
-  Modal
+  Modal,
 } from "antd";
 import { Content } from "antd/es/layout/layout";
 import {
@@ -25,41 +25,58 @@ import {
 } from "@ant-design/icons";
 import "./styles.scss";
 import { useEffect, useState } from "react";
-import { DeleteQuestion as DeleteQuestionByDocref, GetQuestions, Question } from "./services/question";
+import {
+  DeleteQuestion as DeleteQuestionByDocref,
+  GetQuestions,
+  Question,
+} from "./services/question";
 import {
   CategoriesOption,
   DifficultyOption,
   OrderOption,
-} from "./utils/SelectOptions";
+} from "../utils/SelectOptions";
+import Link from "next/link";
 
 /**
  * defines the State of the page whe a user is deleing an object. Has 3 general states:
  * - {}: user is not deleting anything. The page's normal state
  * - {index: docref string, deleteConfirmed: false}: Modal popup asking whether to delete the question, pending user's decision to confirm or cancel
  * - {index: docref string, deleteConfirmed: true}: Currently deleting the question and reloading the database
  */
-type DeletionStage = {} | {index: Question, deleteConfirmed: boolean}
+type DeletionStage = {} | { index: Question; deleteConfirmed: boolean };
 
-function DeleteModal({isDeleting, questionTitle, okHandler, cancelHandler}: {questionTitle: string, okHandler: () => void, cancelHandler: () => void, isDeleting: boolean }) {
-  const title: string = `Delete Question \"${questionTitle}\"?`
-  const text: string = 'This action is irreversible(?)!' 
+function DeleteModal({
+  isDeleting,
+  questionTitle,
+  okHandler,
+  cancelHandler,
+}: {
+  questionTitle: string;
+  okHandler: () => void;
+  cancelHandler: () => void;
+  isDeleting: boolean;
+}) {
+  const title: string = `Delete Question \"${questionTitle}\"?`;
+  const text: string = "This action is irreversible(?)!";
 
-  return <Modal 
-    open={true} 
-    title={title} 
-    onOk={okHandler} 
-    onCancel={cancelHandler} 
-    confirmLoading={isDeleting} 
-    okButtonProps={{danger: true}}
-    cancelButtonProps={{disabled: isDeleting}}>
-    <p>{text}</p>
-  </Modal>
+  return (
+    <Modal
+      open={true}
+      title={title}
+      onOk={okHandler}
+      onCancel={cancelHandler}
+      confirmLoading={isDeleting}
+      okButtonProps={{ danger: true }}
+      cancelButtonProps={{ disabled: isDeleting }}
+    >
+      <p>{text}</p>
+    </Modal>
+  );
 }
 
 export default function Home() {
-
   // State of Deletion
-  const [deletionStage, setDeletionStage] = useState<DeletionStage>({})
+  const [deletionStage, setDeletionStage] = useState<DeletionStage>({});
 
   // Table States
   const [questions, setQuestions] = useState<Question[] | undefined>(undefined); // Store the questions
@@ -107,7 +124,13 @@ export default function Home() {
       setIsLoading(true);
     }
 
-    let data = await GetQuestions(currentPage, limit, sortBy, difficulty, delayedSearch);
+    let data = await GetQuestions(
+      currentPage,
+      limit,
+      sortBy,
+      difficulty,
+      delayedSearch
+    );
     setQuestions(data.questions);
     setTotalCount(data.totalCount);
     setTotalPages(data.totalPages);
@@ -116,7 +139,18 @@ export default function Home() {
     setIsLoading(false);
   }
 
-  useEffect(() => {loadQuestions()}, [limit, currentPage, sortBy, difficulty, delayedSearch]);
+  useEffect(() => {
+    loadQuestions();
+  }, [limit, currentPage, sortBy, difficulty, delayedSearch]);
+
+  // Delay the fetching of data only after user stops typing for awhile
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDelayedSearch(search);
+      setCurrentPage(1); // Reset the current page
+    }, 800);
+    return () => clearTimeout(timeout);
+  }, [search]);
 
   // Table column specification
   const columns: TableProps<Question>["columns"] = [
@@ -130,7 +164,16 @@ export default function Home() {
       title: "Title",
       dataIndex: "title",
       key: "title",
-      render: (text: string) => <Button type="link">{text}</Button>, // TODO (Sean): Onclick links to the individual question page
+      render: (text: string, question: Question) => (
+        <Link
+          href={{
+            pathname: `/question/${question.id}`,
+            query: { data: question.docRefId }, // the data
+          }}
+        >
+          <Button type="link">{text}</Button>
+        </Link>
+      ), // TODO (Sean): Onclick links to the individual question page
     },
     {
       title: "Categories",
@@ -145,14 +188,18 @@ export default function Home() {
       key: "complexity",
       render: (difficulty: string) => {
         let color = "";
-        if (difficulty === "Easy") {
+        if (difficulty === "easy") {
           color = "#2DB55D";
-        } else if (difficulty === "Medium") {
+        } else if (difficulty === "medium") {
           color = "orange";
-        } else if (difficulty === "Hard") {
+        } else if (difficulty === "hard") {
           color = "red";
         }
-        return <div style={{ color }}>{difficulty}</div>;
+        return (
+          <div style={{ color }}>
+            {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
+          </div>
+        );
       },
     },
     {
@@ -169,8 +216,8 @@ export default function Home() {
             danger
             icon={<DeleteOutlined />}
             onClick={() => {
-              setDeletionStage({index: question, deleteConfirmed: false})}
-            }
+              setDeletionStage({ index: question, deleteConfirmed: false });
+            }}
           ></Button>
         </div>
       ),
@@ -219,7 +266,7 @@ export default function Home() {
       error("Cannot delete: questions does not exist");
       return;
     }
-    
+
     setDeletionStage({ index: deletionStage.index, deleteConfirmed: true });
     await DeleteQuestionByDocref(deletionStage.index.docRefId);
     if (questions.length == 1 && currentPage > 1) {
@@ -230,13 +277,12 @@ export default function Home() {
         await loadQuestions();
         success("Question deleted successfully");
       } catch (err) {
-        if (typeof err == 'string') {
+        if (typeof err == "string") {
           error(err);
         }
       }
     }
     setDeletionStage({});
-
   };
   return (
     <div>
@@ -333,11 +379,14 @@ export default function Home() {
           </div>
         </Content>
       </Layout>
-      {("index" in deletionStage && questions != undefined) && <DeleteModal 
-        okHandler={confirmDeleteHandler} 
-        cancelHandler={() => setDeletionStage({})}
-        questionTitle={deletionStage.index.title}
-        isDeleting={deletionStage.deleteConfirmed}/>}
+      {"index" in deletionStage && questions != undefined && (
+        <DeleteModal
+          okHandler={confirmDeleteHandler}
+          cancelHandler={() => setDeletionStage({})}
+          questionTitle={deletionStage.index.title}
+          isDeleting={deletionStage.deleteConfirmed}
+        />
+      )}
     </div>
   );
 }

apps/question-service/src/app/question/[id]/page.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+const QuestionPage = (): JSX.Element => {
+  const searchParams = useSearchParams();
+  const docRefId = searchParams.get("data");
+
+  // TODO: use docRefId to fetch the data via the service function and display the data below
+  return <div>Hello World! {docRefId}</div>;
+};
+
+export default QuestionPage;