refacto(db): favorites on db

src/components/home/HeroSection.tsx

@@ -11,10 +11,10 @@ interface HeroSectionProps {
 }
 
 export function HeroSection({ series }: HeroSectionProps) {
-  console.log("HeroSection - Séries reçues:", {
-    count: series?.length || 0,
-    firstSeries: series?.[0],
-  });
+  // console.log("HeroSection - Séries reçues:", {
+  //   count: series?.length || 0,
+  //   firstSeries: series?.[0],
+  // });
 
   return (
     <div className="relative h-[500px] -mx-4 sm:-mx-8 lg:-mx-14 overflow-hidden">

src/components/home/HomeContent.tsx

@@ -26,11 +26,11 @@ export function HomeContent({ data }: HomeContentProps) {
   };
 
   // Vérification des données pour le debug
-  console.log("HomeContent - Données reçues:", {
-    ongoingCount: data.ongoing?.length || 0,
-    recentlyReadCount: data.recentlyRead?.length || 0,
-    onDeckCount: data.onDeck?.length || 0,
-  });
+  // console.log("HomeContent - Données reçues:", {
+  //   ongoingCount: data.ongoing?.length || 0,
+  //   recentlyReadCount: data.recentlyRead?.length || 0,
+  //   onDeckCount: data.onDeck?.length || 0,
+  // });
 
   return (
     <main className="container mx-auto px-4 py-8 space-y-12">

src/components/layout/Sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { BookOpen, Home, Library, Settings, LogOut, RefreshCw, Star } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
@@ -6,7 +8,6 @@ import { authService } from "@/lib/services/auth.service";
 import { useEffect, useState, useCallback } from "react";
 import { KomgaLibrary, KomgaSeries } from "@/types/komga";
 import { storageService } from "@/lib/services/storage.service";
-import { FavoriteService } from "@/lib/services/favorite.service";
 
 interface SidebarProps {
   isOpen: boolean;
@@ -43,13 +44,20 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
   const fetchFavorites = useCallback(async () => {
     setIsLoadingFavorites(true);
     try {
-      const favoriteIds = FavoriteService.getAllFavoriteIds();
+      // Récupérer les IDs des favoris depuis l'API
+      const favoritesResponse = await fetch("/api/komga/favorites");
+      if (!favoritesResponse.ok) {
+        throw new Error("Erreur lors de la récupération des favoris");
+      }
+      const favoriteIds = await favoritesResponse.json();
+
       if (favoriteIds.length === 0) {
         setFavorites([]);
         return;
       }
 
-      const promises = favoriteIds.map(async (id) => {
+      // Récupérer les détails des séries pour chaque ID
+      const promises = favoriteIds.map(async (id: string) => {
         const response = await fetch(`/api/komga/series/${id}`);
         if (!response.ok) return null;
         return response.json();
@@ -69,7 +77,7 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
   useEffect(() => {
     fetchLibraries();
     fetchFavorites();
-  }, []); // Suppression de la dépendance pathname
+  }, [fetchLibraries, fetchFavorites]);
 
   // Mettre à jour les favoris quand ils changent
   useEffect(() => {
@@ -77,18 +85,10 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
       fetchFavorites();
     };
 
-    // Écouter les changements de favoris dans la même fenêtre
     window.addEventListener("favoritesChanged", handleFavoritesChange);
-    // Écouter les changements de favoris dans d'autres fenêtres
-    window.addEventListener("storage", (e) => {
-      if (e.key === "stripstream_favorites") {
-        fetchFavorites();
-      }
-    });
 
     return () => {
       window.removeEventListener("favoritesChanged", handleFavoritesChange);
-      window.removeEventListener("storage", handleFavoritesChange);
     };
   }, [fetchFavorites]);
 

src/components/layout/SidebarWrapper.tsx

@@ -0,0 +1,26 @@
+import { FavoriteService } from "@/lib/services/favorite.service";
+import { LibraryService } from "@/lib/services/library.service";
+import { ClientSidebar } from "./ClientSidebar";
+
+export async function SidebarWrapper() {
+  // Récupérer les favoris depuis le serveur
+  const favoriteIds = await FavoriteService.getAllFavoriteIds();
+
+  // Récupérer les détails des séries favorites
+  const favoritesPromises = favoriteIds.map(async (id) => {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/series/${id}`, {
+      headers: {
+        Accept: "application/json",
+      },
+    });
+    if (!response.ok) return null;
+    return response.json();
+  });
+
+  // Récupérer les bibliothèques
+  const libraries = await LibraryService.getLibraries();
+
+  const favorites = (await Promise.all(favoritesPromises)).filter(Boolean);
+
+  return { favorites, libraries };
+}

src/components/series/SeriesHeader.tsx

@@ -1,11 +1,9 @@
 "use client";
 
 import Image from "next/image";
-import { ImageOff, Book, BookOpen, BookMarked } from "lucide-react";
+import { ImageOff, Book, BookOpen, BookMarked, Star, StarOff } from "lucide-react";
 import { KomgaSeries } from "@/types/komga";
 import { useState, useEffect } from "react";
-import { FavoriteService } from "@/lib/services/favorite.service";
-import { Star, StarOff } from "lucide-react";
 import { Button } from "../ui/button";
 import { useToast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
@@ -56,13 +54,27 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
   const [readingStatus, setReadingStatus] = useState<ReadingStatusInfo>(
     getReadingStatusInfo(series)
   );
-  const [isFavorite, setIsFavorite] = useState(FavoriteService.isFavorite(series.id));
+  const [isFavorite, setIsFavorite] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [mounted, setMounted] = useState(false);
 
+  // Vérifier si la série est dans les favoris au chargement
   useEffect(() => {
+    const checkFavorite = async () => {
+      try {
+        const response = await fetch("/api/komga/favorites");
+        if (response.ok) {
+          const favoriteIds = await response.json();
+          setIsFavorite(favoriteIds.includes(series.id));
+        }
+      } catch (error) {
+        console.error("Erreur lors de la vérification des favoris:", error);
+      }
+    };
+
+    checkFavorite();
     setMounted(true);
-  }, []);
+  }, [series.id]);
 
   useEffect(() => {
     setReadingStatus(getReadingStatusInfo(series));
@@ -82,18 +94,29 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
     }
   }, [series.metadata.language]);
 
-  const handleToggleFavorite = () => {
+  const handleToggleFavorite = async () => {
     try {
       setIsLoading(true);
-      if (isFavorite) {
-        FavoriteService.removeFromFavorites(series.id);
-      } else {
-        FavoriteService.addToFavorites(series.id);
+      const response = await fetch("/api/komga/favorites", {
+        method: isFavorite ? "DELETE" : "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ seriesId: series.id }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Erreur lors de la modification des favoris");
       }
+
       setIsFavorite(!isFavorite);
       if (onSeriesUpdate) {
         onSeriesUpdate({ ...series, favorite: !isFavorite });
       }
+
+      // Dispatch l'événement pour notifier les autres composants
+      window.dispatchEvent(new Event("favoritesChanged"));
+
       toast({
         title: isFavorite ? "Retiré des favoris" : "Ajouté aux favoris",
         variant: "default",