Moved from DevHive

3 files changed, 136 insertions, 0 deletions

diff --git a/src/app/components/comment/comment.component.css b/src/app/components/comment/comment.component.css
new file mode 100644
index 0000000..d82f10e
--- /dev/null
+++ b/src/app/components/comment/comment.component.css
@@ -0,0 +1,59 @@
+.comment {
+  display: flex;
+  width: 100%;
+
+  margin: .5em auto;
+  box-sizing: border-box;
+  padding: .5em;
+  background-color: var(--card-bg);
+}
+
+.comment:first-child {
+  margin-top: 0;
+}
+
+/* Author */
+
+.author {
+  display: flex;
+  margin-bottom: .2em;
+}
+
+.author:hover {
+  cursor: pointer;
+}
+
+.author > img {
+  width: 1.7em;
+  height: 1.7em;
+  margin-right: .2em;
+}
+
+.author-info > .name {
+  font-size: .8em;
+}
+
+.author-info > .handle {
+  font-size: .6em;
+  color: gray;
+}
+
+/* Content */
+
+.content {
+  flex: 1;
+}
+
+.message {
+  margin: .3em 0;
+  word-break: break-all;
+}
+
+.timestamp {
+  font-size: .5em;
+  color: gray;
+}
+
+.message:hover, .timestamp:hover {
+  cursor: pointer;
+}
diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
new file mode 100644
index 0000000..718e25c
--- /dev/null
+++ b/src/app/components/comment/comment.component.html
@@ -0,0 +1,23 @@
+<app-loading *ngIf="!loaded"></app-loading>
+
+<div class="comment rounded-border" *ngIf="loaded">
+	<div class="content">
+		<div class="author" (click)="goToAuthorProfile()">
+			<img class="round-image" [src]="user.profilePictureURL">
+			<div class="author-info">
+				<div class="name">
+					{{ user.firstName }} {{ user.lastName }}
+				</div>
+				<div class="handle">
+					@{{ user.userName }}
+				</div>
+			</div>
+		</div>
+		<div class="message" (click)="goToCommentPage()">
+			{{ comment.message }}
+		</div>
+		<div class="timestamp" (click)="goToCommentPage()">
+			{{ timeCreated }}
+		</div>
+	</div>
+</div>
diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts
new file mode 100644
index 0000000..5076769
--- /dev/null
+++ b/src/app/components/comment/comment.component.ts
@@ -0,0 +1,54 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Guid } from 'guid-typescript';
+import { CommentService } from 'src/app/services/comment.service';
+import { UserService } from 'src/app/services/user.service';
+import { Comment } from 'src/models/comment';
+import { User } from 'src/models/identity/user';
+
+@Component({
+  selector: 'app-comment',
+  templateUrl: './comment.component.html',
+  styleUrls: ['./comment.component.css']
+})
+export class CommentComponent implements OnInit {
+  public loaded = false;
+  public user: User;
+  public comment: Comment;
+  public timeCreated: string;
+  @Input() paramId: string;
+
+  constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService)
+  { }
+
+  ngOnInit(): void {
+    this.comment = this._commentService.getDefaultComment();
+    this.user = this._userService.getDefaultUser();
+
+    this._commentService.getCommentRequest(Guid.parse(this.paramId)).subscribe(
+      (result: object) => {
+        Object.assign(this.comment, result);
+
+        this.timeCreated = new Date(this.comment.timeCreated).toLocaleString('en-GB');
+        this.loadUser();
+      }
+    );
+  }
+
+  private loadUser(): void {
+    this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe(
+      (result: object) => {
+        Object.assign(this.user, result);
+        this.loaded = true;
+      }
+    );
+  }
+
+  goToAuthorProfile(): void {
+    this._router.navigate(['/profile/' + this.comment.issuerUsername]);
+  }
+
+  goToCommentPage(): void {
+    this._router.navigate(['/comment/' + this.comment.commentId]);
+  }
+}