Add comments to post

Author: maliouris

src/app/admin/posts/create-post/ipost.ts

@@ -7,7 +7,8 @@ export interface IPost {
   image: string;
   public: boolean;
   likes_count?: number;
-  likes_users_ids: string[];
+  likes_users_ids?: string[];
+  comments: any[];
   created_at: Date;
   updated_at: Date;
 }

src/app/admin/posts/post/comment.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CommentService } from './comment.service';
+
+describe('CommentService', () => {
+  let service: CommentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CommentService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/admin/posts/post/comment.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommentService {
+  url = environment.apiUrl + '/';
+
+  constructor(private http: HttpClient) { }
+
+  addCommentToPost(post_id, data) {
+    return this.http.post<any>(this.url + 'posts/' + post_id + '/add_comment', data);
+  }
+
+  addAnswerComment(comment_id, data) {
+    return this.http.post<any>(this.url + 'comments/' + comment_id + '/createAnswer', data);
+  }
+}

src/app/admin/posts/post/post.component.html

@@ -1,6 +1,6 @@
 <div class="main_box">
   <div class="border_image">
-    <img src="{{ post.image ? post.image : '../../assets/images/env.jpeg' }}">
+    <img src="{{ post?.image ? post.image : '../../assets/images/env.jpeg' }}">
   </div>
   <div class="title">
     <b>{{ post?.title }}</b>
@@ -10,10 +10,51 @@
   </div>
   <div class="info">
     <p>*User Profile Picture Link*</p>
-    <p>{{post?.updated_at.toString().split('T')[0]}}</p>
+    <p>{{ post?.updated_at.toString().split('T')[0] }}</p>
   </div>
   <div *ngIf="auth" class="actions">
-    <button class="btn" [class.liked]="liked" (click)="handleLike()"><span class="fas fa-tree"></span> Like {{ likes }}</button>
-    <button class="btn comment" routerLink="/post/{{post.id}}" fragment="comments">Comment</button>
+    <button class="btn" [class.liked]="liked" (click)="handleLike()"><span class="fas fa-tree"></span> Like
+      {{ likes }}</button>
+    <div id="comments" class="comments">
+      <h3>Comments</h3>
+      <form [formGroup]="commentForm" (submit)="comment()">
+        <textarea formControlName="content"></textarea>
+        <button class="btn btn-primary">Add Comment</button>
+      </form>
+      <div *ngIf="comment_id" class="answerForm">
+        <form [formGroup]="answerForm" (submit)="answerComment()">
+          <textarea formControlName="content"></textarea>
+          <button class="btn btn-primary">Add Comment</button>
+          <button type="button" class="btn btn-secondary" (click)="hideAnswer()">Cancel</button>
+        </form>
+      </div>
+      <div *ngFor="let comment of post?.comments">
+        <div class="comment">
+          <p>{{ comment.author.username }} wrote:</p>
+          <p class="content">{{ comment.content }}</p>
+          <button class="btn btn-primary" (click)="showAnswer(comment.comments, comment)">Answer to comment</button>
+          <button *ngIf="comment.author.username == user.username" class="btn btn-secondary">Edit comment</button>
+        </div>
+        <div *ngFor="let subComment of comment.comments">
+          <div class="comment">
+            <p>{{ subComment.author.username }} wrote:</p>
+            <p class="content">{{ subComment.content }}</p>
+            <button class="btn btn-primary" (click)="showAnswer(subComment.comments, subComment)">Answer to
+              comment</button>
+            <button *ngIf="subComment.author.username == user.username" class="btn btn-secondary">Edit comment</button>
+          </div>
+          <div class="comment" *ngFor="let subSubComment of subComment.comments">
+            <div class="comment">
+              <p>{{ subSubComment.author.username }} wrote:</p>
+              <p class="content">{{ subSubComment.content }}</p>
+              <button class="btn btn-primary" (click)="showAnswer(subComment.comments, subSubComment)">Answer to
+                comment</button>
+              <button *ngIf="subSubComment.author.username == user.username" class="btn btn-secondary">Edit
+                comment</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

src/app/admin/posts/post/post.component.scss

@@ -16,11 +16,12 @@
   align-items: center;
 }
 
-.border_image{
+.border_image {
   margin-bottom: 10px;
   width: 100%;
 }
-.border_image img{
+
+.border_image img {
   object-fit: cover;
   height: 450px;
   width: 100%;
@@ -62,8 +63,35 @@
   color: var(--color-primary) !important;
 }
 
+.actions {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.comments {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.answerForm {
+  z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @media screen and (max-width: 767px) {
-  .border_image img{
+  .border_image img {
     height: auto;
   }
-}
+}

src/app/admin/posts/post/post.component.ts

@@ -4,6 +4,8 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { IPost } from '../create-post/ipost';
 import { Title, Meta } from '@angular/platform-browser';
 import { AuthService } from 'src/app/_services/auth.service';
+import { FormBuilder, Validators } from '@angular/forms';
+import { CommentService } from './comment.service';
 
 @Component({
   selector: 'app-post',
@@ -15,20 +17,32 @@ export class PostComponent implements OnInit {
   liked = false;
   likes;
   auth = false;
+  comment_id= null;
+  user;
+  parentComms;
+  commentForm = this.fb.group({
+    content: ['', Validators.required]
+  });
+
+  answerForm = this.fb.group({
+    content: ['', Validators.required]
+  });
 
   constructor(private postSrv: UserPostsService, private title: Title , private meta: Meta, private router: Router, 
-    private actRoute: ActivatedRoute, private authSrv: AuthService) { }
+    private actRoute: ActivatedRoute, private authSrv: AuthService, private fb: FormBuilder, private commentSrv: CommentService) { }
 
   ngOnInit(): void {
     const id = this.actRoute.snapshot.paramMap.get('id');
     this.meta.updateTag({ name: 'description', content: 'Post Content' });
     this.postSrv.getPost(id).subscribe(
       res => {
         this.post = res;
+        console.log(this.post);
         document.title = this.post.title;
         if (this.authSrv.isAuth()) {
           this.auth = true;
-          if (this.post.likes_users_ids.includes(this.authSrv.getUser().id)) {
+          this.user = this.authSrv.getUser();
+          if (this.post.likes_users_ids.includes(this.user.id)) {
             this.liked = true;
           }
         }
@@ -52,4 +66,54 @@ export class PostComponent implements OnInit {
       );
   }
 
+  comment() {
+    if (this.commentForm.valid) {
+      this.post.comments.unshift({
+        author: {
+          username: this.authSrv.getUser().username,
+        },
+        content: this.commentForm.controls.content.value
+      });
+      this.commentSrv.addCommentToPost(this.post.id, this.commentForm.value)
+        .subscribe(
+          res => {
+            console.log(res);
+          }, err => {
+            console.log(err);
+          }
+        );
+    }
+  }
+
+  answerComment() {
+    const comment = ({
+      author: {
+        username: this.authSrv.getUser().username,
+      },
+      content: this.answerForm.controls.content.value
+    });
+    this.parentComms.unshift(comment);
+    console.log(this.comment_id);
+    if (this.answerForm.valid) {
+      this.commentSrv.addAnswerComment(this.comment_id, this.answerForm.value)
+        .subscribe(
+          res => {
+            console.log(res);
+          }, err => {
+            console.log(err);
+          }
+        );
+        this.hideAnswer();
+      }
+  }
+
+  showAnswer(comments, comment) {
+    console.log(comment);
+    this.parentComms = comments;
+    this.comment_id = comment.id;
+  }
+
+  hideAnswer() {
+    this.comment_id = null;
+  }
 }

src/app/single-post/single-post.component.html

@@ -8,7 +8,7 @@ <h3>{{ post.title }}</h3>
       </a>
       <div *ngIf="auth" class="actions">
         <button class="btn" [class.liked]="liked" (click)="handleLike()"><span class="fas fa-tree"></span> Like {{likes}}</button>
-        <button class="btn comment" routerLink="/post/{{post.id}}" fragment="comments">Comment</button>
+        <button class="btn comment" routerLink="/post/{{post.id}}" fragment="comments">Comments</button>
       </div>
     </div>
   </div>