Implemented comment page from which you can view and update a comment; clicking on a comment's message redirects you to that page

6 files changed, 138 insertions, 1 deletions

diff --git a/src/DevHive.Angular/src/app/app-routing.module.ts b/src/DevHive.Angular/src/app/app-routing.module.ts
index 4367db7..0d83079 100644
--- a/src/DevHive.Angular/src/app/app-routing.module.ts
+++ b/src/DevHive.Angular/src/app/app-routing.module.ts
@@ -8,6 +8,7 @@ import { ProfileSettingsComponent } from './components/profile-settings/profile-
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { PostPageComponent } from './components/post-page/post-page.component';
 import {AdminPanelPageComponent} from './components/admin-panel-page/admin-panel-page.component';
+import {CommentPageComponent} from './components/comment-page/comment-page.component';
 
 const routes: Routes = [
   { path: '', component: FeedComponent },
@@ -16,6 +17,7 @@ const routes: Routes = [
   { path: 'profile/:username', component: ProfileComponent },
   { path: 'profile/:username/settings', component: ProfileSettingsComponent },
   { path: 'post/:id', component: PostPageComponent },
+  { path: 'comment/:id', component: CommentPageComponent },
   { path: 'admin-panel', component: AdminPanelPageComponent },
   { path: 'not-found', component: NotFoundComponent },
   { path: '**', component: NotFoundComponent }
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index aaabf79..723ea24 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { SuccessBarComponent } from './components/success-bar/success-bar.compon
 import { PostPageComponent } from './components/post-page/post-page.component';
 import { AdminPanelPageComponent } from './components/admin-panel-page/admin-panel-page.component';
 import { CommentComponent } from './components/comment/comment.component';
+import { CommentPageComponent } from './components/comment-page/comment-page.component';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,8 @@ import { CommentComponent } from './components/comment/comment.component';
     SuccessBarComponent,
     PostPageComponent,
     AdminPanelPageComponent,
-    CommentComponent
+    CommentComponent,
+    CommentPageComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.css b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.css
new file mode 100644
index 0000000..b886bc1
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.css
@@ -0,0 +1,27 @@
+#content {
+  justify-content: flex-start !important;
+}
+
+#content > * {
+  width: 100%;
+}
+
+.many-buttons {
+  width: 100%;
+  display: flex;
+}
+
+.many-buttons > * {
+  flex: 1;
+  margin-right: .3em;
+}
+
+.many-buttons > *:last-of-type {
+  margin-right: 0;
+}
+
+.submit-btn {
+  max-width: 98%;
+  margin: 0 auto;
+  margin-bottom: .5em;
+}
diff --git a/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.html b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.html
new file mode 100644
index 0000000..2d110d6
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.html
@@ -0,0 +1,14 @@
+<app-loading *ngIf="!loaded"></app-loading>
+
+<div id="content" *ngIf="loaded">
+	<button class="submit-btn" type="submit" (click)="toPost()">ᐊ Back to post</button>
+	<app-comment [paramId]="commentId.toString()"></app-comment>
+	<div class="many-buttons" *ngIf="editable">
+		<button class="submit-btn" (click)="editComment()">Edit comment</button>
+		<button class="submit-btn delete-btn" (click)="deleteComment()">Delete comment</button>
+	</div>
+	<form  [formGroup]="editCommentFormGroup" (ngSubmit)="editComment()">
+		<input type="text" *ngIf="editingComment" placeholder="New comment message" class="input-field" formControlName="newCommentMessage">
+		<input type="submit" style="display: none" />
+	</form>
+<div>
diff --git a/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.ts b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.ts
new file mode 100644
index 0000000..bd4cfe5
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/comment-page/comment-page.component.ts
@@ -0,0 +1,91 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+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 { Comment } from 'src/models/comment';
+
+@Component({
+  selector: 'app-comment-page',
+  templateUrl: './comment-page.component.html',
+  styleUrls: ['./comment-page.component.css']
+})
+export class CommentPageComponent implements OnInit {
+  private _title = 'Comment';
+  public loaded = false;
+  public loggedIn = false;
+  public editable = false;
+  public editingComment = false;
+  public commentId: Guid;
+  public comment: Comment;
+  public editCommentFormGroup: FormGroup;
+
+  constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _commentService: CommentService){
+    this._titleService.setTitle(this._title);
+  }
+
+  ngOnInit(): void {
+    this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
+    this.commentId = Guid.parse(this._router.url.substring(9));
+
+    // Gets the post and the logged in user and compares them,
+    // to determine if the current post is made by the user
+    this._commentService.getCommentRequest(this.commentId).subscribe(
+      (result: object) => {
+        this.comment = result as Comment;
+        if (this.loggedIn) {
+          this.editable = this.comment.issuerUsername === this._tokenService.getUsernameFromSessionStorageToken();
+        }
+        this.loaded = true;
+      },
+      (err: HttpErrorResponse) => {
+        this._router.navigate(['/not-found']);
+      }
+    );
+
+    this.editCommentFormGroup = this._fb.group({
+      newCommentMessage: new FormControl('')
+    });
+  }
+
+  toPost(): void {
+    this._router.navigate(['/post/' + this.comment.postId]);
+  }
+
+  editComment(): void {
+    if (this._tokenService.getTokenFromSessionStorage() === '') {
+      this._router.navigate(['/login']);
+      return;
+    }
+
+    if (this.editingComment) {
+      const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value;
+      if (newMessage !== '') {
+        console.log(this.commentId);
+        this._commentService.putCommentWithSessionStorageRequest(this.commentId, this.comment.postId, newMessage).subscribe(
+          (result: object) => {
+            this.reloadPage();
+          }
+        );
+      }
+    }
+    this.editingComment = !this.editingComment;
+  }
+
+  deleteComment(): void {
+    this._commentService.deleteCommentWithSessionStorage(this.commentId).subscribe(
+      (result: object) => {
+        this.toPost();
+      }
+    );
+  }
+
+  private reloadPage(): void {
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
+}
diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.ts b/src/DevHive.Angular/src/app/components/comment/comment.component.ts
index b171baf..5076769 100644
--- a/src/DevHive.Angular/src/app/components/comment/comment.component.ts
+++ b/src/DevHive.Angular/src/app/components/comment/comment.component.ts
@@ -49,5 +49,6 @@ export class CommentComponent implements OnInit {
   }
 
   goToCommentPage(): void {
+    this._router.navigate(['/comment/' + this.comment.commentId]);
   }
 }