added basic comments section

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[];
+}

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 {

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>

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;
+  }
+}

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 {}
 }

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();
+  });
+});

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}`
+    );
+  }
+}

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();
+  });
+});

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);
+  }
+}