Add remove friend functionality

src/app/components/profile/profile.component.html

@@ -53,12 +53,18 @@
         </div>
         <span id="username">{{userProfile.username}}</span>
         <span id="handle">@{{userProfile.handle}}</span>
-        <button mat-icon-button
+        <button mat-icon-button *ngIf="userProfile.allowedToSendRequest"
+          matTooltip="send friend request" matTooltipShowDelay="200"
                 class="request-button"
-                (click)="sendFriendRequest(userProfile)"
-                [disabled]="!userProfile.allowedToSendRequest">
+                (click)="sendFriendRequest(userProfile)">
           <mat-icon>person_add</mat-icon>
         </button>
+        <button mat-icon-button *ngIf="isFriendOfSelf"
+          matTooltip="remove friend" matTooltipShowDelay="200"
+                class="request-button"
+                (click)="removeFriend(userProfile)">
+          <mat-icon>person_add_disabled</mat-icon>
+        </button>
       </mat-toolbar-row>
       <mat-toolbar-row>
         <div class="info-box">

src/app/components/profile/profile.component.ts

@@ -6,6 +6,7 @@ import {RequestService} from 'src/app/services/request/request.service';
 import {DatasharingService} from '../../services/datasharing.service';
 import {ProfileService} from 'src/app/services/profile/profile.service';
 import {HttpClient} from '@angular/common/http';
+import {SocialService} from 'src/app/services/social/social.service';
 import {SelfService} from '../../services/selfservice/self.service';
 import {MatDialog} from '@angular/material';
 import {DialogFileUploadComponent} from './fileUpload/fileUpload.component';
@@ -24,7 +25,7 @@ export class ProfileComponent implements OnInit {
   id: string;
   rankname: string;
   profileNotFound = false;
-
+  isFriendOfSelf = false;
   loading = false;
 
   constructor(
@@ -33,6 +34,7 @@ export class ProfileComponent implements OnInit {
     private requestService: RequestService,
     private data: DatasharingService,
     private profileService: ProfileService,
+    private socialService: SocialService,
     private lightbox: Lightbox,
     public dialog: MatDialog) {
     router.events.forEach((event) => {
@@ -52,6 +54,7 @@ export class ProfileComponent implements OnInit {
     this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
     this.data.currentUser.subscribe(user => {
       this.self = user;
+      this.checkIfUserIsFriend();
     });
     this.profileService.getUserData(this.id);
     this.profileService.proflile.subscribe(response => {
@@ -68,11 +71,29 @@ export class ProfileComponent implements OnInit {
     });
   }
 
+  checkIfUserIsFriend() {
+    this.isFriendOfSelf = false;
+    for (const friend of this.self.friends) {
+      if (friend.id.toString() === this.id) {
+        this.isFriendOfSelf = true;
+        break;
+      }
+    }
+  }
+
   public sendFriendRequest(user: User) {
     user.allowedToSendRequest = false;
     this.requestService.sendFriendRequest(user);
   }
 
+  removeFriend(user: User) {
+    this.socialService.removeFriend(user.userID).subscribe(response => {
+      this.checkIfUserIsFriend();
+      // tslint:disable-next-line:max-line-length
+      this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
+    });
+  }
+
   /**
    * Opens the file upload dialog
    */

src/app/components/social/friends/friends.component.html

@@ -4,15 +4,24 @@
 
 <div id="friendlist">
   <mat-card class="friend-card" *ngFor="let friend of user.friends"
-            [class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
-            tabindex="0"
-            matRipple>
+            [class.selected]="friend === selectedFriend"
+            tabindex="0">
     <mat-card-header>
-      <div mat-card-avatar>
+      <div id="button-box">
+        <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="removeFriend(friend)">
+            <span>remove friend</span>
+          </button>
+        </mat-menu>
+      </div>
+      <div mat-card-avatar (click)="showGroupProfile(group)">
         <img class="profile-picture" [src]="friend.profilePicture"/>
       </div>
-      <mat-card-title>{{friend.name}}</mat-card-title>
-      <mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
+      <mat-card-title (click)="showFriendProfile(friend)">{{friend.name}}</mat-card-title>
+      <mat-card-subtitle (click)="showFriendProfile(friend)">{{friend.rankname}}</mat-card-subtitle>
     </mat-card-header>
   </mat-card>
 </div>

src/app/components/social/friends/friends.component.sass

@@ -12,6 +12,10 @@
   cursor: pointer
   outline: none
   user-select: none
+  #button-box
+    text-align: right
+    margin-left: auto
+    width: auto
 
   ::ng-deep .mat-card-header-text
     margin: 0 24px

src/app/components/social/friends/friends.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {DatasharingService} from 'src/app/services/datasharing.service';
+import {SocialService} from 'src/app/services/social/social.service';
 import {FriendInfo} from 'src/app/models/friendinfo';
 import {Router} from '@angular/router';
 import {User} from 'src/app/models/user';
@@ -12,7 +13,7 @@ import {User} from 'src/app/models/user';
 export class FriendsComponent implements OnInit {
   user: User;
 
-  constructor(private data: DatasharingService, private router: Router) {
+  constructor(private data: DatasharingService, private router: Router, private socialService: SocialService) {
   }
 
   ngOnInit() {
@@ -25,4 +26,8 @@ export class FriendsComponent implements OnInit {
     this.router.navigate(['profile/' + pFriend.id]);
   }
 
+  removeFriend(friend: FriendInfo) {
+    this.socialService.removeFriend(friend.id).subscribe();
+  }
+
 }

src/app/services/datasharing.service.ts

@@ -44,7 +44,18 @@ export class DatasharingService {
     user.friends.push(friend);
     user.friendCount++;
     this.currentUser.next(user);
-}
+  }
+
+  removeFriendFromUser(id: number) {
+    const user: User = this.currentUser.getValue();
+    for (let i = 0; i < user.friends.length; i++) {
+      if (user.friends[i].id === id) {
+        user.friends.splice(i, 1);
+        return;
+      }
+    }
+    this.currentUser.next(user);
+  }
 
   setDarkMode(active: boolean) {
     const user: User = this.currentUser.getValue();

src/app/services/social/social.service.ts

@@ -2,6 +2,8 @@ import {Injectable} from '@angular/core';
 import {environment} from 'src/environments/environment';
 import {HttpClient} from '@angular/common/http';
 import {BaseService} from '../base.service';
+import { tap } from 'rxjs/internal/operators/tap';
+import {DatasharingService} from 'src/app/services/datasharing.service';
 
 const graphqlCreateGroupQuery = `mutation($name: String!) {
   createGroup(name: $name) {
@@ -14,11 +16,12 @@ const graphqlCreateGroupQuery = `mutation($name: String!) {
 })
 export class SocialService extends BaseService {
 
-  constructor(http: HttpClient) {
+  constructor(http: HttpClient,
+    private data: DatasharingService) {
     super(http);
   }
 
-  /**
+   /**
    * Builds the body for a group creation request
    * @param name
    */
@@ -38,4 +41,18 @@ export class SocialService extends BaseService {
     const body = SocialService.buildGroupCreateBody(name);
     return this.postGraphql(body);
   }
+
+  public removeFriend(id: number) {
+    const body = {
+      query: `mutation($id: ID!) {
+      removeFriend(friendId: $id)
+    }`, variables: {
+        id
+      }
+    };
+    return this.postGraphql(body)
+    .pipe(tap(response => {
+      this.data.removeFriendFromUser(id);
+    }));
+  }
 }