Reimplemented comment page component

5 files changed, 64 insertions, 1 deletions

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4367db7..b319abd 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -7,7 +7,8 @@ import { ProfileComponent } from './components/profile/profile.component';
 import { ProfileSettingsComponent } from './components/profile-settings/profile-settings.component';
 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 { 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/app/app.module.ts b/src/app/app.module.ts
index 47651d4..c68f919 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { CommentComponent } from './components/comment/comment.component';
 import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component';
 import { RouterModule } from '@angular/router';
 import { NavbarComponent } from './components/navbar/navbar.component';
+import { CommentPageComponent } from './components/comment-page/comment-page.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +46,7 @@ import { NavbarComponent } from './components/navbar/navbar.component';
     CommentComponent,
     PostAttachmentComponent,
     NavbarComponent,
+    CommentPageComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
diff --git a/src/app/components/comment-page/comment-page.component.css b/src/app/components/comment-page/comment-page.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/components/comment-page/comment-page.component.css
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html
new file mode 100644
index 0000000..8a2ffe1
--- /dev/null
+++ b/src/app/components/comment-page/comment-page.component.html
@@ -0,0 +1,18 @@
+<app-navbar></app-navbar>
+
+<app-loading *ngIf="!dataArrived"></app-loading>
+
+<main class="centered-content scroll-standalone under-navbar flex-col" *ngIf="dataArrived">
+	<app-post [paramId]="postId.toString()"></app-post>
+	<hr class="card-hr">
+	<section class="card flex-col width-full margin-0-top">
+		<button class="fg-focus border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3" (click)="goToPostPage()">
+			Show all comments
+		</button>
+	</section>
+	<div class="text-centered">
+		...
+	</div>
+
+	<app-comment [paramId]="commentId.toString()"></app-comment>
+</main>
diff --git a/src/app/components/comment-page/comment-page.component.ts b/src/app/components/comment-page/comment-page.component.ts
new file mode 100644
index 0000000..4281e1c
--- /dev/null
+++ b/src/app/components/comment-page/comment-page.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { Guid } from 'guid-typescript';
+import { CommentService } from 'src/app/services/comment.service';
+
+@Component({
+  selector: 'app-comment-page',
+  templateUrl: './comment-page.component.html',
+  styleUrls: ['./comment-page.component.css']
+})
+export class CommentPageComponent implements OnInit {
+  private _title = 'Comment';
+  public dataArrived = false;
+  public postId: Guid;
+  public commentId: Guid;
+
+  constructor(private _titleService: Title, private _router: Router, private _commentService: CommentService) {
+    this._titleService.setTitle(this._title);
+  }
+
+  ngOnInit(): void {
+    this.commentId = Guid.parse(this._router.url.substring(9));
+    this.postId = Guid.createEmpty();
+
+    this._commentService.getCommentRequest(this.commentId).subscribe({
+      next: (result: object) => {
+        this.postId = Object.values(result)[1];
+
+        this.dataArrived = true;
+      },
+      error: () => {
+        this._router.navigate(['/not-found']);
+      }
+    });
+  }
+
+  goToPostPage(): void {
+    this._router.navigate(['/post/' + this.postId]);
+  }
+}