Query API in QuestionList

Author: alvinlim277

peerprep/components/questionpage/QuestionCard.tsx

@@ -35,7 +35,7 @@ const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
           </span>
         </p>
         <p className="text-sm">
-          Categories: <span>{question.category.join(", ")}</span>
+          Categories: <span>{question.categories.join(", ")}</span>
         </p>
       </div>
 

peerprep/components/questionpage/QuestionList.tsx

@@ -21,13 +21,15 @@ const QuestionList: React.FC = () => {
     // make use of gateway.ts later
     const fetchQuestions = async () => {
       try {
-        const response = await fetch("/data/dummyquestions.json");
+        const response = await fetch(
+          `${process.env.NEXT_PUBLIC_QUESTION_SERVICE}/questions`
+        );
         const data: Question[] = await response.json();
         setQuestions(data);
 
         // get all present categories in all qns
         const uniqueCategories = Array.from(
-          new Set(data.flatMap((question) => question.category))
+          new Set(data.flatMap((question) => question.categories))
         );
         setCategories(["all", ...uniqueCategories]);
       } catch (error) {
@@ -46,7 +48,7 @@ const QuestionList: React.FC = () => {
       difficulties[question.difficulty] === difficultyFilter;
     const matchesCategory =
       categoryFilter === categories[0] ||
-      question.category.includes(categoryFilter);
+      question.categories.includes(categoryFilter);
     const matchesSearch =
       searchFilter === "" ||
       question.title.toLowerCase().includes(searchFilter.toLowerCase());

peerprep/components/shared/Question.tsx

@@ -2,7 +2,7 @@ export interface Question {
   id: number;
   title: string;
   description: string;
-  category: string[];
+  categories: string[];
   difficulty: number;
   test_cases: {
     [key: string]: string;