merge Feature/22 retrieve categorie from odin

Merge branch 'feature/22-retrieve-categorie-from-odin' into 'develop'

src/models/Quiz.ts

@@ -5,7 +5,7 @@ interface Difficulty {
     name: string;
 }
 
-interface Category {
+export interface Category {
     id: number;
     name: string;
 }

src/routes/home/PlayAQuiz/createAQuiz.tsx

 // for PlayAQuiz page
-import { FormEventHandler, useState } from 'react';
+import { FormEventHandler, useEffect, useState } from 'react';
 import './createAQuiz.css';
 import { useQuizService } from '../../../services/QuizService';
 import { useNavigate } from 'react-router-dom';
+import { Category } from '../../../models/Quiz';
 
 interface paqProps {
     loading: () => void;
@@ -10,8 +11,22 @@ interface paqProps {
 
 
 export function CreateAQuiz({ loading }: paqProps) {
-    const { generateQuiz } = useQuizService();
+    const { generateQuiz, getCategories } = useQuizService();
     const navigate = useNavigate();
+    const [categories, setCategories] = useState<Category[]>([]);
+
+    const fetchingCategories = async () => {
+        const categories = await getCategories();
+        let categoriesTemp: Category[] = [];
+        categories.map(category => {
+            categoriesTemp.push({'name': category.name, 'id': category.id});
+        });
+        setCategories(categoriesTemp);
+    }
+
+    useEffect(() => {
+        fetchingCategories();
+    }, []);
 
     const handleCreate: FormEventHandler<HTMLFormElement> = async (event) => {
         event.preventDefault();
@@ -43,9 +58,13 @@ export function CreateAQuiz({ loading }: paqProps) {
                 <div className="form-group">
                     <label htmlFor="category">Category</label>
                     <select className="form-control" id="category">
-                        {/* <option *ngFor="let lcategory of categories" [value]="lcategory.id">
-                            {{ lcategory.name }}
-                        </option> */}
+                        {categories.map(category => {
+                            return (
+                                <option key={category.id} value={category.id}>
+                                    {category.name}
+                                </option>
+                            );
+                        })}
                     </select>
                 </div>
 

src/services/QuizService.ts

@@ -131,6 +131,9 @@ export const useQuizService = () => {
     const getCommunityQuiz = async (skip: number, take: number) => {
         try {
             const response = await axios.get<Quiz[]>(`${url}/quiz/paginated?skip=${skip}&take=${take}`, {
+                headers: {
+                    "Content-Type": "application/json",
+                },
                 withCredentials: true, // Inclut les cookies pour une session authentifiée
             });
 
@@ -146,17 +149,30 @@ export const useQuizService = () => {
         }
     };
 
+    const getCategories = async () => {
+        try {
+            const response = await axios.get(`${url}/quiz/categories`, {
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+            return response.data;
+        } catch (error: any) {
+            if (error.response) {
+                return new HttpError(error.response.status, error.response.data?.message || "HTTP error");
+            } else {
+                return new HttpError(500, "Unexpected error: " + error.message);
+            }
+        }
+    };
+
 
     return {
         generateQuiz: generateQuiz,
         getAnswerQuiz: getAnswerQuiz,
         remainingQuiz: remainingQuiz,
         getRandomQuiz: getRandomQuiz,
-        getCommunityQuiz: getCommunityQuiz
-
+        getCommunityQuiz: getCommunityQuiz,
+        getCategories: getCategories,
     }
 }
-
-export function getRandomQuiz() {
-    throw new Error('Function not implemented.');
-}