Add error messages when posting failed

src/app/components/feed/feed.component.html

@@ -7,7 +7,7 @@ infinite-scroll
     <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,7 +24,8 @@ 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>

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

@@ -5,6 +5,7 @@ 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;
+  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);
+      this.feedService.createPostActivity(pElement.value, activityId).subscribe(() => {
         pElement.value = '';
-    this.empty = '';
+        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);
+      this.feedService.createPost(pElement.value).subscribe(() => {
         pElement.value = '';
-      this.empty = '';
+        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;
+  }
 }

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 {