Update error message handling

Author: limcaaarl

frontend/src/app/questions/question.service.ts

@@ -1,7 +1,7 @@
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { API_CONFIG } from '../api.config';
-import { Observable } from 'rxjs';
+import { catchError, Observable, throwError } from 'rxjs';
 import { SingleQuestionResponse, QuestionResponse, QuestionBody } from './question.model';
 import { TopicResponse } from './topic.model';
 
@@ -64,14 +64,18 @@ export class QuestionService {
     }
 
     addQuestion(question: QuestionBody): Observable<SingleQuestionResponse> {
-        return this.http.post<SingleQuestionResponse>(this.baseUrl + '/questions', question, this.httpOptions);
+        return this.http.post<SingleQuestionResponse>(this.baseUrl + '/questions', question, this.httpOptions).pipe(catchError(this.handleError));
     }
 
     updateQuestion(id: number, question: QuestionBody): Observable<SingleQuestionResponse> {
-        return this.http.put<SingleQuestionResponse>(this.baseUrl + '/questions/' + id, question, this.httpOptions);
+        return this.http.put<SingleQuestionResponse>(this.baseUrl + '/questions/' + id, question, this.httpOptions).pipe(catchError(this.handleError));
     }
 
     deleteQuestion(id: number): Observable<SingleQuestionResponse> {
-        return this.http.delete<SingleQuestionResponse>(this.baseUrl + '/questions/' + id);
+        return this.http.delete<SingleQuestionResponse>(this.baseUrl + '/questions/' + id).pipe(catchError(this.handleError));
+    }
+
+    handleError(error: HttpErrorResponse) {
+        return throwError(error);
     }
 }

frontend/src/app/questions/questions.component.ts

@@ -18,6 +18,7 @@ import { Difficulty } from './difficulty.model';
 import { DifficultyLevels } from './difficulty-levels.enum';
 import { QuestionService } from './question.service';
 import { forkJoin } from 'rxjs';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
     selector: 'app-questions',
@@ -201,12 +202,12 @@ export class QuestionsComponent implements OnInit {
                     this.questions = [...this.questions, response.data];
                 }
             },
-            error: (error: Error) => {
+            error: (error: HttpErrorResponse) => {
                 console.log(error);
                 this.messageService.add({
                     severity: 'error',
                     summary: 'Error',
-                    detail: 'Failed to add new question. Please try again later.',
+                    detail: 'Failed to add new question. ' + error.error.message,
                     life: 3000,
                 });
             },
@@ -230,12 +231,12 @@ export class QuestionsComponent implements OnInit {
                 this.questions = this.questions?.filter(val => !this.selectedQuestions?.includes(val));
                 this.selectedQuestions = null;
             },
-            error: () => {
+            error: (error: HttpErrorResponse) => {
                 // Handle any errors from the forkJoin if necessary
                 this.messageService.add({
                     severity: 'error',
                     summary: 'Error',
-                    detail: 'Some questions could not be deleted. Please try again later.',
+                    detail: 'Some questions could not be deleted. ' + error.error.message,
                     life: 3000,
                 });
             },
@@ -255,13 +256,13 @@ export class QuestionsComponent implements OnInit {
             next: (response: SingleQuestionResponse) => {
                 this.questions[this.questions.findIndex(x => x.id == id)] = response.data;
             },
-            error: (error: Error) => {
+            error: (error: HttpErrorResponse) => {
                 console.log(error);
                 console.log(question);
                 this.messageService.add({
                     severity: 'error',
                     summary: 'Error',
-                    detail: 'Failed to edit question. Please try again later.',
+                    detail: error.error.message,
                     life: 3000,
                 });
             },