ajout de commentaire sur la page d'un post

.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}

.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}

.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}

src/app/models/comment.ts

@@ -0,0 +1,6 @@
+export interface Comment {
+  id: bigint
+  content: string
+  commentDate: Date
+  isUpdated: boolean
+}

src/app/models/post.ts

@@ -6,4 +6,5 @@ export interface Post {
   body: string
   category: string
   publicationDate: Date
+  isUpdated: boolean
 }

src/app/pages/post/post.component.html

@@ -2,3 +2,4 @@
 <h1>{{ concernedPost?.title }}</h1>
 <em>Publié le {{ concernedPost?.publicationDate | date: "dd/MM/yyyy à HH:mm" }}</em>
 <div [innerHTML]="concernedPost?.body"></div>
+<div></div>

src/app/pages/post/post.component.ts

@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {Subscription} from 'rxjs';
+import {mergeMap, Subscription} from 'rxjs';
 import {Post} from '../../models/post';
 import {PostService} from '../../services/post.service';
 import {HeaderComponent} from '../../components/header/header.component';
 import {DatePipe} from '@angular/common';
+import {CommentService} from '../../services/comment.service';
 
 @Component({
   selector: 'app-post',
@@ -21,12 +22,15 @@ export class PostComponent {
   concernedPost: Post | undefined;
 
   constructor(private route: ActivatedRoute,
-              private postService: PostService) {
+              private postService: PostService,
+              private commentService: CommentService) {
     this.route.paramMap.subscribe(params => {
       const postId = params.get('postId');
       if (postId) {
         this.subs.push(
-          this.postService.getPost(BigInt(postId)).subscribe(post => {
+          this.postService.getPost(BigInt(postId)).pipe(
+            mergeMap(post => this.commentService.list(post.id))
+          ).subscribe(post => {
             this.concernedPost = post;
           })
         );

src/app/pages/profile/profile.component.css

@@ -0,0 +1,6 @@
+.content {
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 3em;
+}

src/app/pages/profile/profile.component.html

@@ -1,14 +1,12 @@
 <app-header></app-header>
 {{ concernedAuthor | json }}
 
-
-<p-card header='Profil de {{ concernedAuthor?.name }}' subheader="role : {{ concernedAuthor?.role }}">
-  <p class="m-0">
-    <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
-    <p-button label="Voir les posts de l'utilisateur"></p-button>
-    @if (concernedAuthor?.id === actualAuthor?.id) {
-      <p-button label="Mettre à jour les données du profil"/>
-      <p-button label="Changer le mot de passe"/>
-    }
-  </p>
-</p-card>
+<div class="content">
+  <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" class="mr-2" size="xlarge"
+            shape="circle"/>
+  <p-button label="Voir les posts de l'utilisateur"></p-button>
+  @if (concernedAuthor?.id === actualAuthor?.id) {
+    <p-button label="Mettre à jour les données du profil"/>
+    <p-button label="Changer le mot de passe"/>
+  }
+</div>

src/app/services/comment.service.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CommentService {
+  url: string = 'http://localhost:8080/api/comments';
+  constructor(private httpClient: HttpClient) {}
+
+  list(postId: bigint) {
+    return this.httpClient.get<Comment[]>(`${this.url}/posts/${postId}`);
+  }
+
+  create(content: string, postId: bigint, authorId: string): Observable<Comment> {
+    return this.httpClient.post<Comment>(`${this.url}/posts/${postId}`, {postId: postId, authorId: authorId, content: content});
+  }
+}
+
+// POST localhost:8080/api/comments/posts/1
+// Content-Type: application/json
+// Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ3cml0ZXIiLCJpYXQiOjE3MzY2OTYwNDgsImV4cCI6MTczNjczMjA0OH0.lHkOTGUzklZFJvm3poEhU5RhcG32y-ew-I2WpqDLVOs
+//
+// {
+//   "postId": 1,
+//   "content": "test",
+//   "authorId": "2c8c4079-8649-4086-9a4e-3d7ddcb402d8"
+// }