Use structs.ts in QuestionCard and QuestionPage

Author: alvinlim277

peerprep/api/structs.ts

@@ -1,13 +1,15 @@
 export enum Difficulty {
+  All = 0,
   Easy = 1,
   Medium,
-  Hard
+  Hard,
 }
 
 export interface QuestionBody {
   difficulty: Difficulty;
   title: string;
   description: string;
+  categories: string[];
 }
 
 export interface TestCase {

peerprep/components/questionpage/QuestionCard.tsx

@@ -1,19 +1,20 @@
 import React from "react";
-import { Question, difficulties } from "../shared/Question";
+import { Question, StatusBody, Difficulty } from "@/api/structs";
 import PeerprepButton from "../shared/PeerprepButton";
+import { redirect } from "next/navigation";
 
 type QuestionCardProps = {
   question: Question;
 };
 
 const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
-  const getDifficultyClass = (difficulty: string) => {
+  const getDifficultyClass = (difficulty: Difficulty) => {
     switch (difficulty) {
-      case "easy":
+      case Difficulty.Easy:
         return "text-green-500"; // Green for easy
-      case "medium":
+      case Difficulty.Medium:
         return "text-yellow-500"; // Yellow for medium
-      case "hard":
+      case Difficulty.Hard:
         return "text-red-500"; // Red for hard
       default:
         return "text-gray-100"; // Default color
@@ -27,15 +28,16 @@ const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
         <p className="text-sm">
           Difficulty:{" "}
           <span
-            className={`capitalize ${getDifficultyClass(
-              difficulties[question.difficulty]
-            )}`}
+            className={`capitalize ${getDifficultyClass(question.difficulty)}`}
           >
-            {difficulties[question.difficulty]}
+            {Difficulty[question.difficulty]}
           </span>
         </p>
         <p className="text-sm">
-          Categories: <span>{question.categories.join(", ")}</span>
+          Categories:{" "}
+          <span>
+            {question.categories ? question.categories.join(", ") : "None"}
+          </span>
         </p>
       </div>
 

peerprep/components/questionpage/QuestionList.tsx

@@ -1,15 +1,15 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import QuestionCard from "./QuestionCard";
-import { Question, difficulties } from "../shared/Question";
+import { Question, StatusBody, Difficulty } from "@/api/structs";
 import PeerprepDropdown from "../shared/PeerprepDropdown";
 import PeerprepSearchBar from "../shared/PeerprepSearchBar";
 
 const QuestionList: React.FC = () => {
   const [questions, setQuestions] = useState<Question[]>([]);
   const [loading, setLoading] = useState(true);
   const [difficultyFilter, setDifficultyFilter] = useState<string>(
-    difficulties[0]
+    Difficulty[0]
   );
   const [categoryFilter, setCategoryFilter] = useState<string>("all");
   // will prolly have to search by name later
@@ -44,14 +44,14 @@ const QuestionList: React.FC = () => {
 
   const filteredQuestions = questions.filter((question) => {
     const matchesDifficulty =
-      difficultyFilter === difficulties[0] ||
-      difficulties[question.difficulty] === difficultyFilter;
+      difficultyFilter === Difficulty[0] ||
+      Difficulty[question.difficulty] === difficultyFilter;
     const matchesCategory =
       categoryFilter === categories[0] ||
-      question.categories.includes(categoryFilter);
+      (question.categories ?? []).includes(categoryFilter);
     const matchesSearch =
       searchFilter === "" ||
-      question.title.toLowerCase().includes(searchFilter.toLowerCase());
+      (question.title ?? "").toLowerCase().includes(searchFilter.toLowerCase());
 
     return matchesDifficulty && matchesCategory && matchesSearch;
   });
@@ -70,7 +70,7 @@ const QuestionList: React.FC = () => {
           label="Difficulty"
           value={difficultyFilter}
           onChange={(e) => setDifficultyFilter(e.target.value)}
-          options={difficulties}
+          options={Object.keys(Difficulty).filter((key) => isNaN(Number(key)))}
         />
         <PeerprepDropdown
           label="Category"

peerprep/components/shared/PeerprepButton.tsx

@@ -15,7 +15,7 @@ const PeerprepButton: React.FC<PeerprepButtonProps> = ({
   return (
     <button
       onClick={onClick}
-      className={`px-4 py-2 text-white bg-gray-600 rounded hover:bg-gray-500 focus:outline-none focus:ring focus:ring-gray-400${className}`}
+      className={`px-4 py-2 text-white bg-gray-600 rounded hover:bg-gray-500 focus:outline-none focus:ring focus:ring-gray-400 ${className}`}
     >
       {children}
     </button>

peerprep/components/shared/PeerprepDropdown.tsx

@@ -1,21 +1,20 @@
 "use client";
 import React from "react";
-
-type PeerprepDropdownProps = {
+type PeerprepDropdownProps<T> = {
   label: string;
-  value: string;
+  value: T;
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  options: string[];
+  options: T[];
   className?: string;
 };
 
-const PeerprepDropdown: React.FC<PeerprepDropdownProps> = ({
+const PeerprepDropdown = <T extends string | number>({
   label,
   value,
   onChange,
   options,
   className,
-}) => {
+}: PeerprepDropdownProps<T>): JSX.Element => {
   return (
     <div className="flex flex-col space-y-1 space-x-2">
       <label className="text-base font-medium">{label}</label>
@@ -24,11 +23,13 @@ const PeerprepDropdown: React.FC<PeerprepDropdownProps> = ({
         onChange={onChange}
         className={`text-black border rounded p-2 focus:outline-none focus:ring-2 focus:ring-gray-300 ${className}`}
       >
-        {options.map((option) => (
-          <option className="capitalize" key={option} value={option}>
-            {option.charAt(0).toUpperCase() + option.slice(1)}
-          </option>
-        ))}
+        {options
+          .filter((option) => option)
+          .map((option) => (
+            <option className="capitalize" key={option} value={option}>
+              {String(option).charAt(0).toUpperCase() + String(option).slice(1)}
+            </option>
+          ))}
       </select>
     </div>
   );