Refactor Search Service

- Move the request part to the service
- Switch to @angular/common/http because  @angular/http is deprecated

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

@@ -18,13 +18,12 @@ export class SearchComponent implements OnInit {
   searchValue = ' ';
   category = 'user';
   user: User;
-  foundUsers: Array<User> = new Array();
+  foundUsers: User[] = [];
-  foundGroups: Array<GroupInfo> = new Array();
+  foundGroups: GroupInfo[] = [];
 
   constructor(
     private searchService: SearchService,
     private requestService: RequestService,
-    private http: Http,
     private router: Router,
     private data: DatasharingService) { }
   ngOnInit() {
@@ -46,19 +45,16 @@ export class SearchComponent implements OnInit {
         this.loading = true;
         this.findUser(searchWord);
       } else if (this.category === 'groupe') {
-        // this.findUserByHandle(searchWord);
         console.log('search group');
       }
     }
   }
 
-  findUser(name: String) {
+  findUser(name: string) {
-    const headers = new Headers();
+    this.searchService.search(name)
-    headers.set('Content-Type', 'application/json');
-    this.http.post(environment.graphQLUrl, this.searchService.buildJsonUser(name))
       .subscribe(response => {
-        this.foundUsers = this.searchService.renderUsers(response.json());
+        this.foundUsers = this.searchService.getUsersForResponse(response);
-        this.foundGroups = this.searchService.renderGroups(response.json());
+        this.foundGroups = this.searchService.getGroupsForResponse(response);
         for (const foundUser of this.foundUsers) {
           foundUser.allowedToSendRequest = this.requestService.isAllowedToSendRequest(foundUser.userID, this.user);
         }

src/app/models/interfaces/IGroup.ts

@@ -0,0 +1,20 @@
+import {IUser} from './IUser';
+
+export interface IGroup {
+
+  id: number;
+
+  name: string;
+
+  creator: IUser;
+
+  admins: IUser[];
+
+  members: IUser[];
+
+  chat: any;
+
+  events: any;
+
+  joined: boolean;
+}

src/app/models/interfaces/ISearchResult.ts

@@ -0,0 +1,12 @@
+import {IUser} from './IUser';
+import {IGroup} from './IGroup';
+
+export interface ISearchResult {
+  users: IUser[];
+
+  groups: IGroup[];
+
+  posts: any[];
+
+  events: any[];
+}

src/app/models/interfaces/IUser.ts

@@ -0,0 +1,36 @@
+import {IGroup} from './IGroup';
+
+export interface IUser {
+
+  id: number;
+
+  name: string;
+
+  handle: string;
+
+  profilePicture?: string;
+
+  level: number;
+
+  points: number;
+
+  numberOfPosts: number;
+
+  postCount: number;
+
+  posts: any[];
+
+  joinedAt: Date;
+
+  friendCount: number;
+
+  friends: IUser[];
+
+  groupCount: number;
+
+  groups: IGroup[];
+
+  eventCount: number;
+
+  events: any[];
+}

src/app/services/base.service.ts

@@ -0,0 +1,16 @@
+import {Injectable} from '@angular/core';
+import {HttpHeaders} from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export abstract class BaseService {
+  protected headers: HttpHeaders;
+
+  protected constructor() {
+    this.headers = new HttpHeaders();
+    this.headers.set('Content-Type', 'application/json');
+  }
+
+  abstract buildRequestBody(...params: any): any;
+}

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

@@ -1,71 +1,109 @@
 import {Injectable} from '@angular/core';
-import {Headers, Http} from '@angular/http';
+import {HttpClient} from '@angular/common/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 { User } from 'src/app/models/user';
+import {GroupInfo} from 'src/app/models/groupinfo';
-import { GroupInfo } from 'src/app/models/groupinfo';
+import {Observable} from 'rxjs';
+import {ISearchResult} from '../../models/interfaces/ISearchResult';
+import {environment} from '../../../environments/environment';
+import {BaseService} from '../base.service';
+import {tap} from 'rxjs/operators';
+
+interface ISearchRequestResult {
+  data: {
+    search: ISearchResult;
+  };
+}
+
+const graphqlQuery = `query($query: String!, $first: Int, $offset: Int) {
+  search(query:$query, first: $first, offset: $offset) {
+    users{
+      profilePicture,
+      name,
+      id,
+      handle,
+      points,
+      level,
+      friends {
+      id
+      }
+    }
+    groups{
+      id
+      name
+      creator{id name handle}
+      members{id name handle}
+    }
+  }
+}`;
 
 @Injectable({
   providedIn: 'root'
 })
-export class SearchService {
+export class SearchService extends BaseService {
 
-  users:  Array<User>;
+  users:  User[];
-  constructor(private http: Http, private data: DatasharingService, private router: Router) {
+  constructor(private http: HttpClient, private data: DatasharingService, private router: Router) {
+    super();
   }
 
-  public renderUsers(pResponse: any): Array<User> {
+  /**
+   * Maps the users in the response to the user class
+   * @param response
+   */
+  public getUsersForResponse(response: ISearchRequestResult): User[] {
     const users = new Array<User>();
-      for (const user of pResponse.data.search.users) {
+      for (const foundUser of response.data.search.users) {
-        const pUser = new User();
+        const user = new User();
-        pUser.profilePicture = user.profilePicture;
+        user.profilePicture = foundUser.profilePicture;
-        pUser.username = user.name;
+        user.username = foundUser.name;
-        pUser.userID = user.id;
+        user.userID = foundUser.id;
-        pUser.handle = user.handle;
+        user.handle = foundUser.handle;
-        pUser.points = user.points;
+        user.points = foundUser.points;
-        pUser.level = user.level;
+        user.level = foundUser.level;
-        pUser.friends = user.friends;
+        // @ts-ignore
-        users.push(pUser);
+        user.friends = foundUser.friends;
+        users.push(user);
       }
       return users;
   }
 
-  public renderGroups(pResponse: any): Array<GroupInfo> {
+  /**
+   * Maps the groups in the response to the group class
+   * @param response
+   */
+  public getGroupsForResponse(response: ISearchRequestResult): Array<GroupInfo> {
     const groups = new Array<GroupInfo>();
-      for (const group of pResponse.data.search.groups) {
+      for (const group of response.data.search.groups) {
         groups.push(new GroupInfo(group.id, group.name));
       }
       return groups;
   }
 
-  public buildJsonUser(name_: String): any {
+  /**
-    const body = {
+   * Searches for users, groups, events and posts with a specified query.
-      query: `query($name: String!) {
+   * @param query
-        search(query:$name, first: 100, offset: 0) {
+   */
-          users{
+  public search(query: string): Observable<ISearchRequestResult> {
-            profilePicture,
+    const body = this.buildRequestBody(query);
-            name,
+    return this.http.post<ISearchRequestResult>(environment.graphQLUrl, body, {headers: this.headers})
-            id,
+  }
-            handle,
+
-            points,
+  /**
-            level,
+   * Builds the body for the request
-            friends {
+   * @param query - the search query
-            id
+   * @param first - the limit of elements to fetch
-            }
+   * @param offset - offset
-          }
+   */
-          groups{
+  private buildRequestBody(query: String, first: number = 20, offset: number = 0): any {
-            id
+    return {
-            name
+      query: graphqlQuery,
-            creator{id name handle}
+      variables: {
-            members{id name handle}
+        query,
-          }
+        first,
-        }
+        offset
-      }`
-      , variables: {
-        name: name_
       }
     };
-    return body;
   }
 }

tslint.json

@@ -70,7 +70,7 @@
     ],
     "no-misused-new": true,
     "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
+    "no-redundant-jsdoc": false,
     "no-shadowed-variable": true,
     "no-string-literal": false,
     "no-string-throw": true,