From 0be475e79abc37fe85b648d753207759c35a2de6 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@gmail.com>
Date: Sat, 18 Jan 2020 17:12:12 +0100
Subject: [PATCH] Add error messages when posting failed

---
 src/app/components/feed/feed.component.html | 11 ++--
 src/app/components/feed/feed.component.ts   | 58 ++++++++++++++-------
 src/app/services/feed/feed.service.ts       | 10 ++--
 3 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 8dd1575..dac9442 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -4,10 +4,10 @@ infinite-scroll
 [scrollWindow]="false"
 (scrolled)="onScroll()">
   <div [hidden]="!loggedIn">
-    <mat-card >      
+    <mat-card >
       <mat-card-content>
         <mat-form-field id="input">
-          <textarea matInput #content type="text" [(ngModel)]="empty" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
+          <textarea matInput #content type="text" [(ngModel)]="textInputValue" mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
           <button mat-button matSuffix mat-icon-button>
             <mat-icon>add</mat-icon>
           </button>
@@ -24,14 +24,15 @@ infinite-scroll
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <button mat-raised-button *ngIf="empty" color="primary" id="post-button" (click)=createPost(content,activityId)>
+        <mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error>
+        <button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button" (click)=createPost(content,activityId)>
           POST
         </button>
       </mat-card-content>
     </mat-card>
   </div>
   <div [hidden]="loggedIn">
-    <mat-card id="info">      
+    <mat-card id="info">
       <mat-card-header>
         <mat-card-title >
           You need to <a routerLink="/login" class="primary-color">login</a> to post something.
@@ -55,4 +56,4 @@ infinite-scroll
     </div>
   </div>
 </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index 491b80d..ff21e52 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import { Post } from 'src/app/models/post';
-import { FeedService } from 'src/app/services/feed/feed.service';
-import { Activitylist } from 'src/app/models/activity';
-import { DatasharingService } from '../../services/datasharing.service';
-import { ActivityService } from 'src/app/services/activity/activity.service';
-import { User } from 'src/app/models/user';
+import {Component, OnInit} from '@angular/core';
+import {Post} from 'src/app/models/post';
+import {FeedService} from 'src/app/services/feed/feed.service';
+import {Activitylist} from 'src/app/models/activity';
+import {DatasharingService} from '../../services/datasharing.service';
+import {ActivityService} from 'src/app/services/activity/activity.service';
+import {User} from 'src/app/models/user';
+import {IErrorResponse} from '../../models/interfaces/IErrorResponse';
 
 @Component({
   selector: 'home-feed',
@@ -17,21 +18,25 @@ export class FeedComponent implements OnInit {
 
   checked = false; // if the "I protected the environment."-box is checked
   view = 'new';
-  empty: any;
- // id of the green activity
+  textInputValue: string;
+  // id of the green activity
   value: any;
 
-  parentSelectedPostList: Array<Post>;
+  parentSelectedPostList: Post[];
   actionlist: Activitylist = new Activitylist();
 
   loggedIn = false;
   user: User;
+  errorOccurred: boolean;
+
+  private errorMessage: string;
 
   constructor(
     private feedService: FeedService,
     private data: DatasharingService,
     private activityService: ActivityService
-    ) { }
+  ) {
+  }
 
   ngOnInit() {
     this.data.currentUserInfo.subscribe(user => {
@@ -60,15 +65,23 @@ export class FeedComponent implements OnInit {
 
   createPost(pElement, activityId: string) {
     if (pElement && activityId && this.checked) {
-    this.feedService.createPostActivity(pElement.value, activityId);
-    pElement.value = '';
-    this.empty = '';
-    this.view = 'new';
+      this.feedService.createPostActivity(pElement.value, activityId).subscribe(() => {
+        pElement.value = '';
+        this.textInputValue = '';
+        this.view = 'new';
+      }, (error: IErrorResponse) => {
+        this.errorOccurred = true;
+        this.errorMessage = error.error.errors[0].message;
+      });
     } else if (pElement) {
-      this.feedService.createPost(pElement.value);
-      pElement.value = '';
-      this.empty = '';
-      this.view = 'new';
+      this.feedService.createPost(pElement.value).subscribe(() => {
+        pElement.value = '';
+        this.textInputValue = '';
+        this.view = 'new';
+      }, (error: IErrorResponse) => {
+        this.errorOccurred = true;
+        this.errorMessage = error.error.errors[0].message;
+      });
     }
   }
 
@@ -84,4 +97,11 @@ export class FeedComponent implements OnInit {
   showMostLiked() {
     this.feedService.getPosts('TOP');
   }
+
+  /**
+   * Returns the error message if one exists
+   */
+  getErrorMessage() {
+    return this.errorMessage;
+  }
 }
diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts
index f912f11..dc10fd5 100644
--- a/src/app/services/feed/feed.service.ts
+++ b/src/app/services/feed/feed.service.ts
@@ -5,7 +5,7 @@ import { Author } from 'src/app/models/author';
 import { environment } from 'src/environments/environment';
 import { Activity } from 'src/app/models/activity';
 import { BehaviorSubject } from 'rxjs';
-import { User } from 'src/app/models/user';
+import {tap} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -51,12 +51,12 @@ export class FeedService {
       }`, variables: {
           content: pContent
       }};
-      return this.http.post(environment.graphQLUrl, body).subscribe(response => {
+      return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
         const updatedposts = this.newPosts.getValue();
         updatedposts.unshift(this.renderPost(response));
         this.newPosts.next(updatedposts);
         this.setPost('NEW');
-      });
+      }));
   }
 
   public createPostActivity(pContent: String, activityId: String) {
@@ -88,12 +88,12 @@ export class FeedService {
           content: pContent,
           id: activityId
       }};
-      return this.http.post(environment.graphQLUrl, body).subscribe(response => {
+      return this.http.post(environment.graphQLUrl, body).pipe(tap(response => {
         const updatedposts = this.newPosts.getValue();
         updatedposts.unshift(this.renderPost(response));
         this.newPosts.next(updatedposts);
         this.setPost('NEW');
-      });
+      }));
   }
 
   public upvote(postId: number): any {