requests are disabled if the user already received a request

src/app/app.module.ts

@@ -45,6 +45,7 @@ import { OverlayModule} from '@angular/cdk/overlay';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatRippleModule} from '@angular/material/core';
+import {MatBadgeModule} from '@angular/material/badge';
 
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
@@ -122,7 +123,8 @@ const appRoutes: Routes = [
     MatMenuModule,
     MatRippleModule,
     MatTableModule,
-    MatSortModule
+    MatSortModule,
+    MatBadgeModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/main-navigation/main-navigation.component.html

@@ -57,21 +57,23 @@
       </nav>
       <div id="menu-button-box">
         <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
-          <mat-icon >notifications</mat-icon>
+          <mat-icon [matBadge]="user.receivedRequests.length" matBadgeColor="accent">notifications</mat-icon>
         </button>
         <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-button">
           <mat-icon>more_vert</mat-icon>
         </button>
       </div>
       <mat-menu #requestMenu="matMenu">
-        <button mat-menu-item (click)="$event.stopPropagation();">
-          <button mat-icon-button>
+        <span mat-menu-item disableRipple="true" disabled="true">friend requests:</span>
+        <button mat-menu-item *ngFor = "let request of user.receivedRequests" [class.selected]="request === selectedRequest" (click)="$event.stopPropagation();" disableRipple="true">
+          <button mat-icon-button (click)=acceptRequest(request.id)>
             <mat-icon>check</mat-icon>
           </button>
-          <button mat-icon-button>
+          <button mat-icon-button (click)=denyRequest(request.id)>
             <mat-icon>close</mat-icon>
           </button>
-          <span>request</span>
+          <span>{{request.senderUsername}}</span>
+          <span>&nbsp; @{{request.senderHandle}}</span>
         </button> 
       </mat-menu>
       <mat-menu #menu="matMenu">

src/app/components/main-navigation/main-navigation.component.sass

@@ -26,7 +26,6 @@
   .mat-tab-link
     height: 56px
 
-
 #link-box
   padding: 0.5em
 

src/app/components/main-navigation/main-navigation.component.ts

@@ -102,11 +102,9 @@ export class MainNavigationComponent implements OnInit {
 
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
-
     const body = {query: `mutation {
         logout
       }`};
-
     this.http.post(url, body).subscribe(response => {
         console.log(response.text()); });
     this.loggedIn = false;
@@ -115,4 +113,11 @@ export class MainNavigationComponent implements OnInit {
     this.data.changeUserInfo(user);
     this.router.navigate(['login']);
   }
+
+  acceptRequest(id: number) {
+    console.log('accept request with id: ' + id);
+  }
+  denyRequest(id: number) {
+    console.log('deny request with id: ' + id);
+  }
 }

src/app/components/search/search.component.html

@@ -32,7 +32,7 @@
             <mat-card-title class="pointer" (click)="showUserProfile(user)">{{user.username}}</mat-card-title>
             <mat-card-subtitle class="pointer" (click)="showUserProfile(user)">{{user.handle}}</mat-card-subtitle>
             <div class="icon-box">
-              <button mat-icon-button class="request-button" (click)="sendFriendRequest(user)"><mat-icon>person_add</mat-icon></button>
+              <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>

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

@@ -5,6 +5,7 @@ import {Headers, Http} from '@angular/http';
 import { User } from 'src/app/models/user';
 import {environment} from 'src/environments/environment';
 import { Router } from '@angular/router';
+import { DatasharingService } from '../../services/datasharing.service';
 
 @Component({
   selector: 'home-search',
@@ -14,14 +15,19 @@ import { Router } from '@angular/router';
 export class SearchComponent implements OnInit {
   searchValue = ' ';
   category = 'user';
+  user: User;
   foundUsers: Array<User>;
 
   constructor(
     private searchService: SearchService,
     private requestService: RequestService,
     private http: Http,
-    private router: Router) { }
+    private router: Router,
+    private data: DatasharingService) { }
   ngOnInit() {
+    this.data.currentUserInfo.subscribe(user => {
+      this.user = user;
+    });
   }
 
   changeCategory(value: string) {
@@ -47,9 +53,17 @@ export class SearchComponent implements OnInit {
     headers.set('Content-Type', 'application/json');
     this.http.post(environment.graphQLUrl, this.searchService.buildJsonUser(name))
       .subscribe(response => {
-        console.log('response received');
-        console.log(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;
+              }
+            }
+          }
+        }
       });
   }
 
@@ -58,12 +72,11 @@ 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 => {
-        console.log('response received');
-        console.log(response);
       });
   }
 }

src/app/models/friendRequest.ts

@@ -0,0 +1,8 @@
+import { User } from 'src/app/models/user';
+
+export class FriendRequest {
+    id: number;
+    senderUserID: number;
+    senderHandle: string;
+    senderUsername: string;
+  }

src/app/models/user.ts

@@ -1,5 +1,7 @@
+import { FriendRequest } from 'src/app/models/friendRequest';
+
 export class User {
-  loggedIn: boolean;
+  loggedIn = false;
   userID: number;
   username: string;
   handle: string;
@@ -11,6 +13,8 @@ export class User {
   friendIDs: number[];
   groupIDs: number[];
   chatIDs: number[];
-
-  requestIDs: number[];
+  receivedRequests: FriendRequest[] = new Array();
+  sentRequestUserIDs: number[] = new Array(); // IDs of users that already received requests of the logged in user
+  allowedToSendRequest = true; /* if a user already received a request this should
+  be false to avoid multiple invitations*/
 }

src/app/services/datasharing.service.ts

@@ -15,6 +15,7 @@ export class DatasharingService {
   constructor() { }
 
   changeUserInfo(pUserInfo: User) {
+    console.log('DatasharingService: user info updated');
     this.userInfoSource.next(pUserInfo);
   }
 

src/app/services/login/login.service.ts

@@ -1,10 +1,11 @@
 import {Injectable} from '@angular/core';
-import {Headers, Http} from '@angular/http';
+import {Headers, Http, Request} from '@angular/http';
 import {Login} from '../../models/login';
 import {User} from 'src/app/models/user';
 import {DatasharingService} from '../datasharing.service';
 import {Router} from '@angular/router';
 import {environment} from 'src/environments/environment';
+import { FriendRequest } from 'src/app/models/friendRequest';
 
 @Injectable({
   providedIn: 'root'
@@ -35,6 +36,7 @@ export class LoginService {
 
   public updateUserInfo(response: any) {
     const user: User = new User();
+    let friendRequest: FriendRequest = new FriendRequest();
     user.loggedIn = true;
     user.userID = response.data.login.id;
     user.username = response.data.login.name;
@@ -45,10 +47,19 @@ export class LoginService {
     user.friendIDs = response.data.login.friends;
     user.groupIDs = response.data.login.groups;
     user.chatIDs = response.data.login.chats;
-    user.requestIDs = response.data.login.requests;
-
+    for (const request of response.data.login.sentRequests) {
+      user.sentRequestUserIDs.push(request.receiver.id);
+    }
+    for (const request of response.data.login.receivedRequests) {
+      friendRequest = new FriendRequest();
+      friendRequest.id = request.id;
+      friendRequest.senderUserID = request.sender.id;
+      friendRequest.senderUsername = request.sender.name;
+      friendRequest.senderHandle = request.sender.handle;
+      user.receivedRequests.push(friendRequest);
+    }
+    console.log(user.receivedRequests);
     this.data.changeUserInfo(user);
-
   }
 
   public buildJson(login: Login): any {
@@ -61,6 +72,8 @@ export class LoginService {
           handle,
           points,
           level,
+          receivedRequests{id, sender{name, handle, id}},
+          sentRequests{receiver{id}},
           friends {
            id
           },

src/app/services/register/register.service.ts

@@ -48,7 +48,9 @@ export class RegisterService {
     user.friendIDs = response.data.register.friends;
     user.groupIDs = response.data.register.groups;
     user.chatIDs = response.data.register.chats;
-    user.requestIDs = response.data.register.requests;
+    for (const request of response.data.register.sentRequests) {
+      user.sentRequestUserIDs.push(request.receiver.id);
+    }
 
     this.data.changeUserInfo(user);
 
@@ -62,6 +64,7 @@ export class RegisterService {
         handle,
         points,
         level,
+        sentRequests{receiver{id}}
         friends{id},
         groups{id},
         chats{id}

src/app/services/selfservice/self.service.ts

@@ -53,14 +53,16 @@ export class SelfService {
     user.friendIDs = response.data.getSelf.friends;
     user.groupIDs = response.data.getSelf.groups;
     user.chatIDs = response.data.getSelf.chats;
-    user.requestIDs = response.data.getSelf.requests;
+    for (const request of response.data.getSelf.sentRequests) {
+      user.sentRequestUserIDs.push(request.receiver.id);
+    }
 
     this.data.changeUserInfo(user);
   }
 
   public buildJson(): any {
     const body =  {query: `{
-      getSelf{id, name,email, handle, points, level, friends{id}, groups{id},chats{id}}
+      getSelf{id, name, email, handle, points, level, sentRequests{receiver{id}}, friends{id}, groups{id},chats{id}}
     }`, variables: {
       }};
     return body;

src/styles/greenvironment-material-theme.scss

@@ -9,8 +9,8 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$primary: mat-palette($mat-green);
-$accent:  mat-palette($mat-pink, A200, A100, A400);
+$primary: mat-palette($mat-light-green);
+$accent:  mat-palette($mat-brown, A200, A100, A400);
 $background-color: map_get($mat-grey, 50);
 // The warn palette is optional (defaults to red).
 $warn:    mat-palette($mat-red);
@@ -27,8 +27,8 @@ $light-theme: map_merge($light-theme, (background: $background));
 
 
 
-$dark-primary: mat-palette($mat-green);
-$dark-accent:  mat-palette($mat-pink, A200, A100, A400);
+$dark-primary: mat-palette($mat-light-green);
+$dark-accent:  mat-palette($mat-brown, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
 $dark-warn:    mat-palette($mat-red);