diff --git a/src/components/home/HomeContent.tsx b/src/components/home/HomeContent.tsx
index 63cced1..8519c2d 100644
--- a/src/components/home/HomeContent.tsx
+++ b/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 (
diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index 593db05..bfca57f 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -17,16 +17,6 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
const router = useRouter();
const pathname = usePathname();
- // Vérification de l'authentification
- useEffect(() => {
- const isPublicRoute = publicRoutes.includes(pathname);
- const isAuthenticated = authService.isAuthenticated();
-
- if (!isAuthenticated && !isPublicRoute) {
- router.push(`/login?from=${encodeURIComponent(pathname)}`);
- }
- }, [pathname, router]);
-
const handleCloseSidebar = () => {
setIsSidebarOpen(false);
};
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 598c013..dd7b3a5 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/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";
@@ -5,8 +7,6 @@ import { cn } from "@/lib/utils";
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 +43,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 +76,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 +84,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]);
@@ -99,7 +98,6 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
const handleLogout = () => {
authService.logout();
- storageService.clearAll();
setLibraries([]);
setFavorites([]);
onClose();
diff --git a/src/components/layout/SidebarWrapper.tsx b/src/components/layout/SidebarWrapper.tsx
new file mode 100644
index 0000000..7f4cecb
--- /dev/null
+++ b/src/components/layout/SidebarWrapper.tsx
@@ -0,0 +1,25 @@
+import { FavoriteService } from "@/lib/services/favorite.service";
+import { LibraryService } from "@/lib/services/library.service";
+
+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 };
+}
diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index 85c05d8..b104966 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/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(
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",
diff --git a/src/components/settings/ClientSettings.tsx b/src/components/settings/ClientSettings.tsx
new file mode 100644
index 0000000..5160464
--- /dev/null
+++ b/src/components/settings/ClientSettings.tsx
@@ -0,0 +1,487 @@
+"use client";
+
+import { useState } from "react";
+import { Loader2, Network, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { AuthError } from "@/types/auth";
+import { useToast } from "@/components/ui/use-toast";
+
+interface ErrorMessage {
+ message: string;
+}
+
+interface KomgaConfig {
+ url: string;
+ username: string;
+ password: string;
+ userId: string;
+}
+
+interface TTLConfigData {
+ defaultTTL: number;
+ homeTTL: number;
+ librariesTTL: number;
+ seriesTTL: number;
+ booksTTL: number;
+ imagesTTL: number;
+}
+
+interface ClientSettingsProps {
+ initialConfig: KomgaConfig | null;
+ initialTTLConfig: TTLConfigData | null;
+}
+
+export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettingsProps) {
+ const router = useRouter();
+ const { toast } = useToast();
+ const [isLoading, setIsLoading] = useState(false);
+ const [isSaving, setIsSaving] = useState(false);
+ const [isCacheClearing, setIsCacheClearing] = useState(false);
+ const [error, setError] = useState(null);
+ const [success, setSuccess] = useState(null);
+ const [config, setConfig] = useState({
+ serverUrl: initialConfig?.url || "",
+ username: initialConfig?.username || "",
+ password: initialConfig?.password || "",
+ });
+ const [ttlConfig, setTTLConfig] = useState(
+ initialTTLConfig || {
+ defaultTTL: 5,
+ homeTTL: 5,
+ librariesTTL: 1440,
+ seriesTTL: 5,
+ booksTTL: 5,
+ imagesTTL: 1440,
+ }
+ );
+
+ const handleClearCache = async () => {
+ setIsCacheClearing(true);
+ setError(null);
+ setSuccess(null);
+
+ try {
+ const response = await fetch("/api/komga/cache/clear", {
+ method: "POST",
+ });
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error || "Erreur lors de la suppression du cache");
+ }
+
+ toast({
+ title: "Cache supprimé",
+ description: "Cache serveur supprimé avec succès",
+ });
+ router.refresh();
+ } catch (error) {
+ console.error("Erreur:", error);
+ toast({
+ variant: "destructive",
+ title: "Erreur",
+ description: error instanceof Error ? error.message : "Une erreur est survenue",
+ });
+ } finally {
+ setIsCacheClearing(false);
+ }
+ };
+
+ const handleTest = async () => {
+ setIsLoading(true);
+ setError(null);
+ setSuccess(null);
+
+ try {
+ const response = await fetch("/api/komga/test", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ serverUrl: config.serverUrl,
+ username: config.username,
+ password: config.password,
+ }),
+ });
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error || "Erreur lors du test de connexion");
+ }
+
+ toast({
+ title: "Connexion réussie",
+ description: "La connexion au serveur Komga a été établie avec succès",
+ });
+ } catch (error) {
+ console.error("Erreur:", error);
+ toast({
+ variant: "destructive",
+ title: "Erreur",
+ description: error instanceof Error ? error.message : "Une erreur est survenue",
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleSave = async (event: React.FormEvent) => {
+ event.preventDefault();
+ setSuccess(null);
+ setError(null);
+ setIsSaving(true);
+
+ const formData = new FormData(event.currentTarget);
+ const serverUrl = formData.get("serverUrl") as string;
+ const username = formData.get("username") as string;
+ const password = formData.get("password") as string;
+
+ const newConfig = {
+ serverUrl: serverUrl.trim(),
+ username,
+ password,
+ };
+
+ try {
+ const response = await fetch("/api/komga/config", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ url: newConfig.serverUrl,
+ username: newConfig.username,
+ password: newConfig.password,
+ }),
+ });
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error || "Erreur lors de la sauvegarde de la configuration");
+ }
+
+ const komgaConfig = {
+ serverUrl: newConfig.serverUrl,
+ credentials: {
+ username: newConfig.username,
+ password: newConfig.password,
+ },
+ };
+
+ setConfig(newConfig);
+
+ // Émettre un événement pour notifier les autres composants
+ const configChangeEvent = new CustomEvent("komga-config-changed", { detail: komgaConfig });
+ window.dispatchEvent(configChangeEvent);
+
+ toast({
+ title: "Configuration sauvegardée",
+ description: "La configuration a été sauvegardée avec succès",
+ });
+ } catch (error) {
+ console.error("Erreur lors de la sauvegarde:", error);
+ toast({
+ variant: "destructive",
+ title: "Erreur",
+ description:
+ error instanceof Error ? error.message : "Une erreur est survenue lors de la sauvegarde",
+ });
+ } finally {
+ setIsSaving(false);
+ }
+ };
+
+ const handleInputChange = (event: React.ChangeEvent) => {
+ const { name, value } = event.target;
+ setConfig((prev) => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ const handleTTLChange = (event: React.ChangeEvent) => {
+ const { name, value } = event.target;
+ setTTLConfig((prev) => ({
+ ...prev,
+ [name]: parseInt(value || "0", 10),
+ }));
+ };
+
+ const handleSaveTTL = async (event: React.FormEvent) => {
+ event.preventDefault();
+ setSuccess(null);
+
+ try {
+ const response = await fetch("/api/komga/ttl-config", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(ttlConfig),
+ });
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error || "Erreur lors de la sauvegarde de la configuration TTL");
+ }
+
+ toast({
+ title: "Configuration TTL sauvegardée",
+ description: "La configuration des TTL a été sauvegardée avec succès",
+ });
+ } catch (error) {
+ console.error("Erreur lors de la sauvegarde:", error);
+ toast({
+ variant: "destructive",
+ title: "Erreur",
+ description:
+ error instanceof Error ? error.message : "Une erreur est survenue lors de la sauvegarde",
+ });
+ }
+ };
+
+ return (
+
+
+
Préférences
+
+
+ {/* Messages de succès/erreur */}
+ {error && (
+
+ )}
+ {success && (
+
+ )}
+
+
+ {/* Section Configuration Komga */}
+
+
+
+
+
+ Configuration Komga
+
+
+ Configurez les informations de connexion à votre serveur Komga.
+
+
+
+ {/* Formulaire de configuration */}
+
+
+
+
+ {/* Section Configuration du Cache */}
+
+
+
+
+
+ Configuration du Cache
+
+
+ Gérez les paramètres de mise en cache des données.
+
+
+
+ {/* Formulaire TTL */}
+
+
+
+
+