Implemented (moved from post page) functionality for editing and deleting your posts into post component

3 files changed, 135 insertions, 6 deletions

diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
index c5919fd..1015564 100644
--- a/src/app/components/post/post.component.css
+++ b/src/app/components/post/post.component.css
@@ -32,3 +32,24 @@
   height: 1.2em;
   width: 1.2em;
 }
+
+/* Edit */
+
+#attachments-btns img, .file-button > input {
+  height: 1.4em;
+  width: 1.4em;
+}
+
+.file-button {
+  position: relative;
+}
+
+.file-button > img {
+  position: absolute;
+  pointer-events: none;
+}
+
+.file-button > input {
+  font-size: inherit;
+  color: transparent;
+}
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index 133b747..1831c5e 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -13,14 +13,36 @@
 				@{{ user.userName }}
 			</span>
 		</summary>
-		<article class="message margin-top-bot-small">
+		<article class="message margin-top-bot-small" *ngIf="!editingPost">
 			{{ post.message }}
 		</article>
-		<section class="flex-row flexible-children">
+		<section class="flex-row flexible-children" *ngIf="!editingPost">
 			<figure *ngFor="let fileURL of post.fileURLs">
 				<app-post-attachment [paramURL]="fileURL"></app-post-attachment>
 			</figure>
 		</section>
+		<form [formGroup]="editPostFormGroup" *ngIf="editingPost">
+			<textarea class="textarea-new-msg full-width faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
+			<section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger">
+				<div class="file-button hover-half-opacity click-effect">
+					<img src="/assets/icons/tabler-icon-paperclip.svg">
+					<input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
+				</div>
+			</section>
+		</form>
+		<section class="flex-row bot-padding-bigger" *ngIf="editingPost">
+			<div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small">
+				<div class="flexible">
+					{{ file.name ? file.name : 'Attachment' }}
+				</div>
+				<div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)">
+					<img src="/assets/icons/tabler-icon-x.svg">
+				</div>
+			</div>
+		</section>
+		<button class="faded-slim-border full-width padding-small lighter-hover click-effect border-radius-smaller margin-bot-bigger" *ngIf="editingPost" (click)="editPost()">
+			Update Post
+		</button>
 		<section class="post-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only">
 			<time class="flex-row flex-center-align-items">
 				<img class="img-height-font-size" src="/assets/icons/tabler-icon-calendar-time.svg">&nbsp;
@@ -35,15 +57,21 @@
 				</span>
 			</summary>
 		</section>
-		<section class="flex-row flexible-children justify-children-center flex-center-align-children">
-			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+		<section class="flex-row justify-children-center flex-center-align-children">
+			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="toggleEditing()">
+				<img src="/assets/icons/tabler-icon-edit.svg">
+			</button>
+			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-message-2.svg">
 				&nbsp;Comment
 			</button>
-			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
+			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller"  (click)="goToPostPage()">
 				<img src="/assets/icons/tabler-icon-link.svg">
 				&nbsp;Share
 			</button>
+			<button class="padding-small lighter-hover click-effect border-radius-smaller"  (click)="deletePost()">
+				<img src="/assets/icons/tabler-icon-trash.svg">
+			</button>
 		</section>
 	</main>
 	<aside class="rating flex-col flex-center-align-items">
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index 58dad4f..5c79658 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 { 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';
@@ -22,10 +24,14 @@ export class PostComponent implements OnInit {
   @Input() paramId: string;
   @Input() index: number;
   public loggedIn = false;
+  public loggedInAuthor = false;
+  public editingPost = false;
+  public files: File[];
+  public editPostFormGroup: FormGroup;
   private upvoteBtns: HTMLCollectionOf<HTMLElement>;
   private downvoteBtns: HTMLCollectionOf<HTMLElement>;
 
-  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)
   { }
 
   ngOnInit(): void {
@@ -33,6 +39,7 @@ export class PostComponent implements OnInit {
 
     this.post = this._postService.getDefaultPost();
     this.user = this._userService.getDefaultUser();
+    this.files = [];
 
     this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe({
       next: (result: object) => {
@@ -49,6 +56,11 @@ export class PostComponent implements OnInit {
         this.loadUser();
       }
     });
+
+    this.editPostFormGroup = this._fb.group({
+      newPostMessage: new FormControl(''),
+      fileUpload: new FormControl('')
+    });
   }
 
   private loadUser(): void {
@@ -58,6 +70,14 @@ export class PostComponent implements OnInit {
 
         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;
@@ -65,6 +85,26 @@ 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;
+          }
+        }
+      });
+    }
+  }
+
   goToAuthorProfile(): void {
     this._router.navigate(['/profile/' + this.user.userName]);
   }
@@ -73,6 +113,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']);