Implemented angular comments; post now contains his comments; comments of a post are given in the post page (ordered by most recent)

12 files changed, 320 insertions, 12 deletions

diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts
index 82a3513..5252474 100644
--- a/src/DevHive.Angular/src/app/app-constants.module.ts
+++ b/src/DevHive.Angular/src/app/app-constants.module.ts
@@ -10,6 +10,7 @@ export class AppConstants {
 
   public static API_POST_URL = AppConstants.BASE_API_URL + '/Post';
   public static API_FEED_URL = AppConstants.BASE_API_URL + '/Feed';
+  public static API_COMMENT_URL = AppConstants.BASE_API_URL + '/Comment';
 
   public static PAGE_SIZE = 5;
   public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png';
diff --git a/src/DevHive.Angular/src/app/app.module.ts b/src/DevHive.Angular/src/app/app.module.ts
index bd96233..aaabf79 100644
--- a/src/DevHive.Angular/src/app/app.module.ts
+++ b/src/DevHive.Angular/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { ErrorBarComponent } from './components/error-bar/error-bar.component';
 import { SuccessBarComponent } from './components/success-bar/success-bar.component';
 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';
 
 @NgModule({
   declarations: [
@@ -36,7 +37,8 @@ import { AdminPanelPageComponent } from './components/admin-panel-page/admin-pan
     ErrorBarComponent,
     SuccessBarComponent,
     PostPageComponent,
-    AdminPanelPageComponent
+    AdminPanelPageComponent,
+    CommentComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/DevHive.Angular/src/app/components/comment/comment.component.css b/src/DevHive.Angular/src/app/components/comment/comment.component.css
new file mode 100644
index 0000000..d82f10e
--- /dev/null
+++ b/src/DevHive.Angular/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/DevHive.Angular/src/app/components/comment/comment.component.html b/src/DevHive.Angular/src/app/components/comment/comment.component.html
new file mode 100644
index 0000000..8908b25
--- /dev/null
+++ b/src/DevHive.Angular/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.imageUrl">
+			<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/DevHive.Angular/src/app/components/comment/comment.component.ts b/src/DevHive.Angular/src/app/components/comment/comment.component.ts
new file mode 100644
index 0000000..b171baf
--- /dev/null
+++ b/src/DevHive.Angular/src/app/components/comment/comment.component.ts
@@ -0,0 +1,53 @@
+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 {
+  }
+}
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
index 40a2aba..7069eae 100644
--- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html
@@ -11,4 +11,9 @@
 		<input type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage">
 		<input type="submit" style="display: none" />
 	</form>
+	<div>
+		<div class="comment" *ngFor="let comm of post?.comments">
+			<app-comment [paramId]="comm.commentId.toString()"></app-comment>
+		</div>
+	</div>
 <div>
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
index de8aa94..830e33d 100644
--- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
@@ -1,11 +1,11 @@
-import {HttpErrorResponse} from '@angular/common/http';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
-import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
-import {PostService} from 'src/app/services/post.service';
-import {TokenService} from 'src/app/services/token.service';
-import {Post} from 'src/models/post';
+import { PostService } from 'src/app/services/post.service';
+import { TokenService } from 'src/app/services/token.service';
+import { Post } from 'src/models/post';
 
 @Component({
   selector: 'app-post-page',
@@ -16,6 +16,7 @@ export class PostPageComponent implements OnInit {
   public editable = false;
   public editingPost = false;
   public postId: Guid;
+  public post: Post;
   public editPostFormGroup: FormGroup;
 
   constructor(private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService)
@@ -28,8 +29,11 @@ export class PostPageComponent implements OnInit {
     // to determine if the current post is made by the user
     this._postService.getPostRequest(this.postId).subscribe(
       (result: object) => {
-        const post = result as Post;
-        this.editable = post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken();
+        this.post = result as Post;
+        this.post.comments = this.post.comments.sort((x, y) => {
+          return Date.parse(y.timeCreated.toString()) - Date.parse(x.timeCreated.toString());
+        });
+        this.editable = this.post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken();
       },
       (err: HttpErrorResponse) => {
         this._router.navigate(['/not-found']);
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
index ef5e8fe..f8493ab 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
@@ -92,7 +92,6 @@
 				</div>
 			</div>
 
-
 			<button id="update-profile-btn" class="submit-btn" type="submit">Update profile</button>
 			<app-success-bar></app-success-bar>
 			<app-error-bar></app-error-bar>
diff --git a/src/DevHive.Angular/src/app/services/comment.service.ts b/src/DevHive.Angular/src/app/services/comment.service.ts
new file mode 100644
index 0000000..c9dbf35
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/comment.service.ts
@@ -0,0 +1,83 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { Observable } from 'rxjs';
+import { Comment } from 'src/models/comment';
+import { AppConstants } from '../app-constants.module';
+import { TokenService } from './token.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommentService {
+  constructor(private _http: HttpClient, private _tokenService: TokenService)
+  { }
+
+  getDefaultComment(): Comment {
+    return new Comment(Guid.createEmpty(), Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date());
+  }
+
+  /* Requests from session storage */
+
+  createCommentWithSessionStorageRequest(postId: Guid, commentMessage: string): Observable<object> {
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.createCommentRequest(userId, token, postId, commentMessage);
+  }
+
+  putCommentWithSessionStorageRequest(commentId: Guid, postId: Guid, newMessage: string): Observable<object> {
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.putCommentRequest(userId, token, commentId, postId, newMessage);
+  }
+
+  deleteCommentWithSessionStorage(commentId: Guid): Observable<object> {
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.deleteCommentRequest(commentId, token);
+  }
+
+  /* Comment requests */
+
+  createCommentRequest(userId: Guid, authToken: string, postId: Guid, commentMessage: string): Observable<object> {
+    const body = {
+      postId: postId.toString(),
+      message: commentMessage
+    };
+    const options = {
+      params: new HttpParams().set('UserId', userId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.post(AppConstants.API_COMMENT_URL, body, options);
+  }
+
+  getCommentRequest(id: Guid): Observable<object> {
+    const options = {
+      params: new HttpParams().set('Id', id.toString())
+    };
+    return this._http.get(AppConstants.API_COMMENT_URL, options);
+  }
+
+  putCommentRequest(userId: Guid, authToken: string, commentId: Guid, postId: Guid, newMessage: string): Observable<object> {
+    const body = {
+      commentId: commentId.toString(),
+      postId: postId.toString(),
+      newMessage: newMessage
+    };
+    const options = {
+      params: new HttpParams().set('UserId', userId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.put(AppConstants.API_COMMENT_URL, body, options);
+  }
+
+  deleteCommentRequest(commentId: Guid, authToken: string): Observable<object> {
+    const options = {
+      params: new HttpParams().set('Id', commentId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.delete(AppConstants.API_COMMENT_URL, options);
+  }
+}
diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts
index 2cca9be..0c472bb 100644
--- a/src/DevHive.Angular/src/app/services/post.service.ts
+++ b/src/DevHive.Angular/src/app/services/post.service.ts
@@ -15,7 +15,7 @@ export class PostService {
   { }
 
   getDefaultPost(): Post {
-    return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date());
+    return new Post(Guid.createEmpty(), 'Gosho', 'Trapov', 'gosho_trapov', 'Your opinion on my idea?', new Date(), []);
   }
 
   /* Requests from session storage */
diff --git a/src/DevHive.Angular/src/models/comment.ts b/src/DevHive.Angular/src/models/comment.ts
new file mode 100644
index 0000000..0d1755f
--- /dev/null
+++ b/src/DevHive.Angular/src/models/comment.ts
@@ -0,0 +1,70 @@
+import { Guid } from 'guid-typescript';
+
+export class Comment {
+  private _commentId: Guid;
+  private _postId: Guid;
+  private _issuerFirstName: string;
+  private _issuerLastName: string;
+  private _issuerUsername: string;
+  private _message: string;
+  private _timeCreated: Date;
+
+  constructor(commentId: Guid, postId: Guid, issuerFirstName: string, issuerLastName: string, issuerUsername: string, message: string, timeCreated: Date) {
+    this.commentId = commentId;
+    this.postId = postId;
+    this.issuerFirstName = issuerFirstName;
+    this.issuerLastName = issuerLastName;
+    this.issuerUsername = issuerUsername;
+    this.message = message;
+    this.timeCreated = timeCreated;
+  }
+
+  public get commentId(): Guid {
+    return this._commentId;
+  }
+  public set commentId(v: Guid) {
+    this._commentId = v;
+  }
+
+  public get postId(): Guid {
+    return this._postId;
+  }
+  public set postId(v: Guid) {
+    this._postId = v;
+  }
+
+  public get issuerFirstName(): string {
+    return this._issuerFirstName;
+  }
+  public set issuerFirstName(v: string) {
+    this._issuerFirstName = v;
+  }
+
+  public get issuerLastName(): string {
+    return this._issuerLastName;
+  }
+  public set issuerLastName(v: string) {
+    this._issuerLastName = v;
+  }
+
+  public get issuerUsername(): string {
+    return this._issuerUsername;
+  }
+  public set issuerUsername(v: string) {
+    this._issuerUsername = v;
+  }
+
+  public get message(): string {
+    return this._message;
+  }
+  public set message(v: string) {
+    this._message = v;
+  }
+
+  public get timeCreated(): Date {
+    return this._timeCreated;
+  }
+  public set timeCreated(v: Date) {
+    this._timeCreated = v;
+  }
+}
diff --git a/src/DevHive.Angular/src/models/post.ts b/src/DevHive.Angular/src/models/post.ts
index 4c6ac20..4d49a06 100644
--- a/src/DevHive.Angular/src/models/post.ts
+++ b/src/DevHive.Angular/src/models/post.ts
@@ -1,4 +1,5 @@
 import { Guid } from 'guid-typescript';
+import {Comment} from './comment';
 
 export class Post {
   private _postId: Guid;
@@ -7,16 +8,17 @@ export class Post {
   private _creatorUsername: string;
   private _message: string;
   private _timeCreated: Date;
-  // _comments
+  private _comments: Comment[];
   // _files
 
-  constructor(postId: Guid, creatorFirstName: string, creatorLastName: string, creatorUsername: string, message: string, timeCreated: Date) {
+  constructor(postId: Guid, creatorFirstName: string, creatorLastName: string, creatorUsername: string, message: string, timeCreated: Date, comments: Comment[]) {
     this.postId = postId;
     this.creatorFirstName = creatorFirstName;
     this.creatorLastName = creatorLastName;
     this.creatorUsername = creatorUsername;
     this.message = message;
     this.timeCreated = timeCreated;
+    this.comments = comments;
   }
 
   public get postId(): Guid {
@@ -60,4 +62,11 @@ export class Post {
   public set timeCreated(v: Date) {
     this._timeCreated = v;
   }
+
+  public get comments(): Comment[] {
+    return this._comments;
+  }
+  public set comments(v: Comment[]) {
+    this._comments = v;
+  }
 }