Integrate API calls with UI

Author: limcaaarl

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

@@ -11,7 +11,6 @@ export interface SingleQuestionResponse {
 }
 
 export interface Question {
-    _id?: string;
     id: number;
     description: string;
     difficulty: string;

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

@@ -11,7 +11,7 @@ import { DialogModule } from 'primeng/dialog';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { DropdownModule } from 'primeng/dropdown';
-import { Question } from './question.model';
+import { Question, SingleQuestionResponse, QuestionBody } from './question.model';
 import { Column } from './column.model';
 import { Topic } from './topic.model';
 import { Difficulty } from './difficulty.model';
@@ -70,76 +70,16 @@ export class QuestionsComponent implements OnInit {
 
     ngOnInit() {
         // two way binding for forms is not working for some reason unless question is initialised with empty values
-        this.question = {
-            _id: '',
-            id: -1,
-            title: '',
-            topics: [],
-            description: '',
-            difficulty: '',
-        };
-
-        forkJoin({
-            questions: this.questionService.getQuestions(),
-            topics: this.questionService.getTopics(),
-        }).subscribe({
-            next: results => {
-                this.questions = results.questions.data || [];
-                this.topics =
-                    results.topics.data?.map(topic => ({
-                        label: topic,
-                        value: topic,
-                    })) || [];
-            },
-            error: (error: Error) => {
-                console.error(error);
-                this.questions = [];
-                this.topics = [];
-                this.messageService.add({
-                    severity: 'error',
-                    summary: 'Error',
-                    detail: 'Failed to load data. Please try again later.',
-                    life: 3000,
-                });
-            },
-            complete: () => {
-                // TODO: add loading state for this
-                console.log('complete');
-            },
-        });
+        this.initQuestion();
 
-        this.difficulties = [
-            { label: DifficultyLevels.EASY, value: DifficultyLevels.EASY },
-            { label: DifficultyLevels.MEDIUM, value: DifficultyLevels.MEDIUM },
-            { label: DifficultyLevels.HARD, value: DifficultyLevels.HARD },
-        ];
+        // fetch data from API call
+        this.handleInitData();
 
-        this.questionFormGroup = new FormGroup({
-            selectedTopics: new FormControl<string[] | null>([]),
-            selectedDifficulty: new FormControl<Difficulty[] | null>([]),
-            textTitle: new FormControl<string | null>(''),
-            textDescription: new FormControl<string | null>(''),
-        });
-
-        // Dropdown difficulty listener
-        this.questionFormGroup.get('selectedDifficulty')?.valueChanges.subscribe(v => {
-            this.question.difficulty = v;
-        });
-
-        // Multiselect topics listener
-        this.questionFormGroup.get('selectedTopics')?.valueChanges.subscribe(v => {
-            this.question.topics = v;
-        });
+        this.initDifficulties();
 
-        // text title listener
-        this.questionFormGroup.get('textTitle')?.valueChanges.subscribe(v => {
-            this.question.title = v;
-        });
+        this.initFormGroup();
 
-        // text description listener
-        this.questionFormGroup.get('textDescription')?.valueChanges.subscribe(v => {
-            this.question.description = v;
-        });
+        this.initListeners();
     }
 
     openNewQuestion() {
@@ -155,14 +95,7 @@ export class QuestionsComponent implements OnInit {
             header: 'Delete Confirmation',
             icon: 'pi pi-exclamation-triangle',
             accept: () => {
-                this.questions = this.questions?.filter(val => !this.selectedQuestions?.includes(val));
-                this.selectedQuestions = null;
-                this.messageService.add({
-                    severity: 'success',
-                    summary: 'Successful',
-                    detail: 'Question(s) Deleted',
-                    life: 3000,
-                });
+                this.handleDeleteQuestionResponse();
             },
         });
     }
@@ -181,36 +114,26 @@ export class QuestionsComponent implements OnInit {
 
         if (this.question.id) {
             // update
-            if (this.questions) {
-                this.questions[this.questions.findIndex(x => x.id == this.question.id)] = this.question;
-            }
-
-            this.messageService.add({
-                severity: 'success',
-                summary: 'Successful',
-                detail: 'Question has been updated successfully',
-                life: 3000,
-            });
+            const { id, ...questionBody } = this.question;
+            this.handleEditQuestionResponse(id, questionBody);
         } else {
             // add
-            this.question.id = this.createId();
-
-            if (this.questions) {
-                this.questions = [...this.questions, this.question];
-            }
-
-            this.messageService.add({
-                severity: 'success',
-                summary: 'Successful',
-                detail: 'New Question Added',
-                life: 3000,
-            });
+            this.handleAddQuestionResponse();
         }
 
         this.isDialogVisible = false;
         this.question = {} as Question;
     }
 
+    resetFormGroup() {
+        this.questionFormGroup.reset({
+            selectedTopics: [],
+            selectedDifficulty: '',
+            textTitle: '',
+            textDescription: '',
+        });
+    }
+
     editQuestion(question: Question) {
         this.question.id = question.id;
         this.questionFormGroup.patchValue({
@@ -222,17 +145,165 @@ export class QuestionsComponent implements OnInit {
         this.isDialogVisible = true;
     }
 
-    // assuming newest question is always appended at the back
-    createId() {
-        return this.questions ? Number(this.questions.at(-1)?.id) + 1 : -1;
+    initListeners() {
+        // Dropdown difficulty listener
+        this.questionFormGroup.get('selectedDifficulty')?.valueChanges.subscribe(v => {
+            this.question.difficulty = v;
+        });
+
+        // Multiselect topics listener
+        this.questionFormGroup.get('selectedTopics')?.valueChanges.subscribe(v => {
+            this.question.topics = v;
+        });
+
+        // text title listener
+        this.questionFormGroup.get('textTitle')?.valueChanges.subscribe(v => {
+            this.question.title = v;
+        });
+
+        // text description listener
+        this.questionFormGroup.get('textDescription')?.valueChanges.subscribe(v => {
+            this.question.description = v;
+        });
     }
 
-    resetFormGroup() {
-        this.questionFormGroup.reset({
-            selectedTopics: [],
-            selectedDifficulty: '',
-            textTitle: '',
-            textDescription: '',
+    initFormGroup() {
+        this.questionFormGroup = new FormGroup({
+            selectedTopics: new FormControl<string[] | null>([]),
+            selectedDifficulty: new FormControl<Difficulty[] | null>([]),
+            textTitle: new FormControl<string | null>(''),
+            textDescription: new FormControl<string | null>(''),
+        });
+    }
+
+    initDifficulties() {
+        this.difficulties = [
+            { label: DifficultyLevels.EASY, value: DifficultyLevels.EASY },
+            { label: DifficultyLevels.MEDIUM, value: DifficultyLevels.MEDIUM },
+            { label: DifficultyLevels.HARD, value: DifficultyLevels.HARD },
+        ];
+    }
+
+    initQuestion() {
+        this.question = {
+            id: -1,
+            title: '',
+            topics: [],
+            description: '',
+            difficulty: '',
+        };
+    }
+
+    handleAddQuestionResponse() {
+        this.questionService.addQuestion(this.question).subscribe({
+            next: (response: SingleQuestionResponse) => {
+                if (this.questions) {
+                    this.questions = [...this.questions, response.data];
+                }
+            },
+            error: (error: Error) => {
+                console.log(error);
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'Failed to add new question. Please try again later.',
+                    life: 3000,
+                });
+            },
+            complete: () => {
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Successful',
+                    detail: 'New Question Added',
+                    life: 3000,
+                });
+            },
+        });
+    }
+
+    handleDeleteQuestionResponse() {
+        const deleteRequests = this.selectedQuestions?.map(q => this.questionService.deleteQuestion(q.id));
+
+        forkJoin(deleteRequests!).subscribe({
+            next: () => {
+                // delete locally
+                this.questions = this.questions?.filter(val => !this.selectedQuestions?.includes(val));
+                this.selectedQuestions = null;
+            },
+            error: () => {
+                // 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.',
+                    life: 3000,
+                });
+            },
+            complete: () => {
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Successful',
+                    detail: 'Question(s) Deleted',
+                    life: 3000,
+                });
+            },
+        });
+    }
+
+    handleEditQuestionResponse(id: number, question: QuestionBody) {
+        this.questionService.updateQuestion(id, question).subscribe({
+            next: (response: SingleQuestionResponse) => {
+                this.questions[this.questions.findIndex(x => x.id == id)] = response.data;
+            },
+            error: (error: Error) => {
+                console.log(error);
+                console.log(question);
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'Failed to edit question. Please try again later.',
+                    life: 3000,
+                });
+            },
+            complete: () => {
+                this.messageService.add({
+                    severity: 'success',
+                    summary: 'Successful',
+                    detail: 'Question has been updated successfully',
+                    life: 3000,
+                });
+            },
+        });
+    }
+
+    handleInitData() {
+        forkJoin({
+            questions: this.questionService.getQuestions(),
+            topics: this.questionService.getTopics(),
+        }).subscribe({
+            next: results => {
+                this.questions = results.questions.data || [];
+                this.topics =
+                    results.topics.data?.map(topic => ({
+                        label: topic,
+                        value: topic,
+                    })) || [];
+            },
+            error: (error: Error) => {
+                console.error(error);
+                this.questions = [];
+                this.topics = [];
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'Failed to load data. Please try again later.',
+                    life: 3000,
+                });
+            },
+            complete: () => {
+                // TODO: add loading state for this
+                console.log('complete');
+            },
         });
     }
 }