Improve questions (#49)

* Wrap delete questions in single API call

* Add new POST `questions/delete` endpoint
* Update question service README
* Update frontend to use new endpoint

* Ensure question table is responsive

to fit smaller viewports

* Fix question README

* Fix comments

* Update return type of getQuestionByID

* Revert "Update return type of getQuestionByID"

This reverts commit cb11b5a.

* Update return type of getQuestionByID

---------

Co-authored-by: limcaaarl <[email protected]>

Author: samuelim01

frontend/src/_services/question.service.ts

@@ -2,14 +2,19 @@ import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular
 import { Injectable } from '@angular/core';
 import { API_CONFIG } from '../app/api.config';
 import { catchError, Observable, throwError } from 'rxjs';
-import { SingleQuestionResponse, QuestionResponse, QuestionBody } from '../app/questions/question.model';
+import {
+    SingleQuestionResponse,
+    QuestionResponse,
+    QuestionBody,
+    MessageOnlyResponse,
+} from '../app/questions/question.model';
 import { TopicResponse } from '../app/questions/topic.model';
 
 @Injectable({
     providedIn: 'root',
 })
 export class QuestionService {
-    private baseUrl = API_CONFIG.baseUrl;
+    private baseUrl = API_CONFIG.baseUrl + '/questions';
 
     private httpOptions = {
         headers: new HttpHeaders({
@@ -41,11 +46,11 @@ export class QuestionService {
         }
 
         // send request
-        return this.http.get<QuestionResponse>(this.baseUrl + '/questions', { params });
+        return this.http.get<QuestionResponse>(this.baseUrl, { params });
     }
 
-    getQuestionByID(id: number): Observable<QuestionResponse> {
-        return this.http.get<QuestionResponse>(this.baseUrl + '/questions/' + id);
+    getQuestionByID(id: number): Observable<SingleQuestionResponse> {
+        return this.http.get<SingleQuestionResponse>(this.baseUrl + '/' + id);
     }
 
     getQuestionByParam(topics: string[], difficulty: string, limit?: number): Observable<QuestionResponse> {
@@ -56,28 +61,32 @@ export class QuestionService {
         }
         params = params.append('topics', topics.join(',')).append('difficulty', difficulty);
 
-        return this.http.get<QuestionResponse>(this.baseUrl + '/questions/search', { params });
+        return this.http.get<QuestionResponse>(this.baseUrl + '/search', { params });
     }
 
     getTopics(): Observable<TopicResponse> {
-        return this.http.get<TopicResponse>(this.baseUrl + '/questions/topics');
+        return this.http.get<TopicResponse>(this.baseUrl + '/topics');
     }
 
     addQuestion(question: QuestionBody): Observable<SingleQuestionResponse> {
         return this.http
-            .post<SingleQuestionResponse>(this.baseUrl + '/questions', question, this.httpOptions)
+            .post<SingleQuestionResponse>(this.baseUrl, 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)
+            .put<SingleQuestionResponse>(this.baseUrl + '/' + id, question, this.httpOptions)
             .pipe(catchError(this.handleError));
     }
 
     deleteQuestion(id: number): Observable<SingleQuestionResponse> {
+        return this.http.delete<SingleQuestionResponse>(this.baseUrl + '/' + id).pipe(catchError(this.handleError));
+    }
+
+    deleteQuestions(ids: number[]): Observable<MessageOnlyResponse> {
         return this.http
-            .delete<SingleQuestionResponse>(this.baseUrl + '/questions/' + id)
+            .post<MessageOnlyResponse>(this.baseUrl + '/delete', { ids }, this.httpOptions)
             .pipe(catchError(this.handleError));
     }
 

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

@@ -1,12 +1,17 @@
-export interface QuestionResponse {
+export interface BaseResponse {
     status: string;
     message: string;
+}
+
+export interface MessageOnlyResponse extends BaseResponse {
+    data: null;
+}
+
+export interface QuestionResponse extends BaseResponse {
     data?: Question[] | null;
 }
 
-export interface SingleQuestionResponse {
-    status: string;
-    message: string;
+export interface SingleQuestionResponse extends BaseResponse {
     data: Question;
 }
 

frontend/src/app/questions/questions.component.html

@@ -31,7 +31,7 @@
             [value]="questions"
             [(selection)]="selectedQuestions"
             datakey="id"
-            [tableStyle]="{ 'table-layout': 'fixed' }"
+            [tableStyle]="{ 'min-width': '50rem' }"
             [paginator]="true"
             [rows]="5"
             [rowsPerPageOptions]="[5, 10, 20]"

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

@@ -14,7 +14,6 @@ import { DropdownModule } from 'primeng/dropdown';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import { Question } from './question.model';
 import { QuestionService } from '../../_services/question.service';
-import { forkJoin } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
 import { QuestionDialogComponent } from './question-dialog.component';
 import { Column } from './column.model';
@@ -85,9 +84,7 @@ export class QuestionsComponent implements OnInit {
             message: 'Are you sure you want to delete the selected questions?',
             header: 'Delete Confirmation',
             icon: 'pi pi-exclamation-triangle',
-            accept: () => {
-                this.handleDeleteQuestionResponse();
-            },
+            accept: () => this.handleDeleteQuestionsResponse(),
         });
     }
 
@@ -101,21 +98,15 @@ export class QuestionsComponent implements OnInit {
         };
     }
 
-    handleDeleteQuestionResponse() {
-        const deleteRequests = this.selectedQuestions?.map(q => this.questionService.deleteQuestion(q.id));
-
-        forkJoin(deleteRequests!).subscribe({
+    handleDeleteQuestionsResponse() {
+        const ids = this.selectedQuestions?.map(q => q.id) || [];
+        this.questionService.deleteQuestions(ids).subscribe({
             next: () => {
-                // delete locally
-                this.questions = this.questions?.filter(val => !this.selectedQuestions?.includes(val));
+                this.questions = this.questions?.filter(q => !ids.includes(q.id));
                 this.selectedQuestions = null;
             },
-            error: (error: HttpErrorResponse) => {
-                this.onErrorReceive('Some questions could not be deleted. ' + error.error.message);
-            },
-            complete: () => {
-                this.onSuccessfulRequest('Question(s) Deleted');
-            },
+            error: (error: HttpErrorResponse) => this.onErrorReceive(error.error.message),
+            complete: () => this.onSuccessfulRequest('Question(s) Deleted'),
         });
     }
 

services/question/README.md

@@ -422,3 +422,41 @@ curl -X DELETE http://localhost:8081/questions/21
 ```
 
 ---
+
+## Delete Questions
+
+This endpoint allows the deletion of multiple questions by their question IDs.
+
+- **HTTP Method**: `POST`
+- **Endpoint**: `/questions/delete`
+
+### Parameters:
+
+- `ids` (Required) - An array of integers representing the IDs of the questions to delete, e.g. `[1, 2, 3]`.
+
+### Responses:
+
+| Response Code               | Explanation                                          |
+|-----------------------------|------------------------------------------------------|
+| 200 (OK)                    | Success, the question is deleted successfully.       |
+| 400 (Bad Request)           | The `ids` parameter was not specified or is invalid. |
+| 404 (Not Found)             | A question with the specified id not found.          |
+| 500 (Internal Server Error) | Unexpected error in the database or server.          |
+
+### Command Line Example:
+
+```
+curl -X POST http://localhost:8081/questions/delete -H "Content-Type: application/json" -d '{"ids": [21, 22]}'
+```
+
+### Example of Response Body for Success:
+
+```json
+{
+  "status": "Success",
+  "message": "Questions deleted successfully",
+  "data": null
+}
+```
+
+---

services/question/src/controllers/questionController.ts

@@ -246,3 +246,32 @@ export const deleteQuestion = async (req: Request, res: Response) => {
         handleError(res, 'Failed to delete question');
     }
 };
+
+/**
+ * This endpoint allows deletion of multiple questions by the question ID.
+ * @param req
+ * @param res
+ */
+export const deleteQuestions = async (req: Request, res: Response) => {
+    const { ids } = req.body;
+
+    if (!ids || !Array.isArray(ids)) {
+        return handleBadRequest(res, 'IDs are missing or not specified as an array');
+    }
+
+    const deletedIDs = ids.map((id: any) => parseInt(id, 10));
+    if (deletedIDs.some((id: any) => isNaN(id))) {
+        return handleBadRequest(res, 'Invalid question ID');
+    }
+
+    try {
+        const count = await Question.countDocuments({ id: { $in: deletedIDs } });
+
+        if (count !== ids.length) return handleNotFound(res, 'Question not found');
+        await Question.deleteMany({ id: { $in: deletedIDs } });
+        handleSuccess(res, 200, 'Questions deleted successfully', null);
+    } catch (error) {
+        console.log('Error in deleteQuestions:', error);
+        handleError(res, 'Failed to delete questions');
+    }
+};

services/question/src/routes/questionRoutes.ts

@@ -7,6 +7,7 @@ import {
     addQuestion,
     deleteQuestion,
     updateQuestion,
+    deleteQuestions,
 } from '../controllers/questionController';
 
 /**
@@ -38,4 +39,9 @@ questionRouter.put('/:id', updateQuestion);
  */
 questionRouter.delete('/:id', deleteQuestion);
 
+/**
+ * Delete questions from the database.
+ */
+questionRouter.post('/delete', deleteQuestions);
+
 export default questionRouter;