From 9d05fd85b369aea6c92f68ad9407f78152aa0f08 Mon Sep 17 00:00:00 2001
From: Ajit Singh <ajitsinghkaler0@gmail.com>
Date: Thu, 19 Aug 2021 13:25:01 +0530
Subject: [PATCH] added basic comments section

---
 src/app/models/comment.ts                     | 10 +++++
 .../article-detail.component.ts               |  5 ++-
 .../article/comments/comments.component.html  | 14 +++++-
 .../article/comments/comments.component.scss  | 24 ++++++++++
 .../article/comments/comments.component.ts    |  8 +++-
 .../services/comments-api.service.spec.ts     | 16 +++++++
 .../article/services/comments-api.service.ts  | 18 ++++++++
 .../article/services/comments.service.spec.ts | 16 +++++++
 .../article/services/comments.store.ts        | 44 +++++++++++++++++++
 9 files changed, 151 insertions(+), 4 deletions(-)
 create mode 100644 src/app/models/comment.ts
 create mode 100644 src/app/pages/article-detail/article/services/comments-api.service.spec.ts
 create mode 100644 src/app/pages/article-detail/article/services/comments-api.service.ts
 create mode 100644 src/app/pages/article-detail/article/services/comments.service.spec.ts
 create mode 100644 src/app/pages/article-detail/article/services/comments.store.ts

diff --git a/src/app/models/comment.ts b/src/app/models/comment.ts
new file mode 100644
index 0000000..bb15296
--- /dev/null
+++ b/src/app/models/comment.ts
@@ -0,0 +1,10 @@
+import { User } from "./user";
+
+export interface Comment {
+    type_of: string;
+    id_code: string;
+    created_at: Date;
+    body_html: string;
+    user: User;
+    children: Comment[];
+}
diff --git a/src/app/pages/article-detail/article-detail.component.ts b/src/app/pages/article-detail/article-detail.component.ts
index 5c6a19d..b5f4b41 100644
--- a/src/app/pages/article-detail/article-detail.component.ts
+++ b/src/app/pages/article-detail/article-detail.component.ts
@@ -3,13 +3,14 @@ import { ActivatedRoute } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { UserStore } from 'src/app/global/services/user/user.store';
 import { ArticleDetailStore } from './article/services/article-detail.store';
+import { CommentsStore } from './article/services/comments.store';
 import { UserArticlesStore } from './user/services/user-articles.store';
 
 @Component({
   selector: 'app-article-detail',
   templateUrl: './article-detail.component.html',
   styleUrls: ['./article-detail.component.scss'],
-  providers: [ArticleDetailStore, UserStore],
+  providers: [ArticleDetailStore, UserStore, CommentsStore],
 })
 export class ArticleDetailComponent implements OnInit {
   article$ = this.articleDetailStore.article$.pipe(
@@ -18,6 +19,7 @@ export class ArticleDetailComponent implements OnInit {
         this.userStore.getUser(article.user.username);
         this.articleUserStore.getArticles({ username: article.user.username });
         this.articleDetailStore.getReactions(article.id);
+        this.commentsStore.getComments(article.id);
       }
     })
   );
@@ -28,6 +30,7 @@ export class ArticleDetailComponent implements OnInit {
     private route: ActivatedRoute,
     private userStore: UserStore,
     private articleUserStore: UserArticlesStore,
+    private commentsStore: CommentsStore
   ) {}
 
   ngOnInit(): void {
diff --git a/src/app/pages/article-detail/article/comments/comments.component.html b/src/app/pages/article-detail/article/comments/comments.component.html
index 22a5c17..dd8974e 100644
--- a/src/app/pages/article-detail/article/comments/comments.component.html
+++ b/src/app/pages/article-detail/article/comments/comments.component.html
@@ -1 +1,13 @@
-<p>comments works!</p>
+<header class="flex justify-between">
+    <h2>Discussion <span>(4)</span></h2>
+    <button class="subscribe-btn btn" type="button">Subscribe</button>
+</header>
+<div *rxLet="comments$;let comments" class="comments">
+    <details *ngFor="let comment of comments" class="comments-wrapper" open="">
+        <summary>
+            {{comment.user.name}}
+        </summary>
+        <div [innerHtml]="comment.body_html">
+        </div>
+    </details>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/article-detail/article/comments/comments.component.scss b/src/app/pages/article-detail/article/comments/comments.component.scss
index e69de29..9383dd1 100644
--- a/src/app/pages/article-detail/article/comments/comments.component.scss
+++ b/src/app/pages/article-detail/article/comments/comments.component.scss
@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  border-width: 0;
+  border-top-width: 1px;
+  border-style: solid;
+  border-color: #eef0f1;
+  padding: 2rem 4rem;
+}
+.subscribe-btn {
+  border-radius: 5px;
+  padding: calc(0.5rem - 2px) calc(1rem - 2px);
+  border: 2px solid #d2d6db;
+  font-size: 1rem;
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  color: #363d44;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.035);
+    border-color: #99a3ad;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    color: #08090a;
+    z-index: 1;
+  }
+}
diff --git a/src/app/pages/article-detail/article/comments/comments.component.ts b/src/app/pages/article-detail/article/comments/comments.component.ts
index 7ee4df0..31fb212 100644
--- a/src/app/pages/article-detail/article/comments/comments.component.ts
+++ b/src/app/pages/article-detail/article/comments/comments.component.ts
@@ -1,10 +1,14 @@
 import { Component, OnInit } from '@angular/core';
+import { CommentsStore } from '../services/comments.store';
 
 @Component({
   selector: 'app-comments',
   templateUrl: './comments.component.html',
   styleUrls: ['./comments.component.scss'],
 })
-export class CommentsComponent {
-  constructor() {}
+export class CommentsComponent implements OnInit {
+  comments$ = this.commentStore.comments$;
+  constructor(private commentStore: CommentsStore) {}
+
+  ngOnInit(): void {}
 }
diff --git a/src/app/pages/article-detail/article/services/comments-api.service.spec.ts b/src/app/pages/article-detail/article/services/comments-api.service.spec.ts
new file mode 100644
index 0000000..7194ac5
--- /dev/null
+++ b/src/app/pages/article-detail/article/services/comments-api.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CommentsApiService } from './comments-api.service';
+
+describe('CommentsApiService', () => {
+  let service: CommentsApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CommentsApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/article-detail/article/services/comments-api.service.ts b/src/app/pages/article-detail/article/services/comments-api.service.ts
new file mode 100644
index 0000000..49a0935
--- /dev/null
+++ b/src/app/pages/article-detail/article/services/comments-api.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Comment } from 'src/app/models/comment';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsApiService {
+  constructor(private http: HttpClient) {}
+
+  getComments(id: number): Observable<Comment[]> {
+    return this.http.get<Comment[]>(
+      `${environment.baseApi}/comments?a_id=${id}`
+    );
+  }
+}
diff --git a/src/app/pages/article-detail/article/services/comments.service.spec.ts b/src/app/pages/article-detail/article/services/comments.service.spec.ts
new file mode 100644
index 0000000..2e27ef9
--- /dev/null
+++ b/src/app/pages/article-detail/article/services/comments.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CommentsStore } from './comments.store';
+
+describe('CommentsStore', () => {
+  let service: CommentsStore;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CommentsStore);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/article-detail/article/services/comments.store.ts b/src/app/pages/article-detail/article/services/comments.store.ts
new file mode 100644
index 0000000..724faac
--- /dev/null
+++ b/src/app/pages/article-detail/article/services/comments.store.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { ComponentStore, tapResponse } from '@ngrx/component-store';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { Comment } from 'src/app/models/comment';
+import { CommentsApiService } from './comments-api.service';
+
+interface CommentsState {
+  comments: Comment[];
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommentsStore extends ComponentStore<CommentsState> {
+  readonly comments$ = this.select((state) => state.comments);
+  readonly setComments = this.updater(
+    (state: CommentsState, comments: Comment[]) => ({
+      ...state,
+      comments,
+    })
+  );
+
+  readonly getComments = this.effect((id: Observable<number>) =>
+    id.pipe(
+      switchMap((id) =>
+        this.commetsApiS.getComments(id).pipe(
+          tapResponse(
+            (comments) => this.setComments(comments),
+            (error) => this.logError(error)
+          )
+        )
+      )
+    )
+  );
+
+  constructor(private commetsApiS: CommentsApiService) {
+    super({ comments: [] });
+  }
+
+  private logError(error: unknown) {
+    console.error(error);
+  }
+}