Merge pull request #174 from CS3219-AY2425S1/enhancement/question-cat-enum

Add Category Enum and Refactor

Author: jq1836

frontend/app/auth/auth-context.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { userServiceUri } from "@/lib/api-uri";
+import { userServiceUri } from "@/lib/api/api-uri";
 import { User, UserSchema } from "@/lib/schemas/user-schema";
 import { useRouter } from "next/navigation";
 import {

frontend/components/admin-user-management/admin-edit-user-modal.tsx

@@ -11,11 +11,11 @@ import {
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
-import { updateUser } from "@/lib/update-user";
+import { updateUser } from "@/lib/api/user-service/update-user";
 import { useAuth } from "@/app/auth/auth-context";
 import { useToast } from "@/components/hooks/use-toast";
 import { Switch } from "../ui/switch";
-import { updateUserPrivilege } from "@/lib/update-user-privilege";
+import { updateUserPrivilege } from "@/lib/api/user-service/update-user-privilege";
 import { User } from "@/lib/schemas/user-schema";
 
 interface AdminEditUserModalProps extends React.HTMLProps<HTMLDivElement> {

frontend/components/admin-user-management/admin-user-management.tsx

@@ -17,7 +17,7 @@ import AdminEditUserModal from "@/components/admin-user-management/admin-edit-us
 import DeleteAccountModal from "@/components/common/delete-account-modal";
 import { PencilIcon, Trash2Icon } from "lucide-react";
 import { User, UserArraySchema } from "@/lib/schemas/user-schema";
-import { userServiceUri } from "@/lib/api-uri";
+import { userServiceUri } from "@/lib/api/api-uri";
 
 const fetcher = async (url: string): Promise<User[]> => {
   const token = localStorage.getItem("jwtToken");

frontend/components/auth/reset-password-form.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { resetPassword } from "@/lib/reset-password";
+import { resetPassword } from "@/lib/api/user-service/reset-password";
 import { isPasswordComplex } from "@/lib/password";
 import { useToast } from "@/components/hooks/use-toast";
 

frontend/components/auth/sign-up-form.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { toast } from "@/components/hooks/use-toast";
-import { signUp } from "@/lib/signup";
+import { signUp } from "@/lib/api/user-service/signup";
 import { isPasswordComplex } from "@/lib/password";
 
 import { Button } from "@/components/ui/button";

frontend/components/forget-password.tsx

@@ -15,7 +15,7 @@ import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
-import { userServiceUri } from "@/lib/api-uri";
+import { userServiceUri } from "@/lib/api/api-uri";
 
 const ForgetPassword: React.FC = () => {
   const [email, setEmail] = useState("");

frontend/components/questions/question-filter.tsx

@@ -12,6 +12,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  CategoryEnumArray,
+  ComplexityEnumArray,
+} from "@/lib/schemas/question-schema";
 
 interface QuestionFilterProps {
   category: string;
@@ -52,13 +56,22 @@ const QuestionFilter: React.FC<QuestionFilterProps> = ({
           </div>
           <div>
             <Label htmlFor="category">Category</Label>
-            <Input
-              id="category"
+            <Select
               value={category}
-              onChange={(e) => onCategoryChange(e.target.value)}
-              placeholder="Enter category"
-              className="mt-1"
-            />
+              onValueChange={(value) => onCategoryChange(value)}
+            >
+              <SelectTrigger id="category" className="mt-1">
+                <SelectValue placeholder="Select category" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All</SelectItem>
+                {CategoryEnumArray.map((category) => (
+                  <SelectItem key={category} value={category}>
+                    {category}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
           <div>
             <Label htmlFor="complexity">Complexity</Label>
@@ -71,9 +84,11 @@ const QuestionFilter: React.FC<QuestionFilterProps> = ({
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">All</SelectItem>
-                <SelectItem value="easy">Easy</SelectItem>
-                <SelectItem value="medium">Medium</SelectItem>
-                <SelectItem value="hard">Hard</SelectItem>
+                {ComplexityEnumArray.map((complexity) => (
+                  <SelectItem key={complexity} value={complexity}>
+                    {complexity}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </div>

frontend/components/questions/question-form-modal.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { Question } from "@/lib/schemas/question-schema";
+import {
+  CategoryEnum,
+  CategoryEnumArray,
+  ComplexityEnum,
+  ComplexityEnumArray,
+  Question,
+} from "@/lib/schemas/question-schema";
 import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
 import {
@@ -19,6 +25,7 @@ import {
   DialogFooter,
   DialogHeader,
 } from "@/components/ui/dialog";
+import { MultiSelect } from "@/components/ui/multi-select";
 
 interface QuestionFormModalProps {
   showModal: boolean;
@@ -33,8 +40,8 @@ const QuestionFormModal: React.FC<QuestionFormModalProps> = ({ ...props }) => {
   const initialQuestionState: Question = {
     id: "",
     title: "",
-    category: "",
-    complexity: "easy",
+    categories: [],
+    complexity: "Easy",
     description: "",
   };
 
@@ -89,15 +96,19 @@ const QuestionFormModal: React.FC<QuestionFormModalProps> = ({ ...props }) => {
               </DialogHeader>
               <div>
                 <Label>Category</Label>
-                <Input
-                  id="category"
-                  value={question.category}
+                <MultiSelect
                   className="mt-2"
-                  onChange={(e) =>
-                    setQuestion({ ...question, category: e.target.value })
+                  defaultValue={question.categories as string[]}
+                  options={CategoryEnumArray.map((category) => ({
+                    label: category,
+                    value: category,
+                  }))}
+                  onValueChange={(v) =>
+                    setQuestion({
+                      ...question,
+                      categories: v as CategoryEnum[],
+                    })
                   }
-                  disabled={!props.isAdmin}
-                  required
                 />
               </div>
 
@@ -107,7 +118,7 @@ const QuestionFormModal: React.FC<QuestionFormModalProps> = ({ ...props }) => {
                   {props.isAdmin ? (
                     <Select
                       value={question.complexity}
-                      onValueChange={(e) =>
+                      onValueChange={(e: ComplexityEnum) =>
                         setQuestion({ ...question, complexity: e })
                       }
                       disabled={!props.isAdmin}
@@ -116,19 +127,18 @@ const QuestionFormModal: React.FC<QuestionFormModalProps> = ({ ...props }) => {
                         <SelectValue placeholder="Select complexity" />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="easy">Easy</SelectItem>
-                        <SelectItem value="medium">Medium</SelectItem>
-                        <SelectItem value="hard">Hard</SelectItem>
+                        {ComplexityEnumArray.map((complexity) => (
+                          <SelectItem key={complexity} value={complexity}>
+                            {complexity}
+                          </SelectItem>
+                        ))}
                       </SelectContent>
                     </Select>
                   ) : (
                     <Input
                       id="complexity"
                       value={question.complexity}
-                      onChange={(e) =>
-                        setQuestion({ ...question, complexity: e.target.value })
-                      }
-                      disabled={!props.isAdmin}
+                      disabled
                     />
                   )}
                 </div>