From 42116be9a698d2584615429861be81109d847b0a Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Thu, 14 May 2026 14:07:37 +0100
Subject: [PATCH] Added segments to separe friends and global

---
 src/app/components/post/post.component.html | 104 ++++++++++++++------
 src/app/components/post/post.component.ts   |  16 +--
 2 files changed, 83 insertions(+), 37 deletions(-)

diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index aa40640..082f9e3 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -1,32 +1,78 @@
-@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>
+<ion-segment>
+    <ion-segment-button value="first" content-id="global">
+        <ion-label>Général</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="second" content-id="friends">
+        <ion-label>Amis</ion-label>
+    </ion-segment-button>
+</ion-segment>
+<ion-segment-view>
+    <ion-segment-content id="global">
+        @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="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 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>
-                <p class="text-sm text-gray-500 leading-snug italic">{{ post.libelle }}</p>
-            </div>
-        </div>
-    </ion-item>
-}
\ No newline at end of file
+            </ion-item>
+        }
+    </ion-segment-content>
+    <ion-segment-content id="friends">
+        @for (post of postsFriends(); 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>
+        }
+    </ion-segment-content>
+</ion-segment-view>
\ No newline at end of file
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index 3da856e..2e187e9 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -55,21 +55,22 @@ export class PostComponent implements OnInit {
     }
 
     async likePost(postId: number) {
-        this.localPosts.update(x => x.map(x => x.id != postId ? x :{
+        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));
+            this.postsFriends.set(this.localPosts());
         } catch {
+            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 toast = await this.toastCtrl.create({
                 message: 'Impossible d\'aimer ce contenu',
                 duration: 2000,
@@ -77,6 +78,5 @@ export class PostComponent implements OnInit {
             });
             await toast.present();
         }
-        await loading.dismiss();
     }
 }