feature/favoris

src/app/app.module.ts

@@ -88,6 +88,14 @@ import { ToastModule } from 'primeng/toast';
       httpInterceptor: {
         allowedList: [
           // Tous les post, put, delete et patch sont protégés par le token
+          {
+            uri: `${environment.urlAPI}/favoris`,
+            httpMethod: HttpMethod.Get,
+          },
+          {
+            uri: `${environment.urlAPI}/chats/favoris`,
+            httpMethod: HttpMethod.Get,
+          },
           {
             uri: `${environment.urlAPI}/*`,
             httpMethod: HttpMethod.Post,

src/app/components/animaux/animaux-list/animaux-list.component.html

@@ -1,6 +1,6 @@
 <app-loader *ngIf="!isLoaded"></app-loader>
 
-<div *ngIf="chats && isLoaded"
+<div *ngIf="isLoaded && chats &&  chats.length > 0"
     class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
 
     <div class="grid gap-8 lg:grid-cols-3 sm:max-w-sm sm:mx-auto lg:max-w-full">
@@ -21,10 +21,15 @@
                                 aria-label="Association" title="L'association">{{chat.association.nom}}</a>
                             <span class="text-gray-600"> - {{formatDate(chat.createdAt)}}</span>
                         </p>
-                        <fa-icon *ngIf="auth.isAuthenticated$ | async" [icon]="chat.favoris.length > 0 ? faHeart : fasHeart" aria-label="Favori"
-                            title="Favori" class="mr-2 fa-xl"
-                            [ngClass]="{'text-red-500': chat.favoris.length > 0, 'cursor-pointer': true}"
-                            (click)="toggleFavori(chat)"></fa-icon>
+                        <fa-icon *ngIf="auth.isAuthenticated$ | async"
+                                [icon]="chat.isFavori ? faHeart : fasHeart"
+                                aria-label="Favori"
+                                title="Favori"
+                                class="mr-2 fa-xl"
+                                [ngClass]="{'text-red-500': chat.isFavori, 'cursor-pointer': true}"
+                                (click)="toggleFavori(chat)">
+                        </fa-icon>
+
                         <div [routerLink]="'/animaux/' + chat.id" aria-label="Animaux" title="Découvrir plus"
                             class="inline-block mb-3 text-2xl font-bold leading-5 transition-colors duration-200 hover:text-deep-purple-accent-700">
                             <a [routerLink]="'/animaux/' + chat.id" class="inline-block">{{chat.nom}}</a>
@@ -40,4 +45,13 @@
         </div>
 
     </div>
-</div>
+</div>
+
+
+<div *ngIf="isLoaded && (!chats || chats.length == 0)" class="text-center mt-12" >
+    <h2 class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">
+        Pas de chat pour le moment :/
+    </h2>
+</div>
+
+

src/app/components/animaux/animaux-list/animaux-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, Input } from '@angular/core';
 import { faMars, faVenus, faHeart } from '@fortawesome/free-solid-svg-icons';
 import { faHeart as fasHeart } from '@fortawesome/free-regular-svg-icons';
 
@@ -17,6 +17,7 @@ import { Subscription } from 'rxjs';
   providers: [DatePipe],
 })
 export class AnimauxListComponent {
+  @Input() profileContext: boolean = false;
   isLoaded: boolean = false;
   faMars = faMars;
   faVenus = faVenus;
@@ -35,33 +36,32 @@ export class AnimauxListComponent {
   ) {}
 
   chats: Chat[] = [];
-  isFav = false;
+  favoris: Favori[] = [];
   private subscriptions = new Subscription();
 
 
   ngOnInit() {
-    this.getCats();
+    if (this.profileContext) {
+      this.getCatByFavoris();
+    } else {
+      this.getFavs();
+      this.getCats();
+    }
   }
 
   toggleFavori(chat: Chat) {
-    const isChatInFavoris = chat.favoris.length > 0;
-
-    if (isChatInFavoris) {
-      // Si le chat est déjà dans la liste des favoris, retire-le
-      const favoriToRemove = chat.favoris[0];
-      chat.favoris = [];
-
-      this.appService.removeFavori(favoriToRemove.id!).subscribe((favori) => {
-        console.log('Favori retiré:', favori);
+    if (chat.isFavori) {
+      // Si le chat est déjà un favori, retirez-le des favoris
+      this.appService.removeFavoriByCat(chat.id).subscribe(() => {
+        chat.isFavori = false;
+        console.log('Favori retiré');
         this.toastr.info('Chat retiré des favoris', 'Favori');
       });
     } else {
-      // Sinon, ajoute-le aux favoris
-      const newFavori: Favori = {
-        chatId: chat.id,
-      };
-      this.appService.createFavori(newFavori).subscribe((favori) => {
-        chat.favoris.push(favori);
+      // Sinon, ajoutez-le aux favoris
+      this.appService.createFavori({ chatId: chat.id }).subscribe(() => {
+        chat.isFavori = true;
+        console.log('Favori ajouté');
         this.toastr.info('Chat ajouté aux favoris', 'Favori');
       });
     }
@@ -84,6 +84,43 @@ export class AnimauxListComponent {
     this.subscriptions.add(catSubscription);
   }
 
+  getCatByFavoris() {
+    const favCatSubscription = this.appService.getCatByFavoris().subscribe({
+      next: (chats) => {
+        this.chats = chats;
+        this.isLoaded = true;
+        this.chats.forEach(chat => chat.isFavori = true);
+      },
+      error: (error) => {
+        const errorText = 'Erreur lors de la récupération des chats favoris';
+        console.error(errorText, error);
+        this.toastr.error(errorText, 'Erreur');
+      },
+      complete: () => console.log('Chats favoris chargés')
+    });
+
+    this.subscriptions.add(favCatSubscription);
+  }
+
+  getFavs() {
+    const favSubscription = this.appService.getFavorisByUser().subscribe({
+      next: (favoriIds: number[]) => {
+        this.chats.forEach(chat => {
+          chat.isFavori = favoriIds.includes(chat.id);
+        });
+      },
+      error: (error) => {
+        const errorText = 'Erreur lors de la récupération des favoris';
+        console.error(errorText, error);
+        this.toastr.error(errorText, 'Erreur');
+      },
+      complete: () => console.log('Completion handler')
+    });
+    this.subscriptions.add(favSubscription);
+  }
+
+
+
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
   }

src/app/components/profil/profil.component.html

@@ -58,9 +58,9 @@ <h3 class="text-4xl font-semibold leading-normal mb-2 text-blueGray-700 mb-2">{{
           <div class="mt-10 py-10 border-t border-blueGray-200 text-center">
             <div class="flex flex-wrap justify-center">
               <div>
-                <h2 class="text-left">Mes favoris:</h2>
+                <h2 class="text-center">Mes favoris:</h2>
                 <div>
-                  <app-animaux-list></app-animaux-list>
+                  <app-animaux-list [profileContext]="true"></app-animaux-list>
                 </div>
               </div>
             </div>

src/app/interfaces/interfaces.ts

@@ -30,7 +30,7 @@ export interface Chat {
   favoris: Favori[];
   photos: Photo[];
   videos: Video[];
-  isFav: boolean;
+  isFavori?: boolean;
 }
 
 export interface Photo {

src/app/services/app.service.ts

@@ -34,6 +34,14 @@ export class AppService {
     );
   }
 
+  getCatByFavoris(): Observable<Chat[]> {
+    return this.http.get(this.api + '/chats/favoris').pipe(
+      map((res: any) => res),
+      share(),
+      take(1)
+    );
+  }
+
   getByIdCat(id: number): Observable<Chat> {
     return this.http.get(this.api + '/chats/' + id).pipe(
       map((res: any) => res),
@@ -58,7 +66,15 @@ export class AppService {
     );
   }
 
-  removeFavori(id: number): Observable<Favori> {
+  getFavorisByUser(): Observable<number[]> {
+    return this.http.get(this.api + '/favoris').pipe(
+      map((res: any) => res),
+      share(),
+      take(1)
+    );
+  }
+
+  removeFavoriByCat(id: number): Observable<Favori> {
     return this.http.delete(this.api + '/favoris/' + id).pipe(
       map((res: any) => res),
       share(),