Merge branch 'master' of Software_Engineering_I/greenvironment-frontend into max_dev

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

@@ -11,7 +11,6 @@
           <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
           <video *ngIf="fileType == 'video'"  [src]="localFileUrl" controls="" class="html5-video-player">
             Your browser does not support playing HTML5 video.
-            You can <a href="https://files.catbox.moe/m6gsbb.mp4" download="">download the file</a> instead.
           </video>
         </div>
         <mat-form-field id="input">

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

@@ -70,10 +70,13 @@ export class FeedComponent implements OnInit {
    */
   createPost(postElement, activityId: string) {
     if (postElement && activityId && this.checked) {
-      this.feedService.createPostActivity(postElement.value, activityId).subscribe(() => {
+      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();
         }
@@ -82,10 +85,13 @@ export class FeedComponent implements OnInit {
         this.errorMessage = error.error.errors[0].message;
       });
     } else if (postElement) {
-      this.feedService.createPost(postElement.value).subscribe(() => {
+      this.feedService.createPost(postElement.value, 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();
         }

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

@@ -22,6 +22,12 @@
     </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>
+        <source [src]="post.mediaUrl" type="video/webm">
+      </video>
+    </div>
     <p [innerHTML]="post.htmlContent"></p>
   </mat-card-content>
   <mat-card-actions>

src/app/models/post.ts

@@ -12,6 +12,8 @@ export class Post {
   deletable: boolean;
   author: Author;
   activity: Activity;
+  mediaUrl: string;
+  mediaType: 'VIDEO' | 'IMAGE';
 
   constructor(
     id: number,
@@ -23,7 +25,8 @@ export class Post {
     deletable: boolean,
     date: string,
     author: Author,
-    activity: Activity
+    activity: Activity,
+    media?: {url: string, type: 'VIDEO' | 'IMAGE'},
   ) {
     this.id = id;
     this.content = content;
@@ -35,5 +38,9 @@ export class Post {
     this.date = date;
     this.author = author;
     this.activity = activity;
+    if (media) {
+      this.mediaUrl = media.url;
+      this.mediaType = media.type;
+    }
   }
 }

src/app/services/feed/feed.service.ts

@@ -4,10 +4,11 @@ import {Post} from 'src/app/models/post';
 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 {BehaviorSubject, Observable} from 'rxjs';
 import {tap} from 'rxjs/operators';
 import {BaseService} from '../base.service';
 import {formatDate} from '@angular/common';
+import {IFileUploadResult} from '../../models/interfaces/IFileUploadResult';
 
 const createPostGqlQuery = `mutation($content: String!) {
   createPost(content: $content) {
@@ -18,6 +19,7 @@ const createPostGqlQuery = `mutation($content: String!) {
     downvotes,
     userVote,
     deletable,
+    media {url, type},
     activity{
       id
       name
@@ -41,6 +43,7 @@ const createPostActivityGqlQuery = `mutation($content: String!, $id: ID) {
     downvotes,
     userVote,
     deletable,
+    media {url, type},
     activity{
       id
       name
@@ -76,6 +79,7 @@ const getPostGqlQuery = `query($first: Int, $offset: Int, $sort: SortType){
     downvotes,
     userVote,
     deletable,
+    media {url, type},
     activity{
       id
       name
@@ -138,47 +142,74 @@ export class FeedService extends BaseService {
   /**
    * Creates a new post
    * @param pContent
+   * @param file
    */
-  public createPost(pContent: String) {
+  public createPost(pContent: String, file?: File) {
     const body = {
       query: createPostGqlQuery,
       variables: {
         content: pContent
       }
     };
-    return this.createPostRequest(body);
+    return this.createPostRequest(body, file);
   }
 
   /**
    * Creates a post with an activity
    * @param pContent
    * @param activityId
+   * @param file
    */
-  public createPostActivity(pContent: String, activityId: String) {
+  public createPostActivity(pContent: String, activityId: String, file?: File) {
     const body = {
       query: createPostActivityGqlQuery, variables: {
         content: pContent,
         id: activityId
       }
     };
-    return this.createPostRequest(body);
+    return this.createPostRequest(body, file);
   }
 
   /**
    * Creates a new post with a given request.
    * @param body
+   * @param file - a file that is being uploaded with the post
    */
-  private createPostRequest(body: { variables: any; query: string }) {
+  private createPostRequest(body: { variables: any; query: string }, file?: File) {
     return this.postGraphql(body, null, 0)
       .pipe(tap(response => {
         if (this.activePostList === Sort.NEW) {
           const updatedPosts = this.posts.getValue();
-          updatedPosts.unshift(this.constructPost(response));
+          const post = this.constructPost(response);
-          this.posts.next(updatedPosts);
+          updatedPosts.unshift(post);
+          if (file) {
+            this.uploadPostImage(post.id, file).subscribe((result) => {
+              post.mediaUrl = result.fileName;
+              post.mediaType = result.fileName.endsWith('.png') ? 'IMAGE' : 'VIDEO';
+              this.posts.next(updatedPosts);
+            }, error => {
+              console.error(error);
+              this.deletePost(post.id);
+            });
+          } else {
+            this.posts.next(updatedPosts);
+          }
         }
       }));
   }
 
+  /**
+   * Uploads a file for a post
+   * @param postId
+   * @param file
+   */
+  private uploadPostImage(postId: number, file: File): Observable<IFileUploadResult> {
+    const formData = new FormData();
+    formData.append('postMedia', file);
+    formData.append('postId', postId.toString());
+    return this.post<IFileUploadResult>(environment.greenvironmentUrl + '/upload', formData, null, 0);
+  }
+
   /**
    * Upvotes a post
    * @param postId
@@ -300,7 +331,8 @@ export class FeedService extends BaseService {
       post.deletable,
       date,
       author,
-      activity);
+      activity,
+      post.media);
   }
 
   public constructAllPosts(response: any): Post[] {
@@ -340,7 +372,8 @@ export class FeedService extends BaseService {
         post.deletable,
         date,
         author,
-        activity));
+        activity,
+        post.media));
     }
     return posts;
   }