added posts to profile page

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

@@ -1,4 +1,5 @@
 <div id="profile-page">
+    <div id="profilecontainer" *ngIf="!profileNotFound && !loading">
         <mat-toolbar color="primary" id="toolbar">
             <mat-toolbar-row>
                 <div class="profile-picture"></div>
@@ -15,52 +16,10 @@
                 <span id="info">{{rankname}} ({{userProfile.points}} points)</span>
             </mat-toolbar-row>
         </mat-toolbar>
+        <div id="postlist">
             <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
+        </div>
         <div id="profile">
-        <div id="profilecontainer" [hidden]="profileNotFound">
-            <!--<div id="profile-card-container">
-            <mat-card class="mat-elevation-z8">
-                <mat-card-header>
-                    <div mat-card-avatar class="profile-picture"></div>
-                    <mat-card-title>{{userProfile.username}}</mat-card-title>
-                    <mat-card-subtitle>{{userProfile.handle}}</mat-card-subtitle>
-                    
-                </mat-card-header>
-                <mat-card-content>
-                    <table id="profile-table">
-                        <tr>
-                            <div class="mat-header-cell">name: </div>
-                            <td>{{userProfile.username}}</td>
-                        </tr>
-                        <mat-divider></mat-divider>
-                        <tr>
-                            <div class="mat-header-cell">handle: </div>
-                            <td>{{userProfile.handle}}</td>
-                        </tr>
-                        <mat-divider></mat-divider>
-                        <tr>
-                            <div class="mat-header-cell">profileID: </div>
-                            <td>{{userProfile.userID}}</td>
-                        </tr>
-                        <mat-divider></mat-divider>
-                        <tr>
-                            <div class="mat-header-cell">points: </div>
-                            <td>{{userProfile.points}}</td>
-                        </tr>
-                        <mat-divider></mat-divider>
-                        <tr>
-                            <div class="mat-header-cell">level: </div>
-                            <td>{{userProfile.level}}</td>
-                        </tr>
-                        <mat-divider></mat-divider>
-                        <tr>
-                            <div class="mat-header-cell">level name: </div>
-                            <td>{{rankname}}</td>
-                        </tr>
-                    </table>
-                </mat-card-content>
-            </mat-card>
-            </div>-->
                 <br>
                 <h1>What does the level mean?</h1>
                     <p>There are different levels you can reach through green behaviour.
@@ -116,9 +75,11 @@
                         </tr>
                     </table>-->
         </div>
+    </div>
     <div id="profilecontainer" *ngIf="profileNotFound">
         <h1>Profile not found :(</h1>
     </div>
+    <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
 </div>
-</div>
+
   

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

@@ -24,10 +24,12 @@
   margin-bottom: 0.5em
   margin-left: auto
 #toolbar
-  margin-top: 25px
+  margin-top: 32px
+  .mat-toolbar-row
+    max-height: 40px
   
 #username
-  margin: 0.5em
+  margin: 0 0.5em
 #handle
   font-size: 14px
 #info
@@ -55,16 +57,7 @@ $mat-card-header-size: 100px !default
 
 
 
-#profile-table
+#postlist
-  width: 100%
+  margin: 0.5em auto
-  .mat-table 
-    display: block
-  .mat-cell,
-  .mat-header-cell 
-    align-items: center
-    display: flex
-    min-height: 48px
   padding: 0
-    flex: 1
+  max-width: 690px
-    overflow: hidden
-    word-wrap: break-word

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

@@ -1,15 +1,14 @@
 import { Component, OnInit, ViewChild} from '@angular/core';
 import {Router, NavigationEnd} from '@angular/router';
-import {Http, URLSearchParams, Headers} from '@angular/http';
 import { User } from 'src/app/models/user';
 import { Actionlist } from 'src/app/models/actionlist';
 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';
-import { FeedService } from 'src/app/services/feed/feed.service';
+import { ProfileService } from 'src/app/services/profile/profile.service';
+import { runInThisContext } from 'vm';
 
 @Component({
   selector: 'app-profile',
@@ -31,16 +30,20 @@ export class ProfileComponent implements OnInit {
   displayedLevelColumns = ['level', 'name'];
   levelSource = this.levellist.levels;
 
+  loading = false;
+
   constructor(
     private router: Router,
-    private http: Http,
     private requestService: RequestService,
-    private data: DatasharingService) {
+    private data: DatasharingService,
+    private profileService: ProfileService) {
       router.events.forEach((event) => {
         // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page)
         if (event instanceof NavigationEnd) {
-          if (this.id !== this.router.url.substr(this.router.url.lastIndexOf('/') + 1) && this.id) {
+          const possibleID = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
+          if (this.id !== possibleID && this.id && this.router.url.includes('profile/')) {
             // reload the user
+            console.log('search for user id: ' + this.router.url.substr(this.router.url.lastIndexOf('/') + 1));
             this.ngOnInit();
           }
         }
@@ -49,66 +52,31 @@ export class ProfileComponent implements OnInit {
 
   @ViewChild(MatSort, {static: true}) sort: MatSort;
   ngOnInit() {
+    this.loading = true;
     this.dataSource.sort = this.sort;
     this.id = this.router.url.substr(this.router.url.lastIndexOf('/') + 1);
-    // let url = './graphql'
-    const url = environment.graphQLUrl;
-    const headers = new Headers();
-    headers.set('Content-Type', 'application/json');
-
-    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;
     });
-  }
+    if (this.self.loggedIn) {
-
+      this.profileService.getUserDataBySelfId(this.id, this.self.userID.toString());
-  public updateUserInfo(response: any) {
-    if (response.data.getUser != null) {
-      this.profileNotFound = false;
-      this.userProfile.loggedIn = true;
-      this.userProfile.userID = response.data.getUser.id;
-      this.userProfile.username = response.data.getUser.name;
-      this.userProfile.handle = response.data.getUser.handle;
-      this.userProfile.points = response.data.getUser.points;
-      this.userProfile.level = response.data.getUser.level;
-      this.userProfile.posts = response.data.getUser.posts;
-      this.rankname = this.levellist.getLevelName(this.userProfile.level);
-      // tslint:disable-next-line:max-line-length
-      this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(response.data.getUser.id, this.self);
     } else {
-      this.profileNotFound = true;
+      this.profileService.getUserData(this.id);
     }
+    this.profileService.proflile.subscribe(response =>
+      {
+        if (response) {
+          this.userProfile = response;
+          // tslint:disable-next-line:max-line-length
+          this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
+          this.rankname = this.levellist.getLevelName(this.userProfile.level);
+        } else { this.profileNotFound = true; }
+        this.loading = false;
+      });
   }
 
   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){
-        id
-        handle
-        name
-        profilePicture
-        points
-        level
-        friendCount
-        friends{
-          id
-        }
-        posts{
-          content
-        }
-      }
-    }`, variables: {
-        userId: this.id
-      }};
-    return body;
-  }
 }

src/app/services/profile/profile.service.spec.ts

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

src/app/services/profile/profile.service.ts

@@ -0,0 +1,138 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Post } from 'src/app/models/post';
+import { Author } from 'src/app/models/author';
+import { environment } from 'src/environments/environment';
+import { User } from 'src/app/models/user';
+import { Observable, Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProfileService {
+
+  public proflile:Subject<any> = new Subject();
+
+  constructor(private http: Http) { }
+
+  public getUserData(userId: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    //return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)));
+    this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)).subscribe(result => {
+      //push onto subject
+      this.proflile.next(this.renderProfile(result.json()));
+      return this.proflile;
+    });
+  }
+
+  public getUserDataBySelfId(userId: string, selfId: string) {
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    //return this.renderProfile(this.http.post(environment.graphQLUrl, this.buildGetProfileJson(userId)));
+    this.http.post(environment.graphQLUrl, this.buildGetProfileJsonBySelfId(userId, selfId)).subscribe(result => {
+      //push onto subject
+      this.proflile.next(this.renderProfile(result.json()));
+      return this.proflile;
+    });
+  }
+
+
+  public buildGetProfileJson(id: string): any {
+    const body =  {query: `query($userId: ID) {
+      getUser(userId:$userId){
+        id
+        handle
+        name
+        profilePicture
+        points
+        level
+        friendCount
+        friends{
+          id
+        }
+        posts{
+          id,
+          content,
+          htmlContent,
+          upvotes,
+          downvotes,
+          author{
+            name,
+            handle,
+            id},
+          createdAt
+        }
+      }
+    }`, variables: {
+        userId: id
+      }};
+    return body;
+  }
+
+  public buildGetProfileJsonBySelfId(id: string, selfId: string): any {
+    const body =  {query: `query($userId: ID, $selfId: ID!) {
+      getUser(userId:$userId){
+        id
+        handle
+        name
+        profilePicture
+        points
+        level
+        friendCount
+        friends{
+          id
+        }
+        posts{
+          id,
+          content,
+          htmlContent,
+          upvotes,
+          downvotes,
+          userVote(userId: $selfId),
+          deletable(userId: $selfId)
+          author{
+            name,
+            handle,
+            id},
+          createdAt
+        }
+      }
+    }`, variables: {
+        userId: id,
+        selfId: selfId
+      }};
+    return body;
+  }
+
+  public renderProfile(response: any): User {
+    console.log(response);
+    const posts = new Array<Post>();
+    const profile = new User();
+    if (response.data.getUser != null) {
+
+      profile.userID = response.data.getUser.id;
+      profile.username = response.data.getUser.name;
+      profile.handle = response.data.getUser.handle;
+      profile.points = response.data.getUser.points;
+      profile.level = response.data.getUser.level;
+      for (const post of response.data.getUser.posts) {
+        const id: number = post.id;
+        const content: string = post.content;
+        const htmlContent: string = post.htmlContent;
+        const upvotes: number = post.upvotes;
+        const downvotes: number = post.downvotes;
+        const userVote: string = post.userVote;
+        const deletable: boolean = post.deletable;
+        const author = new Author(post.author.id, post.author.name, post.author.handle);
+        const temp = new Date(Number(post.createdAt));
+        const date = temp.toLocaleString('en-GB');
+        posts.push(new Post(id, content, htmlContent, upvotes, downvotes, userVote, deletable, date, author));
+      }
+      profile.posts = posts;
+      console.log(profile);
+      return profile;
+    }
+    return null;
+  }
+}