[Updated] Frontend now uses categories retrieved from the backend

frontend/src/app/Quiz/models/category.ts

@@ -0,0 +1,4 @@
+export interface Category {
+    id: number;
+    name: string;
+}

frontend/src/app/Quiz/models/quiz-params.ts

@@ -1,5 +1,7 @@
+import { Category } from "./category";
+
 export interface QuizParams {
-    category: string;
+    category: number;
     type: string;
     amount: number;
     difficulty: string;

frontend/src/app/Quiz/services/quiz.service.ts

@@ -19,6 +19,7 @@ import { StorageService } from './storage.service';
 import { CleanerService } from './cleaner.service';
 import { ResponseHandlerService } from './response-handler.service';
 import { environment } from '../../../environments/environment';
+import { Category } from '../models/category';
 
 @Injectable({
   providedIn: 'root',
@@ -40,8 +41,7 @@ export class QuizService {
     }
     this.storageService.setSession(sessionIdObj.sessionId);
     const sessionObj = await lastValueFrom(this.pollQuestions(sessionIdObj.sessionId));
-
-    return this.reponseHandler.handleResponse(sessionIdObj.statusCode, sessionObj);
+    return this.reponseHandler.handleResponse(sessionObj.statusCode, sessionObj);
   }
 
   public pollQuestions(sessionId: string) {
@@ -67,7 +67,7 @@ export class QuizService {
 
   private convertParamsToUrl(quizParams: QuizParams) {
     let url = `?amount=${quizParams.amount}`;
-    const catIndex = this.getCategories().indexOf(quizParams.category);
+    const catIndex = quizParams.category;
     url += catIndex !== 0 ? `&category=${catIndex}` : '';
 
     const diff = quizParams.difficulty.toLowerCase();
@@ -83,34 +83,11 @@ export class QuizService {
     return url;
   }
 
-  public getCategories(): string[] {
-    return [
-      'Any Category',
-      'General Knowledge',
-      'Entertainment: Books',
-      'Entertainment: Film',
-      'Entertainment: Music',
-      'Entertainment: Musicals & Theatres',
-      'Entertainment: Television',
-      'Entertainment: Video Games',
-      'Entertainment: Board Games',
-      'Science & Nature',
-      'Science: Computers',
-      'Science: Mathematics',
-      'Mythology',
-      'Sports',
-      'Geography',
-      'History',
-      'Politics',
-      'Art',
-      'Celebrities',
-      'Animals',
-      'Vehicles',
-      'Entertainment: Comics',
-      'Science: Gadgets',
-      'Entertainment: Japanese Anime & Manga',
-      'Entertainment: Cartoon & Animations',
-    ];
+  public async getCategories(): Promise<Category[]> {
+    let categories: Category[] = await firstValueFrom(this.http.get<any>(this.apiUrl + '/categories'));
+    categories.push({id:0,name:"Any Category"});
+    categories.sort((a,b) => a.id - b.id);
+    return categories;
   }
 
   public getDifficulties(): string[] {

frontend/src/app/Quiz/setup/setup.component.html

@@ -5,7 +5,7 @@
         <div class="mb-4">
             <label for="category" class="block mb-1">Category</label>
             <select id="category" class="w-full p-2 border rounded" [(ngModel)]="category">
-                <option *ngFor="let category of quizService.getCategories()" [value]="category">{{ category }}</option>
+                <option *ngFor="let category of categories" [value]="category.id">{{ category.name }}</option>
             </select>
         </div>
 

frontend/src/app/Quiz/setup/setup.component.ts

@@ -7,6 +7,7 @@ import { QuizParams } from '../models/quiz-params';
 import { SpinnerService } from '../../Spinner/services/spinner.service';
 import { CommonModule } from '@angular/common';
 import { Question } from '../models/question';
+import { Category } from '../models/category';
 
 @Component({
   selector: 'app-setup',
@@ -17,8 +18,8 @@ import { Question } from '../models/question';
 })
 export class SetupComponent {
 
-
-  category: string = "";
+  categories!: Category[];
+  category!: number;
   difficulty: string = "";
   type: string = "";
   amount: number = 10;
@@ -28,10 +29,13 @@ export class SetupComponent {
     public quizService: QuizService,
     private spinnerService: SpinnerService
   ) {
-    /** Setting default values */
-    this.category = this.quizService.getCategories()[0];
-    this.difficulty = this.quizService.getDifficulties()[0];
-    this.type = this.quizService.getTypes()[0];
+    quizService.getCategories().then((categories: Category[]) => {
+      /** Setting default values */
+      this.categories = categories;
+      this.category = this.categories.find(item => item.id == 0)!.id;
+      this.difficulty = this.quizService.getDifficulties()[0];
+      this.type = this.quizService.getTypes()[0];      
+    });
   }
 
   startQuiz() {