Affichage d'un post individuellement

src/app/app.routes.ts

@@ -8,6 +8,7 @@ import {authGuard} from './guards/auth.guard';
 import {ProfileComponent} from './profile/profile.component';
 import {NewPostComponent} from './new-post/new-post.component';
 import {writerGuard} from './guards/writer.guard';
+import {PostComponent} from './post/post.component';
 
 export const routes: Routes = [
   {path: '', component: HomeComponent},
@@ -15,6 +16,7 @@ export const routes: Routes = [
   {path: 'register', component: RegisterComponent, canActivate: [authGuard]},
   {path: 'logout', component: LogoutComponent},
   {path: 'profile/:authorId', component: ProfileComponent},
+  {path: 'post/:postId', component: PostComponent},
   {path: 'new-post', component: NewPostComponent, canActivate: [writerGuard]},
   {path: '**', component: NotFoundComponent}
 ];

src/app/home/home.component.html

@@ -2,7 +2,8 @@
 <div class="main-content">
   @for (post of posts; track post.id) {
   <app-post-home [illustration]="post.illustration"
-                 [date]="post.publication_date"
+                 [date]="post.publicationDate"
+                 [postId]="post.id"
                  [category]="post.category"
                  [title]="post.title"
                  [username]="'Guams'"

src/app/login/login.component.html

@@ -1,10 +1,10 @@
 <app-header></app-header>
 <label for="username">Nom d'utilisateur</label>
-<input id="username" placeholder="Jean Zay" pInputText [(ngModel)]="name"/>
+<input type="text" id="username" placeholder="Jean Zay" pInputText [(ngModel)]="name"/>
 <label for="password">Mot de passe</label>
-<input id="password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="password"/>
+<input type="password" id="password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="password"/>
 <label for="confirm-password">Confirmez le mot de passe</label>
-<input id="confirm-password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="confirmPassword" (keyup.enter)="sendLogins()" />
+<input type="password" id="confirm-password" placeholder="motDePasseTrèsSecret" pInputText [(ngModel)]="confirmPassword" (keyup.enter)="sendLogins()" />
 <p-button
   label="Se connecter"
   icon="pi pi-check"

src/app/models/post.ts

@@ -5,5 +5,5 @@ export interface Post {
   title: string
   body: string
   category: string
-  publication_date: Date
+  publicationDate: Date
 }

src/app/post-home/post-home.component.css

@@ -0,0 +1,8 @@
+img {
+  border-radius: 5px;
+  object-fit: cover;
+  width: 100%;
+  height: 300px;
+  display: block;
+  margin: auto;
+}

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

@@ -2,7 +2,7 @@
   <img src="data:image/jpeg;base64,{{ illustration }}"/>
   <h2>{{ title }}</h2>
   <p>{{ category }}</p>
-  <em>{{ date }}</em>
+  <p>{{ date | date : "dd/MM/yyyy" }}</p>
   <p>{{ description }}</p>
-  <p-button label="Lire la suite"/>
+  <p-button routerLink="post/{{ postId }}" label="Lire la suite"/>
 </p-card>

src/app/post-home/post-home.component.ts

@@ -1,24 +1,30 @@
 import {Component, Input} from '@angular/core';
 import {Button} from 'primeng/button';
 import {CardModule} from 'primeng/card';
+import {DatePipe} from '@angular/common';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-post-home',
   standalone: true,
   imports: [
     Button,
-    CardModule
+    CardModule,
+    DatePipe,
+    RouterLink
   ],
   templateUrl: './post-home.component.html',
   styleUrl: './post-home.component.css'
 })
 export class PostHomeComponent {
+  @Input() postId: bigint = BigInt(0);
   @Input() title: string = '';
   @Input() illustration: string = '';
   @Input() category: string = '';
-  @Input() date: Date = new Date();
+  @Input() date: Date | undefined;
   @Input() description: string = '';
   @Input() username: string = '';
   @Input() avatar: string = '';
 
+  constructor() {}
 }

src/app/post/post.component.html

@@ -0,0 +1,4 @@
+<app-header></app-header>
+<h1>{{ concernedPost?.title }}</h1>
+<em>{{ concernedPost?.publicationDate | date: "dd/MM/yyyy" }}</em>
+<div [innerHTML]="concernedPost?.body"></div>

src/app/post/post.component.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {AuthorService} from '../services/author.service';
+import {CookieService} from 'ngx-cookie-service';
+import {Subscription} from 'rxjs';
+import {Post} from '../models/post';
+import {PostService} from '../services/post.service';
+import {HeaderComponent} from '../header/header.component';
+import {DatePipe, JsonPipe} from '@angular/common';
+
+@Component({
+  selector: 'app-post',
+  standalone: true,
+  imports: [
+    HeaderComponent,
+    JsonPipe,
+    DatePipe
+  ],
+  templateUrl: './post.component.html',
+  styleUrl: './post.component.css'
+})
+export class PostComponent {
+  subs: Subscription[] = [];
+  concernedPost: Post | undefined;
+
+  constructor(private route: ActivatedRoute,
+              private postService: PostService) {
+    this.route.paramMap.subscribe(params => {
+      const postId = params.get('postId');
+      if (postId) {
+        this.subs.push(
+          this.postService.getPost(BigInt(postId)).subscribe(post => {
+            this.concernedPost = post;
+          })
+        );
+      }
+    });
+
+  }
+
+}

src/app/services/post.service.ts

@@ -14,6 +14,10 @@ export class PostService {
     return this.httpClient.get<Post[]>(this.url);
   }
 
+  getPost(id: bigint) {
+    return this.httpClient.get<Post>(`${this.url}/${id}`);
+  }
+
   createPost(post: any, token: string | undefined): Observable<Post> {
     const httpOptions = {
       headers: new HttpHeaders({