feat: respondFriendReq implemented and toastr incorporated

angular.json

@@ -31,7 +31,8 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": []
           },
@@ -95,7 +96,8 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/ngx-toastr/toastr.css"
             ],
             "scripts": []
           }

package.json

@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.0",
+    "@angular/animations": "^16.2.12",
     "@angular/cdk": "^16.2.14",
     "@angular/common": "^16.0.0",
     "@angular/compiler": "^16.0.0",
@@ -22,6 +22,7 @@
     "@angular/router": "^16.0.0",
     "@types/socket.io-client": "^3.0.0",
     "is-chess": "^1.0.2",
+    "ngx-toastr": "^19.0.0",
     "rxjs": "~7.8.0",
     "socket.io-client": "^4.7.5",
     "tslib": "^2.3.0",

src/app/app.module.ts

@@ -23,6 +23,7 @@ import {MatButtonModule} from '@angular/material/button';
 import { SocialComponent } from './pages/social/social.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { InboxComponent } from './components/inbox/inbox.component';
+import { ToastrModule } from 'ngx-toastr';
 @NgModule({
   declarations: [
     AppComponent,
@@ -49,7 +50,8 @@ import { InboxComponent } from './components/inbox/inbox.component';
     ReactiveFormsModule,
     MatIconModule,
     MatButtonModule,
-    MatDialogModule
+    MatDialogModule,
+    ToastrModule.forRoot(),
   ],
   providers: [ApiService],
   bootstrap: [AppComponent]

src/app/components/inbox/inbox.component.html

@@ -1,5 +1,14 @@
 <h2 mat-dialog-title>Modal Title</h2>
 <mat-dialog-content>
+  <div *ngFor="let friendReq of cs.getFriendRequestList" class="flex flex-column">
+    <h2>{{friendReq.sender | titlecase}}</h2>
+    <span>Sent on: {{friendReq.date | date}}</span>
+    <span>Status: {{friendReq.status}}</span>
+    <div class="flex flex-row my-2">
+      <button class="btn btn-success mx-2" (click)="respondFriendReq('accept', friendReq.sender_id)">Accept</button>
+      <button class="btn btn-danger" (click)="respondFriendReq('decline', friendReq.sender_id)">Decline</button>
+    </div>
+  </div>
   </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Close</button>

src/app/components/inbox/inbox.component.ts

@@ -1,5 +1,8 @@
 import { Component, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ApiService } from 'src/app/services/api.service';
+import { CommonService } from 'src/app/services/common.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-inbox',
@@ -10,11 +13,46 @@ export class InboxComponent {
 
   constructor(
     public dialogRef: MatDialogRef<InboxComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public apiServ: ApiService,
+    public cs: CommonService,
+    private toastr: ToastrService
   ) { }
 
+  ngOnInit(){
+    if(this.cs.IsUndefinedOrNull(this.cs.getFriendRequestList)){
+      this.apiServ.gets('social/getPendingFriendRequests').subscribe({
+        next: (response) => {
+          console.log(response);
+          this.cs.getFriendRequestList = response;
+        },
+        error: (error) => console.error(error)
+      })
+    }
+  }
+
   onNoClick(): void {
     this.dialogRef.close();
   }
 
+  respondFriendReq(action: string, sender_id: string){
+    const body = {
+      responseToId: sender_id,
+      action: action
+    }
+    this.apiServ.posts('social/respondFriendRequest', body).subscribe({
+      next: (response) => {
+        let status = response.status
+        switch(status){
+          case 'accept': this.toastr.success('Friend Request Accepted'); break;
+          case 'decline': this.toastr.error('Friend Request Declined'); break;
+          default: this.toastr.warning('Invalid response')
+        }
+      },
+      error: (error) => console.error(error)
+    })
+
+    this.onNoClick();
+  }
+
 }

src/app/models/FriendRequest.ts

@@ -0,0 +1,9 @@
+export interface FriendRequest{
+    friend_req_id: string,
+    sender_id: string
+    receiver_id: string
+    sender: string
+    receiver: string
+    status: string
+    date: Date
+}

src/app/services/common.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { User } from '../models/User';
+import { FriendRequest } from '../models/FriendRequest';
 
 @Injectable({
   providedIn: 'root'
@@ -10,5 +11,10 @@ export class CommonService {
   socialLoaded: boolean = false;
   friendsList: User[] = [];
   getUser!: User;
+  getFriendRequestList: FriendRequest[] = [];
   constructor() { }
+
+  IsUndefinedOrNull(data: any){
+    return (data == null || data == undefined || data == '' || data.length == 0);
+  }
 }