Added posts and possibility to like post

src/app/components/post/post.component.html

@@ -1,3 +1,32 @@
-@for (post of posts(); track post.id) {
-    <img [src]="'data:image/jpeg;base64,' + post.proof" alt=""/>
+@for (post of localPosts(); track post.id) {
+    <ion-item lines="full">
+        <div class="mt-2">
+            <div class="flex items-center gap-2 p-3">
+                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs bg-teal-100 text-teal-700 max-w-xs">
+                    {{ post.username.substring(0, 2) }}
+                </div>
+                <span class="text-lg font-mono ml-2">{{ post.username }}</span>
+            </div>
+
+            <div class="aspect-square overflow-hidden p-1">
+                <img [src]="'data:image/jpeg;base64,' + post.proof"
+                     alt=""
+                     class="w-full h-full object-cover"/>
+            </div>
+
+            <div class="px-3 py-3">
+                <div class="flex items-center gap-2 mb-1">
+                    <button class="flex items-center p-0 bg-transparent border-none cursor-pointer" (click)="likePost(post.id)">
+                        @if (post.isLiked) {
+                            <ion-icon name="heart" class="text-red-700 text-2xl"></ion-icon>
+                        } @else {
+                            <ion-icon name="heart-outline" class="text-gray-500 text-2xl"></ion-icon>
+                        }
+                    </button>
+                    <span class="text-xs text-gray-400">{{ post.likes }} Likes</span>
+                </div>
+                <p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
+            </div>
+        </div>
+    </ion-item>
 }

src/app/components/post/post.component.ts

@@ -1,14 +1,25 @@
 import {Component, inject, input, OnInit, signal} from '@angular/core';
-import {FriendsService, GetFriendDto, GetPostDto} from "../../services/api";
+import {FriendsService, GetFriendDto, GetPostDto, PostsService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
-import {LoadingController, ToastController} from "@ionic/angular";
+import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
+import {heart, heartOutline} from 'ionicons/icons';
+import {addIcons} from "ionicons";
+
+addIcons({
+    "heart": heart,
+    "heartOutline": heartOutline,
+});
 
 @Component({
     selector: 'app-post',
     templateUrl: './post.component.html',
     styleUrls: ['./post.component.scss'],
+    imports: [
+        IonicModule
+    ]
 })
 export class PostComponent implements OnInit {
+    private postsService = inject(PostsService);
     private friendsService = inject(FriendsService);
     private loadCtrl = inject(LoadingController);
     private toastCtrl = inject(ToastController);
@@ -16,6 +27,7 @@ export class PostComponent implements OnInit {
     friends = signal<GetFriendDto[]>([]);
 
     posts = input.required<GetPostDto[]>();
+    localPosts = signal<GetPostDto[]>([]);
     postsFriends = signal<GetPostDto[]>([]);
 
     async ngOnInit() {
@@ -25,10 +37,12 @@ export class PostComponent implements OnInit {
         });
         await loading.present();
 
+        this.localPosts.set(this.posts());
+
         try {
             const friends = await firstValueFrom(this.friendsService.getAllFriendsEndpoint());
             this.friends.set(friends);
-            this.postsFriends.set(this.posts().filter(post => this.friends().map(x => x.friendId).includes(post.userId)));
+            this.postsFriends.set(this.localPosts().filter(post => this.friends().map(x => x.friendId).includes(post.userId)));
         } catch {
             const toast = await this.toastCtrl.create({
                 message: 'Erreur lors du chargement des amis.',
@@ -39,4 +53,30 @@ export class PostComponent implements OnInit {
         }
         await loading.dismiss();
     }
+
+    async likePost(postId: number) {
+        this.localPosts.update(x => x.map(x => x.id != postId ? x :{
+            ...x,
+            likes: x.isLiked ? x.likes - 1 : x.likes + 1,
+            isLiked: !x.isLiked
+        }));
+
+        const loading = await this.loadCtrl.create({
+            message: 'Chargement...',
+            spinner: 'lines-sharp-small'
+        });
+        await loading.present();
+
+        try {
+            await firstValueFrom(this.postsService.patchLikeEndpoint(postId));
+        } catch {
+            const toast = await this.toastCtrl.create({
+                message: 'Impossible d\'aimer ce contenu',
+                duration: 2000,
+                color: 'danger'
+            });
+            await toast.present();
+        }
+        await loading.dismiss();
+    }
 }

src/app/pages/publication/publication.component.html

@@ -5,5 +5,24 @@
 </ion-header>
 
 <ion-content style="--background: #f7f6f2;">
-    <app-post [posts]="posts()"></app-post>
+    @if (posts().length) {
+        <app-post [posts]="posts()"></app-post>
+    } @else {
+        <ion-item lines="none" class="mt-[60%]" style="--background: #F7F6F2;">
+            <div class="flex flex-col items-center w-full gap-3">
+                <div class="relative w-14 h-14">
+                    <div class="w-14 h-14 rounded-full bg-white border border-stone-200 flex items-center justify-center">
+                        <ion-icon name="planet" class="text-2xl text-stone-400"></ion-icon>
+                    </div>
+                    <div class="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-white border border-stone-200 flex items-center justify-center">
+                        <ion-icon name="moon-outline" class="text-[10px] text-stone-400"></ion-icon>
+                    </div>
+                </div>
+                <div class="text-center flex flex-col gap-1">
+                    <p class="m-0 text-sm font-medium text-stone-400">C'est bien vide par ici</p>
+                    <p class="m-0 text-xs text-stone-300 leading-relaxed">Les challengers dorment encore</p>
+                </div>
+            </div>
+        </ion-item>
+    }
 </ion-content>

src/app/pages/publication/publication.component.ts

@@ -3,6 +3,13 @@ import {IonicModule, LoadingController, ToastController} from "@ionic/angular";
 import {GetPostDto, PostsService} from "../../services/api";
 import {firstValueFrom} from "rxjs";
 import {PostComponent} from "../../components/post/post.component";
+import {planet, moonOutline} from 'ionicons/icons';
+import {addIcons} from "ionicons";
+
+addIcons({
+    "planet": planet,
+    "moon-outline": moonOutline,
+})
 
 @Component({
     selector: 'app-publication',