Merge pull request #3 from Team-Kaleidoscope/major-redesign

Major redesign

1 files changed, 115 insertions, 17 deletions

diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index 24ecdb4..f0d8a44 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -1,6 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
+import { CloudinaryService } from 'src/app/services/cloudinary.service';
 import { PostService } from 'src/app/services/post.service';
 import { RatingService } from 'src/app/services/rating.service';
 import { UserService } from 'src/app/services/user.service';
@@ -13,24 +15,33 @@ import { TokenService } from '../../services/token.service';
   templateUrl: './post.component.html',
   styleUrls: ['./post.component.css'],
 })
-export class PostComponent implements OnInit {
+export class PostComponent implements OnInit, AfterViewInit {
   public loaded = false;
   public user: User;
   public post: Post;
   public votesNumber: number;
   public timeCreated: string;
   @Input() paramId: string;
-  @Input() index: number;
+  @ViewChild('upvote') upvoteBtn: ElementRef;
+  @ViewChild('downvote') downvoteBtn: ElementRef;
+  @ViewChild('share') shareBtn: ElementRef;
+  private _defaultShareBtnInnerHTML: string;
+  private _linkShared = false; // For optimisation purposes
   public loggedIn = false;
-  private voteBtns: HTMLCollectionOf<HTMLElement>;
+  public loggedInAuthor = false;
+  public editingPost = false;
+  public files: File[];
+  public editPostFormGroup: FormGroup;
 
-  constructor(private _postService: PostService, private _ratingServe: RatingService, private _userService: UserService, private _router: Router, private _tokenService: TokenService) { }
+  constructor(private _postService: PostService, private _ratingServe: RatingService, private _userService: UserService, private _router: Router, private _tokenService: TokenService, private _cloudinaryService: CloudinaryService, private _fb: FormBuilder, private _elem: ElementRef, private _renderer: Renderer2)
+  { }
 
   ngOnInit(): void {
     this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
 
     this.post = this._postService.getDefaultPost();
     this.user = this._userService.getDefaultUser();
+    this.files = [];
 
     this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe({
       next: (result: object) => {
@@ -39,13 +50,16 @@ export class PostComponent implements OnInit {
         this.post.fileURLs = Object.values(result)[7];
         this.votesNumber = this.post.currentRating;
 
-        this.voteBtns = document.getElementsByClassName('vote') as HTMLCollectionOf<HTMLElement>;
-
         this.timeCreated = new Date(this.post.timeCreated).toLocaleString('en-GB');
 
         this.loadUser();
       }
     });
+
+    this.editPostFormGroup = this._fb.group({
+      newPostMessage: new FormControl(''),
+      fileUpload: new FormControl('')
+    });
   }
 
   private loadUser(): void {
@@ -54,7 +68,13 @@ export class PostComponent implements OnInit {
         Object.assign(this.user, result);
 
         if (this.loggedIn) {
-          this.highlightButtonsOnInit();
+          this.loggedInAuthor = this._tokenService.getUsernameFromSessionStorageToken() === this.post.creatorUsername;
+          this.editPostFormGroup.get('newPostMessage')?.setValue(this.post.message);
+
+          if (this.post.fileURLs.length > 0) {
+            this.loadFiles();
+            return;
+          }
         }
 
         this.loaded = true;
@@ -62,6 +82,38 @@ export class PostComponent implements OnInit {
     });
   }
 
+  private loadFiles(): void {
+    for (const fileURL of this.post.fileURLs) {
+      this._cloudinaryService.getFileRequest(fileURL).subscribe({
+        next: (result: object) => {
+          const file = result as File;
+          const tmp = {
+            name: fileURL.match('(?<=\/)(?:.(?!\/))+$')?.pop() ?? 'Attachment'
+          };
+
+          Object.assign(file, tmp);
+          this.files.push(file);
+
+          if (this.files.length === this.post.fileURLs.length) {
+            this.loaded = true;
+          }
+        }
+      });
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this._ratingServe.getRatingByUserAndPostWithSessionStorageRequest(Guid.parse(this.paramId)).subscribe({
+      next: (x: object) => {
+        const isLike: boolean = Object.values(x)[3];
+
+        this.changeColorOfVoteButton(isLike, !isLike);
+      }
+    });
+
+    this._defaultShareBtnInnerHTML = this.shareBtn.nativeElement.innerHTML;
+  }
+
   goToAuthorProfile(): void {
     this._router.navigate(['/profile/' + this.user.userName]);
   }
@@ -70,6 +122,46 @@ export class PostComponent implements OnInit {
     this._router.navigate(['/post/' + this.post.postId]);
   }
 
+  toggleEditing(): void {
+    this.editingPost = !this.editingPost;
+  }
+
+  onFileUpload(event: any): void {
+    this.files.push(...event.target.files);
+    this.editPostFormGroup.get('fileUpload')?.reset();
+  }
+
+  removeAttachment(fileName: string): void {
+    this.files = this.files.filter(x => x.name !== fileName);
+  }
+
+  editPost(): void {
+    const newMessage = this.editPostFormGroup.get('newPostMessage')?.value;
+
+    if (newMessage !== '') {
+      this._postService.putPostWithSessionStorageRequest(Guid.parse(this.paramId), newMessage, this.files).subscribe({
+        next: () => {
+          this.reloadPage();
+        }
+      });
+      this.loaded = false;
+    }
+  }
+
+  deletePost(): void {
+    this._postService.deletePostWithSessionStorage(Guid.parse(this.paramId)).subscribe({
+      next: () => {
+        this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]);
+      }
+    });
+  }
+
+  private reloadPage(): void {
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
+
   votePost(isLike: boolean): void {
     if (!this.loggedIn) {
       this._router.navigate(['/login']);
@@ -123,17 +215,23 @@ export class PostComponent implements OnInit {
   }
 
   private changeColorOfVoteButton(isUpvoted: boolean, isDownvoted: boolean): void {
-    this.voteBtns.item(this.index * 2)!.style.backgroundColor = (isUpvoted) ? 'lightblue' : 'white';
-    this.voteBtns.item((this.index * 2) + 1)!.style.backgroundColor = (isDownvoted) ? 'lightblue' : 'white';
+    this._renderer.setStyle(this.upvoteBtn.nativeElement, 'backgroundColor', (isUpvoted) ? 'var(--upvote-highlight)' : 'inherit');
+    this._renderer.setStyle(this.downvoteBtn.nativeElement, 'backgroundColor', (isDownvoted) ? 'var(--downvote-highlight)' : 'inherit');
   }
 
-  private highlightButtonsOnInit(): void {
-    this._ratingServe.getRatingByUserAndPostWithSessionStorageRequest(Guid.parse(this.paramId)).subscribe(
-      (x: object) => {
-        const isLike: boolean = Object.values(x)[3];
+  resetShareBtn(): void {
+    if (this._linkShared) {
+      this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', this._defaultShareBtnInnerHTML);
+      this._linkShared = false;
+    }
+  }
 
-        this.changeColorOfVoteButton(isLike, !isLike);
-      }
-    );
+  showCopiedMessage(): void {
+    this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', 'Link copied to clipboard!');
+    this._linkShared = true;
+  }
+
+  getPostLink(): string {
+    return location.origin + '/post/' + this.paramId;
   }
 }