Merge pull request #9 from CS3219-AY2425S1/frontendQuestion

Link question service frontend to backend

.gitignore

@@ -131,3 +131,5 @@ dist
 
 # Redis dump
 redis-data/
+
+frontend/peerprep/next.config.js

frontend/peerprep/app/questions-management/add/layout.tsx

@@ -4,8 +4,8 @@ export default function SettingsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
+    <section className="flex flex-col items-start justify-center gap-4 py-8 md:py-6">
+      <div className="inline-block w-full min-w-lg text-center justify-center">
         {children}
       </div>
     </section>

frontend/peerprep/app/questions-management/add/page.tsx

@@ -1,9 +1,9 @@
+"use client";
 import AddQuestionForm from "@/components/addquestionform";
-import { title } from "@/components/primitives";
 
-export default function SettingsPage() {
+export default function AddQuestionsPage() {
   return (
-    <div>
+    <div className="flex">
       <AddQuestionForm />
     </div>
   );

frontend/peerprep/app/questions-management/edit/[id]/layout.tsx

@@ -0,0 +1,13 @@
+export default function SettingsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="flex flex-col items-start justify-center gap-4 py-8 md:py-6">
+      <div className="inline-block w-full min-w-lg text-center justify-center">
+        {children}
+      </div>
+    </section>
+  );
+}

frontend/peerprep/app/questions-management/edit/[id]/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+import EditQuestionForm from "@/components/editquestionform";
+
+export default function AddQuestionsPage() {
+  return (
+    <div className="flex">
+      <EditQuestionForm />
+    </div>
+  );
+}

frontend/peerprep/app/questions-management/list/columns.tsx

@@ -1,6 +1,8 @@
 "use client";
 import BoxIcon from "@/components/boxicons";
+import { capitalize } from "@/utils/utils";
 import { Button, Chip } from "@nextui-org/react";
+import { useRouter } from "next/navigation";
 
 export type Question = {
   _id: string;
@@ -29,26 +31,28 @@ export const columns = [
   },
 ];
 
-const complexityColorMap: Record<string, "success" | "warning" | "danger"> = {
-  Easy: "success",
-  Medium: "warning",
-  Hard: "danger",
+export const complexityColorMap: Record<
+  string,
+  "success" | "warning" | "danger"
+> = {
+  EASY: "success",
+  MEDIUM: "warning",
+  HARD: "danger",
 };
 
 export const complexityOptions = ["Easy", "Medium", "Hard"];
 
-export let categoryOptions: string[] = [];
-
-export const setCategoryOptions = (newOptions: string[]) => {
-  categoryOptions = newOptions;
-};
-
 export function renderCell(
   question: Question,
   columnKey: React.Key,
   handleDelete: (question: Question) => void
 ) {
   const cellValue = question[columnKey as keyof Question];
+  const router = useRouter();
+
+  const handleRowAction = (key) => {
+    router.push(`/questions-management/edit/${key}`);
+  };
 
   switch (columnKey) {
     case "title":
@@ -58,20 +62,22 @@ export function renderCell(
         <Chip
           className="capitalize"
           color={
-            complexityColorMap[cellValue as keyof typeof complexityColorMap]
+            complexityColorMap[
+              String(cellValue) as keyof typeof complexityColorMap
+            ]
           }
           size="sm"
           variant="flat"
         >
-          {cellValue}
+          {capitalize(String(cellValue))}
         </Chip>
       );
     case "category":
       return (
         <div className="flex space-x-2">
           {question.category.map((cat) => (
             <Chip key={cat} className="capitalize" size="sm" variant="flat">
-              {cat}
+              {capitalize(String(cat))}
             </Chip>
           ))}
         </div>
@@ -84,7 +90,7 @@ export function renderCell(
             isIconOnly
             variant="light"
             className="cursor-pointer text-lg text-default-400 active:opacity-50"
-            onPress={() => alert(`Opening item ${question._id}...`)}
+            onPress={() => handleRowAction(question.question_id)}
           >
             <BoxIcon name="bxs-edit" />
           </Button>

frontend/peerprep/app/questions-management/list/page.tsx

@@ -1,19 +1,44 @@
 "use client";
 import QuestionsTable from "@/components/questionstable";
 import Questions from "../mockdata/sample_getAllQuestions.json";
-import { categoryOptions, setCategoryOptions } from "./columns";
+import { Question, setCategoryOptions } from "./columns";
+import useSWR from "swr";
 
-export default async function QuestionsPage() {
-  let questions = Questions.questions;
+// async function getQuestions(): Promise<Question[]> {
+//   // Make sure the fetch URL includes http:// or https://
+//   const res = await fetch("http://localhost:8003/api/questions/categories/unique");
 
-  const allCategories = questions.flatMap((question) => question.category);
-  const uniqueCategories = Array.from(new Set(allCategories));
+//   // Check for a successful response
+//   if (!res.ok) {
+//     throw new Error(`Failed to fetch questions: ${res.statusText}`);
+//   }
 
-  setCategoryOptions(uniqueCategories);
+//   // Parse the response as JSON
+//   const data = await res.json();
+
+//   // Return the questions part of the JSON response
+//   return data.uniqueCategories;
+// }
+
+export default function QuestionsPage() {
+  // const { data, isLoading } = useSWR(
+  //   `http://localhost:8003/api/questions/categories/unique`,
+  //   fetcher
+  // );
+  // let questions = await getQuestions();
+
+  // console.log(questions);
+
+  // let questions = Questions.questions;
+
+  // const allCategories = questions.flatMap((question) => question.category);
+  // const uniqueCategories = Array.from(new Set(allCategories));
+
+  // setCategoryOptions(Array.from(data?.uniqueCategories));
 
   return (
     <div>
-      <QuestionsTable questions={questions} />
+      <QuestionsTable />
     </div>
   );
 }