Refactor social service

- Add error messages for group creation
- Switch to non-deprecated http module

src/app/components/social/groups/dialog.html

@@ -4,6 +4,7 @@
     <input matInput placeholder="Enter groupname" #name>
   </mat-form-field>
 </div>
+<mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Cancel</button>
   <button mat-button cdkFocusInitial (click)="createGroup(name.value)">Create Group</button>

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

@@ -1,10 +1,13 @@
-import { Component, OnInit } from '@angular/core';
-import { GroupInfo } from 'src/app/models/groupinfo';
+import {Component, OnInit} from '@angular/core';
+import {GroupInfo} from 'src/app/models/groupinfo';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
-import { SocialService } from 'src/app/services/social/social.service';
-import { User } from 'src/app/models/user';
-import { DatasharingService } from 'src/app/services/datasharing.service';
-import { Router } from '@angular/router';
+import {SocialService} from 'src/app/services/social/social.service';
+import {User} from 'src/app/models/user';
+import {DatasharingService} from 'src/app/services/datasharing.service';
+import {Router} from '@angular/router';
+import {GraphQLError} from 'graphql';
+import {IGraphqlError} from '../../../models/interfaces/IGraphqlError';
+import {IErrorResponse} from '../../../models/interfaces/IErrorResponse';
 
 // DIALOG COMPONENT to create groups
 @Component({
@@ -12,22 +15,31 @@ import { Router } from '@angular/router';
   templateUrl: 'dialog.html',
 })
 export class DialogCreateGroupComponent {
+  errorOccurred = false;
+  private errorMessage: string;
 
   constructor(
-    public dialogRef: MatDialogRef<DialogCreateGroupComponent>, private social: SocialService) {}
+    public dialogRef: MatDialogRef<DialogCreateGroupComponent>, private social: SocialService) {
+  }
 
   onNoClick(): void {
     this.dialogRef.close();
   }
 
   createGroup(name: string) {
-    console.log('create groupe ' + name);
     name = name.trim();
     if (name) {
-    this.social.createGroup(name);
-    this.dialogRef.close();
+      this.social.createGroup(name).subscribe(() => {
+        this.dialogRef.close();
+      }, ((error: IErrorResponse) => {
+        this.errorMessage = error.error.errors[0].message;
+        this.errorOccurred = true;
+      }));
+    }
   }
 
+  getErrorMessage() {
+    return this.errorMessage;
   }
 }
 
@@ -39,11 +51,14 @@ export class DialogCreateGroupComponent {
 })
 export class GroupsComponent implements OnInit {
   user: User;
-  constructor(public dialog: MatDialog, private data: DatasharingService, private router: Router) { }
+
+  constructor(public dialog: MatDialog, private data: DatasharingService, private router: Router) {
+  }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
-    this.user = user; });
+      this.user = user;
+    });
   }
 
   public showGroupProfile(group: GroupInfo) {

src/app/services/chat/chat.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import {Http, URLSearchParams, Headers} from '@angular/http';
 import { Chat } from 'src/app/models/chat';
-import { responsePathAsArray } from 'graphql';
 import { Chatmessage } from 'src/app/models/chatmessage';
 import { FriendInfo } from 'src/app/models/friendinfo';
 import { DatasharingService } from '../datasharing.service';
@@ -35,7 +34,7 @@ export class ChatService {
   }
 
   public getAllChatsRaw(): any {
-    const url = 'https://greenvironment.net/graphql';
+    const url = environment.graphQLUrl;
 
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
@@ -63,7 +62,7 @@ export class ChatService {
   public getChatsByIDRaw(pChatIDs: number[]): any {
 
     for (const chatId of pChatIDs) {
-      const url = 'https://greenvironment.net/graphql';
+      const url = environment.graphQLUrl;
 
       const headers = new Headers();
       headers.set('Content-Type', 'application/json');
@@ -142,7 +141,7 @@ export class ChatService {
   }
 
   public getMessagesRaw(pChatID): any {
-    const url = 'https://greenvironment.net/graphql';
+    const url = environment.graphQLUrl;
 
     const headers = new Headers();
     headers.set('Content-Type', 'application/json');
@@ -242,9 +241,9 @@ export class ChatService {
   getBodyForGetAllChats() {
     const body =  {query: `query {
         getSelf {
-          chats(first: 1000, offset: 0) {
+          chats(first: 10, offset: 0) {
             id, members{name, id, level},
-            messages(first: 1000, offset: 0) {
+            messages(first: 10, offset: 0) {
               author {id}, createdAt, content
             }
           }

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

@@ -69,7 +69,7 @@ export class LoginService extends BaseService {
    */
   public login(login: Login) {
     const body = LoginService.buildRequestBody(login);
-    return this.http.post<ILoginRequestResult>(environment.graphQLUrl, body)
+    return this.http.post<ILoginRequestResult>(environment.graphQLUrl, body, {headers: this.headers})
       .pipe(tap(response => {
         const user = new User();
         user.assignFromResponse(response.data.login);

src/app/services/search/search.service.ts

@@ -46,8 +46,6 @@ export class SearchService extends BaseService {
     super();
   }
 
-  users:  User[];
-
   /**
    * Builds the body for the request
    * @param query - the search query

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

@@ -1,9 +1,7 @@
 import { Injectable, EventEmitter, Output } from '@angular/core';
 import {Http, URLSearchParams, Headers} from '@angular/http';
-import { Login } from '../../models/login';
 import { User } from 'src/app/models/user';
 import { DatasharingService } from '../datasharing.service';
-import { userInfo } from 'os';
 import {Router} from '@angular/router';
 import { environment } from 'src/environments/environment';
 import { FriendRequest } from 'src/app/models/friendRequest';

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

@@ -1,37 +1,41 @@
 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';
-import { User } from 'src/app/models/user';
+import {HttpClient} from '@angular/common/http';
+import {BaseService} from '../base.service';
+
+const graphqlCreateGroupQuery = `mutation($name: String!) {
+  createGroup(name: $name) {
+    id
+  }
+}`;
 
 @Injectable({
   providedIn: 'root'
 })
-export class SocialService {
-
-  users:  Array<User>;
-  constructor(private http: Http, private data: DatasharingService, private router: Router) {
-  }
+export class SocialService extends BaseService {
 
-  createGroup(name: string) {
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-    this.http.post(environment.graphQLUrl, this.buildJsonGroup(name)).subscribe(response => {
-        console.log(response.text()); });
+  constructor(private http: HttpClient) {
+    super();
   }
 
-  public buildJsonGroup(name_: String): any {
-    const body = {
-      query: `mutation($name: String!) {
-        createGroup(name: $name) {
-          id
-        }
-      }`
-      , variables: {
-        name: name_
+  /**
+   * Builds the body for a group creation request
+   * @param name
+   */
+  private static buildGroupCreateBody(name: String): any {
+     return {
+      query: graphqlCreateGroupQuery, variables: {
+        name
       }
     };
-    return body;
+  }
+
+  /**
+   * Creates a group
+   * @param name
+   */
+  createGroup(name: string) {
+    const body = SocialService.buildGroupCreateBody(name);
+    return this.http.post(environment.graphQLUrl, body, {headers: this.headers});
   }
 }

src/environments/environment.ts

@@ -7,12 +7,3 @@ export const environment = {
   graphQLUrl: 'https://greenvironment.net/graphql',
   greenvironmentUrl: 'https://greenvironment.net/',
 };
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.