added friend request button on profile page

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

@@ -8,6 +8,14 @@
                     <div mat-card-avatar class="profile-picture"></div>
                     <mat-card-title>{{user.username}}</mat-card-title>
                     <mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
+                    <div class="icon-box">
+                        <button mat-icon-button 
+                        class="request-button" 
+                        (click)="sendFriendRequest(user)" 
+                        [disabled]="!user.allowedToSendRequest">
+                            <mat-icon>person_add</mat-icon>
+                        </button>
+                    </div>
                 </mat-card-header>
                 <mat-card-content>
                     <table id="profile-table">

src/app/components/profile/profile.component.sass

@@ -16,6 +16,12 @@
   margin: 0 auto
   width: 100%
   max-width: 690px
+  .icon-box
+    text-align: right
+    width: 100%
+    .request-button
+      margin-top: 0.5em
+      margin-bottom: 0.5em
 
 .mat-table
   width: 100%

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

@@ -7,6 +7,8 @@ import { Levellist } from 'src/app/models/levellist';
 import { environment } from 'src/environments/environment';
 import {MatSort} from '@angular/material/sort';
 import {MatTableDataSource} from '@angular/material/table';
+import { RequestService } from 'src/app/services/request/request.service';
+import { DatasharingService } from '../../services/datasharing.service';
 
 @Component({
   selector: 'app-profile',
@@ -18,7 +20,8 @@ export class ProfileComponent implements OnInit {
   actionlist: Actionlist = new Actionlist();
 
   levellist: Levellist = new Levellist();
-  user: User = new User();
+  private user: User = new User();
+  self: User;
   id: string;
   rankname: string;
   profileNotFound = false;
@@ -26,7 +29,12 @@ export class ProfileComponent implements OnInit {
   dataSource = new MatTableDataSource(this.actionlist.Actions);
   displayedLevelColumns = ['level', 'name'];
   levelSource = this.levellist.levels;
-  constructor(private router: Router, private http: Http) { }
+
+  constructor(
+    private router: Router,
+    private http: Http,
+    private requestService: RequestService,
+    private data: DatasharingService) { }
 
   @ViewChild(MatSort, {static: true}) sort: MatSort;
   ngOnInit() {
@@ -37,12 +45,14 @@ export class ProfileComponent implements OnInit {
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
 
-    return this.http.post(url, this.buildJson(this.id))
+    this.http.post(url, this.buildJson(this.id))
       .subscribe(response => {
         console.log(response.text());
         this.updateUserInfo(response.json());
-      }
-      );
+      });
+      this.data.currentUserInfo.subscribe(user => {
+        this.self = user;
+      });
   }
 
   public updateUserInfo(response: any) {
@@ -55,11 +65,17 @@ export class ProfileComponent implements OnInit {
       this.user.points = response.data.getUser.points;
       this.user.level = response.data.getUser.level;
       this.rankname = this.levellist.getLevelName(this.user.level);
+      this.user.allowedToSendRequest = this.requestService.isAllowedToSendRequest(response.data.getUser.id, this.self);
     } else {
       this.profileNotFound = true;
     }
   }
 
+  public sendFriendRequest(user: User) {
+    user.allowedToSendRequest = false;
+    this.requestService.sendFriendRequest(user);
+  }
+
   public buildJson(id: string): any {
     const body =  {query: `query($userId: ID) {
       getUser(userId:$userId){

src/app/components/search/search.component.ts

@@ -57,24 +57,7 @@ export class SearchComponent implements OnInit {
       .subscribe(response => {
         this.foundUsers = this.searchService.renderUsers(response.json());
         for (const foundUser of this.foundUsers) {
-          if (!this.user.loggedIn) {foundUser.allowedToSendRequest = false; } else {
-            for (const receiverID of this.user.sentRequestUserIDs) {
-              if (foundUser.userID === receiverID ||
-                foundUser.userID === this.user.userID) {
-                foundUser.allowedToSendRequest = false;
-              }
-            }
-            for (const friend of this.user.friends) {
-              if (foundUser.userID === friend.id) {
-                foundUser.allowedToSendRequest = false;
-              }
-            }
-            for (const sender of this.user.receivedRequests) {
-              if (foundUser.userID === sender.senderUserID) {
-                foundUser.allowedToSendRequest = false;
-              }
-            }
-          }
+          foundUser.allowedToSendRequest = this.requestService.isAllowedToSendRequest(foundUser.userID, this.user);
         }
         this.loading = false;
       });
@@ -86,11 +69,7 @@ export class SearchComponent implements OnInit {
 
   public sendFriendRequest(user: User) {
     user.allowedToSendRequest = false;
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-    this.http.post(environment.graphQLUrl, this.requestService.buildJsonRequest(user.userID, 'FRIENDREQUEST'))
-      .subscribe(response => {
-      });
+    this.requestService.sendFriendRequest(user);
   }
 }
 

src/app/services/request/request.service.ts

@@ -3,6 +3,7 @@ import {Headers, Http} from '@angular/http';
 import {DatasharingService} from '../datasharing.service';
 import {Router} from '@angular/router';
 import {environment} from 'src/environments/environment';
+import { User } from 'src/app/models/user';
 
 
 @Injectable({
@@ -13,6 +14,36 @@ export class RequestService {
   constructor(private http: Http, private data: DatasharingService, private router: Router) {
   }
 
+  public isAllowedToSendRequest(userID: number, self: User): boolean {
+    if (!self.loggedIn) { return false; } else {
+      for (const receiverID of self.sentRequestUserIDs) {
+        if (userID === receiverID ||
+          userID === self.userID) {
+          return false;
+        }
+      }
+      for (const friend of self.friends) {
+        if (userID === friend.id) {
+          return false;
+        }
+      }
+      for (const sender of self.receivedRequests) {
+        if (userID === sender.senderUserID) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  public sendFriendRequest(user: User) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    this.http.post(environment.graphQLUrl, this.buildJsonRequest(user.userID, 'FRIENDREQUEST'))
+      .subscribe(response => {
+      });
+  }
+
   public buildJsonRequest(id_: number, type_: String): any {
     const body = {
       query: `mutation($id: ID!, $type: RequestType) {