From 8ddb1eac87962813157205e29bd781943ce8517e Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 18:15:50 +0100
Subject: [PATCH 1/4] Add loading animation to post media

---
 src/app/components/feed/feed.component.ts                | 2 --
 src/app/components/feed/postlist/postlist.component.html | 7 ++++---
 src/app/components/feed/postlist/postlist.component.ts   | 5 +++++
 src/app/models/post.ts                                   | 2 ++
 src/app/services/feed/feed.service.ts                    | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index ad17f55..2dad603 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -92,7 +92,6 @@ export class FeedComponent implements OnInit {
     } else if (postElement) {
       this.posting = true;
       this.feedService.createPost(postElement.value, this.file).subscribe((result) => {
-        console.log('response in component');
         this.posting = false;
         postElement.value = '';
         this.textInputValue = '';
@@ -104,7 +103,6 @@ export class FeedComponent implements OnInit {
           this.showNew();
         }
       }, (error: IErrorResponse) => {
-        console.log('an error occured in component');
         console.log(error);
         this.posting = false;
         this.errorOccurred = true;
diff --git a/src/app/components/feed/postlist/postlist.component.html b/src/app/components/feed/postlist/postlist.component.html
index 50f13eb..2ffa144 100644
--- a/src/app/components/feed/postlist/postlist.component.html
+++ b/src/app/components/feed/postlist/postlist.component.html
@@ -22,9 +22,10 @@
     </mat-card-subtitle>
   </mat-card-header>
   <mat-card-content>
-    <div class="postMedia">
-      <img *ngIf="post.mediaType === 'IMAGE'" [src]="post.mediaUrl"  alt="post image"/>
-      <video *ngIf="post.mediaType === 'VIDEO'" controls>
+    <mat-spinner *ngIf="post.mediaLoading" style="margin:0 auto; margin-top: 2em;" diameter="50"></mat-spinner>
+    <div class="postMedia" [hidden]="post.mediaLoading">
+      <img *ngIf="post.mediaType === 'IMAGE'" [src]="post.mediaUrl" (load)="onLoad(this.post)" alt="post image"/>
+      <video *ngIf="post.mediaType === 'VIDEO'" (load)="onLoad(this.post)" controls>
         <source [src]="post.mediaUrl" type="video/webm">
       </video>
     </div>
diff --git a/src/app/components/feed/postlist/postlist.component.ts b/src/app/components/feed/postlist/postlist.component.ts
index 4112719..c33fab4 100644
--- a/src/app/components/feed/postlist/postlist.component.ts
+++ b/src/app/components/feed/postlist/postlist.component.ts
@@ -49,6 +49,11 @@ export class PostlistComponent implements OnInit {
     });
   }
 
+  onLoad(post: Post) {
+    console.log('loaded' + post.content);
+    post.mediaLoading = false;
+  }
+
   public showUserProfile(post: any) {
     this.router.navigate(['profile/' + post.author.id]);
   }
diff --git a/src/app/models/post.ts b/src/app/models/post.ts
index 231acb7..91fff08 100644
--- a/src/app/models/post.ts
+++ b/src/app/models/post.ts
@@ -13,6 +13,7 @@ export class Post {
   deletable: boolean;
   author: Author;
   activity: Activity;
+  mediaLoading: boolean;
   mediaUrl: string;
   mediaType: 'VIDEO' | 'IMAGE';
 
@@ -42,6 +43,7 @@ export class Post {
     if (media) {
       this.mediaUrl = environment.greenvironmentUrl + media.url;
       this.mediaType = media.type;
+      this.mediaLoading = true;
     }
   }
 }
diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts
index 15ded07..7b13fd5 100644
--- a/src/app/services/feed/feed.service.ts
+++ b/src/app/services/feed/feed.service.ts
@@ -209,7 +209,7 @@ export class FeedService extends BaseService {
         const updatedPosts = this.posts.getValue();
         if (this.activePostList === Sort.NEW) {
           const post = this.constructPost(response);
-            updatedPosts.unshift(post);
+          updatedPosts.unshift(post);
           this.posts.next(updatedPosts);
         }
       }));

From 708f2d723fb0a03e188c6f48dfc5a6a340d5e5bf Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 18:16:30 +0100
Subject: [PATCH 2/4] Remove comment

---
 src/app/components/feed/postlist/postlist.component.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components/feed/postlist/postlist.component.ts b/src/app/components/feed/postlist/postlist.component.ts
index c33fab4..84e2044 100644
--- a/src/app/components/feed/postlist/postlist.component.ts
+++ b/src/app/components/feed/postlist/postlist.component.ts
@@ -50,7 +50,6 @@ export class PostlistComponent implements OnInit {
   }
 
   onLoad(post: Post) {
-    console.log('loaded' + post.content);
     post.mediaLoading = false;
   }
 

From 8f8a9cf64e5f1329827d9e02eddc5072d1b55e32 Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 18:23:04 +0100
Subject: [PATCH 3/4] Add posting variable controlling the feed-post-input

---
 src/app/components/feed/feed.component.ts | 7 +++----
 src/app/services/feed/feed.service.ts     | 5 +++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index 2dad603..6461e4d 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -63,6 +63,9 @@ export class FeedComponent implements OnInit {
     this.feedService.postsAvailable.subscribe(available => {
       this.loadingMostLiked = this.loadingNew = available;
     });
+    this.feedService.posting.subscribe(posting => {
+      this.posting = posting;
+    });
   }
 
   /**
@@ -74,7 +77,6 @@ export class FeedComponent implements OnInit {
     if (postElement && activityId && this.checked) {
       this.posting = true;
       this.feedService.createPostActivity(postElement.value, activityId, this.file).subscribe(() => {
-        this.posting = false;
         postElement.value = '';
         this.textInputValue = '';
         this.checked = false;
@@ -85,14 +87,12 @@ export class FeedComponent implements OnInit {
           this.showNew();
         }
       }, (error: IErrorResponse) => {
-        this.posting = false;
         this.errorOccurred = true;
         this.errorMessage = error.error.errors[0].message;
       });
     } else if (postElement) {
       this.posting = true;
       this.feedService.createPost(postElement.value, this.file).subscribe((result) => {
-        this.posting = false;
         postElement.value = '';
         this.textInputValue = '';
         this.checked = false;
@@ -104,7 +104,6 @@ export class FeedComponent implements OnInit {
         }
       }, (error: IErrorResponse) => {
         console.log(error);
-        this.posting = false;
         this.errorOccurred = true;
         this.errorMessage = error.error.errors[0].message;
       });
diff --git a/src/app/services/feed/feed.service.ts b/src/app/services/feed/feed.service.ts
index 7b13fd5..0535ed7 100644
--- a/src/app/services/feed/feed.service.ts
+++ b/src/app/services/feed/feed.service.ts
@@ -109,6 +109,7 @@ export class FeedService extends BaseService {
   }
 
   public postsAvailable = new BehaviorSubject<boolean>(true);
+  public posting = new BehaviorSubject<boolean>(false);
   public posts: BehaviorSubject<Post[]> = new BehaviorSubject([]);
   private activePostList: Sort = Sort.NEW;
   private offset = 0;
@@ -186,6 +187,7 @@ export class FeedService extends BaseService {
    * @param file - a file that is being uploaded with the post
    */
   private createPostRequest(body: { variables: any; query: string }, file?: File) {
+    this.posting.next(true);
     if (file) {
       return this.postGraphql(body, null, 0)
       .pipe(tap(response => {
@@ -197,8 +199,10 @@ export class FeedService extends BaseService {
             post.mediaType = result.fileName.endsWith('.png') ? 'IMAGE' : 'VIDEO';
             updatedPosts.unshift(post);
             this.posts.next(updatedPosts);
+            this.posting.next(false);
           }, error => {
             console.error(error);
+            this.posting.next(false);
             this.deletePost(post.id);
           });
         }
@@ -206,6 +210,7 @@ export class FeedService extends BaseService {
     } else if (!file) {
       return this.postGraphql(body, null, 0)
       .pipe(tap(response => {
+        this.posting.next(false);
         const updatedPosts = this.posts.getValue();
         if (this.activePostList === Sort.NEW) {
           const post = this.constructPost(response);

From 34d75b6544c86aceaf71f2c0af5a9fdf3f132893 Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Fri, 24 Jan 2020 18:25:42 +0100
Subject: [PATCH 4/4] Improve code in feed component

---
 src/app/components/feed/feed.component.ts | 27 +++++++++--------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index 6461e4d..44eee90 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -78,14 +78,7 @@ export class FeedComponent implements OnInit {
       this.posting = true;
       this.feedService.createPostActivity(postElement.value, activityId, this.file).subscribe(() => {
         postElement.value = '';
-        this.textInputValue = '';
-        this.checked = false;
-        this.file = null;
-        this.localFileUrl = null;
-        this.fileType = null;
-        if (this.view !== 'new') {
-          this.showNew();
-        }
+        this.resetPostInput();
       }, (error: IErrorResponse) => {
         this.errorOccurred = true;
         this.errorMessage = error.error.errors[0].message;
@@ -94,14 +87,7 @@ export class FeedComponent implements OnInit {
       this.posting = true;
       this.feedService.createPost(postElement.value, this.file).subscribe((result) => {
         postElement.value = '';
-        this.textInputValue = '';
-        this.checked = false;
-        this.file = null;
-        this.localFileUrl = null;
-        this.fileType = null;
-        if (this.view !== 'new') {
-          this.showNew();
-        }
+        this.resetPostInput();
       }, (error: IErrorResponse) => {
         console.log(error);
         this.errorOccurred = true;
@@ -117,6 +103,15 @@ export class FeedComponent implements OnInit {
     this.fileInput.nativeElement.value = '';
   }
 
+  resetPostInput() {
+    this.textInputValue = '';
+    this.checked = false;
+    this.discardFile();
+    if (this.view !== 'new') {
+      this.showNew();
+    }
+  }
+
   onFileInputChange(event) {
     this.errorOccurred = false;
     this.errorMessage = '';