Implemented (moved from comment page) functionality for editing and deleting comments

3 files changed, 69 insertions, 4 deletions

diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
index 03ba649..65ebf56 100644
--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -13,7 +13,13 @@
 				@{{ user.userName }}
 			</span>
 		</summary>
-		<article class="message margin-top-bot-small">
+		<form [formGroup]="editCommentFormGroup" *ngIf="editingComment" (ngSubmit)="editComment()">
+			<textarea class="textarea-new-msg full-width faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newCommentMessage" placeholder="What's on your mind?"></textarea>
+			<button type="submit" class="faded-slim-border full-width padding-small lighter-hover click-effect border-radius-smaller margin-bot-bigger">
+				Update Comment
+			</button>
+		</form>
+		<article class="message margin-top-bot-small" *ngIf="!editingComment">
 			{{ comment.message }}
 		</article>
 		<section class="comment-details flex-row flex-justify-end font-size-dot7 faded-slim-border border-bottom-only">
@@ -25,10 +31,16 @@
 			</time>
 		</section>
 		<section class="flex-row justify-children-center flex-center-align-children">
-			<button class="flexible padding-small lighter-hover click-effect border-radius-smaller">
+			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="toggleEditing()">
+				<img src="/assets/icons/tabler-icon-edit.svg">
+			</button>
+						<button class="flexible padding-small lighter-hover click-effect border-radius-smaller">
 				<img src="/assets/icons/tabler-icon-link.svg">
 				&nbsp;Share
 			</button>
+			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="deleteComment()">
+				<img src="/assets/icons/tabler-icon-trash.svg">
+			</button>
 		</section>
 	</main>
 </section>
diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts
index 693fd43..0096c18 100644
--- a/src/app/components/comment/comment.component.ts
+++ b/src/app/components/comment/comment.component.ts
@@ -1,7 +1,9 @@
 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 { CommentService } from 'src/app/services/comment.service';
+import { TokenService } from 'src/app/services/token.service';
 import { UserService } from 'src/app/services/user.service';
 import { Comment } from 'src/models/comment.model';
 import { User } from 'src/models/identity/user.model';
@@ -13,12 +15,15 @@ import { User } from 'src/models/identity/user.model';
 })
 export class CommentComponent implements OnInit {
   public loaded = false;
+  public loggedInAuthor = false;
+  public editingComment = false;
   public user: User;
   public comment: Comment;
   public timeCreated: string;
   @Input() paramId: string;
+  public editCommentFormGroup: FormGroup;
 
-  constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService)
+  constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder)
   { }
 
   ngOnInit(): void {
@@ -33,12 +38,22 @@ export class CommentComponent implements OnInit {
         this.loadUser();
       }
     });
+
+    this.editCommentFormGroup = this._fb.group({
+      newCommentMessage: new FormControl('')
+    });
   }
 
   private loadUser(): void {
     this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe({
       next: (result: object) => {
         Object.assign(this.user, result);
+
+        if (this._tokenService.getTokenFromSessionStorage() !== '') {
+          this.loggedInAuthor = this._tokenService.getUsernameFromSessionStorageToken() === this.comment.issuerUsername;
+          this.editCommentFormGroup.get('newCommentMessage')?.setValue(this.comment.message);
+        }
+
         this.loaded = true;
       }
     });
@@ -47,4 +62,42 @@ export class CommentComponent implements OnInit {
   goToAuthorProfile(): void {
     this._router.navigate(['/profile/' + this.comment.issuerUsername]);
   }
+
+  toggleEditing(): void {
+    this.editingComment = !this.editingComment;
+  }
+
+  editComment(): void {
+    if (this._tokenService.getTokenFromSessionStorage() === '') {
+      this._router.navigate(['/login']);
+      return;
+    }
+
+    if (this.editingComment) {
+      const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value;
+
+      if (newMessage !== '' && newMessage !== this.comment.message) {
+        this._commentService.putCommentWithSessionStorageRequest(Guid.parse(this.paramId), this.comment.postId, newMessage).subscribe({
+          next: () => {
+            this.reloadPage();
+          }
+        });
+      }
+    }
+    this.editingComment = !this.editingComment;
+  }
+
+  deleteComment(): void {
+    this._commentService.deleteCommentWithSessionStorage(Guid.parse(this.paramId)).subscribe({
+      next: () => {
+        this.reloadPage();
+      }
+    });
+  }
+
+  private reloadPage(): void {
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
 }
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index 529d971..9858c76 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -11,7 +11,7 @@
 		</button>
 	</form>
 	<hr class="card-hr">
-	<section class="margin-top-bigger">
+	<section>
 		<div class="comment" *ngFor="let comm of post?.comments">
 			<app-comment [paramId]="comm.id.toString()"></app-comment>
 		</div>