Implemented adding and removing friends from user interface

4 files changed, 103 insertions, 5 deletions

diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css
index 650b640..7a825c6 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.css
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css
@@ -64,6 +64,13 @@ hr {
   margin-bottom: auto;
 }
 
+#add-friend {
+  flex: 0 !important;
+  margin-top: .4em;
+  max-width: 9em;
+  font-size: .7em !important;
+}
+
 /* Languages and technologies */
 
 .secondary-info {
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html
index 03a36bf..3420f86 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -3,9 +3,9 @@
 <div id="content" *ngIf="dataArrived">
 	<nav id="navigation">
 		<button class="submit-btn" (click)="goBack()">ᐊ Back</button>
-		<button class="submit-btn" (click)="navigateToSettings()" *ngIf="loggedInUser">Settings</button>
-		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="loggedInUser && isAdminUser">Panel</button>
-		<button class="submit-btn" (click)="logout()" *ngIf="loggedInUser">Logout</button>
+		<button class="submit-btn" (click)="navigateToSettings()" *ngIf="isTheLoggedInUser">Settings</button>
+		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isTheLoggedInUser && isAdminUser">Panel</button>
+		<button class="submit-btn" (click)="logout()" *ngIf="isTheLoggedInUser">Logout</button>
 	</nav>
 	<hr>
 	<div class="scroll-standalone" (scroll)="onScroll($event)">
@@ -18,6 +18,7 @@
 				<div id="username">
 					@{{ user.userName }}
 				</div>
+				<button id="add-friend" class="submit-btn" *ngIf="!isTheLoggedInUser && isUserLoggedIn" (click)="modifyFriend()">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
 			</div>
 		</div>
 		<div class="secondary-info rounded-border">
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.ts b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
index 7e31804..f364c0d 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
@@ -11,6 +11,7 @@ import { Post } from 'src/models/post';
 import { FeedService } from 'src/app/services/feed.service';
 import { TokenService } from 'src/app/services/token.service';
 import { Title } from '@angular/platform-browser';
+import { Friend } from 'src/models/identity/friend';
 
 @Component({
   selector: 'app-profile',
@@ -22,9 +23,11 @@ export class ProfileComponent implements OnInit {
   private _urlUsername: string;
   private _timeLoaded: string;
   private _currentPage: number;
-  public loggedInUser = false;
+  public isTheLoggedInUser = false;
+  public isUserLoggedIn = false;
   public isAdminUser = false;
   public dataArrived = false;
+  public friendOfUser = false;
   public user: User;
   public userPosts: Post[];
 
@@ -100,14 +103,18 @@ export class ProfileComponent implements OnInit {
 
   private finishUserLoading(): void {
     if (sessionStorage.getItem('UserCred')) {
+      this.isUserLoggedIn = true;
       const userFromToken: User = this._userService.getDefaultUser();
 
       this._userService.getUserFromSessionStorageRequest().subscribe(
         (tokenRes: object) => {
           Object.assign(userFromToken, tokenRes);
 
+          if (userFromToken.friends.map(x => x.userName).includes(this._urlUsername)) {
+            this.friendOfUser = true;
+          }
           if (userFromToken.userName === this._urlUsername) {
-            this.loggedInUser = true;
+            this.isTheLoggedInUser = true;
           }
           this.dataArrived = true;
           this.isAdminUser = this.user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME);
@@ -143,10 +150,48 @@ export class ProfileComponent implements OnInit {
     this._router.navigate([this._router.url]);
   }
 
+  modifyFriend(): void {
+    this.dataArrived = false;
+    if (this.friendOfUser) {
+      this.removeFriend();
+    }
+    else {
+      this.addFriend();
+    }
+  }
+
+  removeFriend(): void {
+    this._userService.removeFriendFromUserFromSessionStorageRequest(this._urlUsername).subscribe(
+      (result: object) => {
+        this.reloadPage();
+      },
+      (err: HttpErrorResponse) => {
+        this._router.navigate(['/']);
+      }
+    );
+  }
+
+  addFriend(): void {
+    this._userService.addFriendToUserFromSessionStorageRequest(this._urlUsername).subscribe(
+      (result: object) => {
+        this.reloadPage();
+      },
+      (err: HttpErrorResponse) => {
+        this._router.navigate(['/']);
+      }
+    );
+  }
+
   onScroll(event: any): void {
     // Detects when the element has reached the bottom, thx https://stackoverflow.com/a/50038429/12036073
     if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight && this._currentPage > 0) {
       this.loadPosts();
     }
   }
+
+  private reloadPage(): void {
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
 }
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 422d7db..85c5612 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -29,6 +29,13 @@ export class UserService {
     return this.getUserRequest(userId, token);
   }
 
+  addFriendToUserFromSessionStorageRequest(newFriendUserName: string): Observable<object> {
+    const userUserName = this._tokenService.getUsernameFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.addFriendToUserRequest(userUserName, token, newFriendUserName);
+  }
+
   putUserFromSessionStorageRequest(updateUserFormGroup: FormGroup, userRoles: Role[], userFriends: Friend[]): Observable<object> {
     const userId = this._tokenService.getUserIdFromSessionStorageToken();
     const token = this._tokenService.getTokenFromSessionStorage();
@@ -50,6 +57,14 @@ export class UserService {
     return this.deleteUserRequest(userId, token);
   }
 
+  removeFriendFromUserFromSessionStorageRequest(friendToRemoveUserName: string): Observable<object> {
+    const userUserName = this._tokenService.getUsernameFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.removeFriendFromUserRequest(userUserName, token, friendToRemoveUserName);
+  }
+
+
   /* User requests */
 
   loginUserRequest(loginUserFormGroup: FormGroup): Observable<object> {
@@ -71,6 +86,17 @@ export class UserService {
     return this._http.post(AppConstants.API_USER_REGISTER_URL, body);
   }
 
+  addFriendToUserRequest(userUserName: string, authToken: string, newFriendUserName: string): Observable<object> {
+    const body = {
+      newFriendUserName: newFriendUserName
+    };
+    const options = {
+      params: new HttpParams().set('UserName', userUserName),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.put(AppConstants.API_USER_URL + '/AddFriend', body, options);
+  }
+
   getUserRequest(userId: Guid, authToken: string): Observable<object> {
     const options = {
       params: new HttpParams().set('Id', userId.toString()),
@@ -105,6 +131,14 @@ export class UserService {
     return this._http.put(AppConstants.API_USER_URL, body, options);
   }
 
+  putBareUserRequest(userId: Guid, authToken: string, user: User): Observable<object> {
+    const options = {
+      params: new HttpParams().set('Id', userId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.put(AppConstants.API_USER_URL, user, options);
+  }
+
   putProfilePictureRequest(userId: Guid, authToken: string, newPicture: File): Observable<object> {
     const form = new FormData();
     form.append('picture', newPicture);
@@ -122,4 +156,15 @@ export class UserService {
     };
     return this._http.delete(AppConstants.API_USER_URL, options);
   }
+
+ removeFriendFromUserRequest(userUserName: string, authToken: string, friendToRemoveUserName: string): Observable<object> {
+    const body = {
+      friendUserNameToRemove: friendToRemoveUserName
+    };
+    const options = {
+      params: new HttpParams().set('UserName', userUserName),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.post(AppConstants.API_USER_URL + '/RemoveFriend', body, options);
+  }
 }