added requests

src/app/components/feed/postlist/postlist.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Post } from 'src/app/models/post';
 import { FeedService } from 'src/app/services/feed/feed.service';
 import { Router } from '@angular/router';
-import { User } from 'src/app/models/user';
 
 @Component({
   selector: 'feed-postlist',

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

@@ -25,13 +25,15 @@
           <div class="name"><span>{{friend.name}}</span></div>
         </div>-->
         <mat-card class="friend-card" *ngFor="let user of foundUsers" 
-        [class.selected]="user === selectedUser" (click)="showUserProfile(user)"
-        tabindex="0"
-        matRipple>
+        [class.selected]="user === selectedUser"
+        tabindex="0">
           <mat-card-header>
-            <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 mat-card-avatar class="profile-picture" (click)="showUserProfile(user)"></div>
+            <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>
+            </div>
           </mat-card-header>
         </mat-card>
     </div>

src/app/components/search/search.component.sass

@@ -19,11 +19,22 @@
   box-sizing: border-box
   width: 100%
   margin-top: 0.5em
-  cursor: pointer
 
   .mat-card-subtitle
     margin: 0
+  .request-button
+    margin-top: 0.5em
+    margin-bottom: 0.5em
 
 .profile-picture
   background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
   background-size: cover
+.profile-picture:hover
+  cursor: pointer
+
+.pointer:hover
+  cursor: pointer
+
+.icon-box
+  text-align: right
+  width: 100%

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

@@ -1,5 +1,6 @@
 import { Component, OnInit} from '@angular/core';
 import { SearchService } from 'src/app/services/search/search.service';
+import { RequestService } from 'src/app/services/request/request.service';
 import {Headers, Http} from '@angular/http';
 import { User } from 'src/app/models/user';
 import {environment} from 'src/environments/environment';
@@ -15,7 +16,11 @@ export class SearchComponent implements OnInit {
   category = 'user';
   foundUsers: Array<User>;
 
-  constructor(private searchService: SearchService, private http: Http, private router: Router) { }
+  constructor(
+    private searchService: SearchService,
+    private requestService: RequestService,
+    private http: Http,
+    private router: Router) { }
   ngOnInit() {
   }
 
@@ -49,8 +54,17 @@ export class SearchComponent implements OnInit {
   }
 
   public showUserProfile(user: User) {
-    console.log(user);
     this.router.navigate(['profile/' + user.userID]);
   }
+
+  public sendFriendRequest(user: User) {
+    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/services/request/request.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RequestService } from './request.service';
+
+describe('RequestService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RequestService = TestBed.get(RequestService);
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+import {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
+import {DatasharingService} from '../datasharing.service';
+import {Router} from '@angular/router';
+import {environment} from 'src/environments/environment';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RequestService {
+
+  constructor(private http: Http, private data: DatasharingService, private router: Router) {
+  }
+
+  public buildJsonRequest(id_: number, type_: String): any {
+    const body = {
+      query: `mutation($id: ID!, $type: RequestType) {
+        sendRequest(receiver: $id, type: $type) {
+          id
+        }
+      }`
+      , variables: {
+        id: id_,
+        type: type_
+      }
+    };
+    return body;
+  }
+}