refactor: Amélioration de la page d'accueil et du cache - Suppression du cache.service.ts redondant - Mise à jour de l'ordre des sections (ongoing, onDeck, recentlyRead) - Correction des types et interfaces

src/app/api/komga/cache/clear/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { serverCacheService } from "@/lib/services/server-cache.service";
+
+export async function POST() {
+  try {
+    serverCacheService.clear();
+    return NextResponse.json({ message: "Cache serveur supprimé avec succès" });
+  } catch (error) {
+    console.error("Erreur lors de la suppression du cache serveur:", error);
+    return NextResponse.json(
+      { error: "Erreur lors de la suppression du cache serveur" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/komga/test/route.ts

@@ -11,8 +11,11 @@ export async function POST(request: Request) {
       credentials: { username, password },
     };
 
-    const result = await TestService.testConnection(config);
-    return NextResponse.json(result);
+    const { libraries } = await TestService.testConnection(config);
+    return NextResponse.json({
+      message: "Connexion réussie",
+      librariesCount: libraries.length,
+    });
   } catch (error) {
     console.error("Erreur lors du test de connexion:", error);
     return NextResponse.json(

src/app/page.tsx

@@ -6,9 +6,9 @@ import { useRouter } from "next/navigation";
 import { KomgaBook, KomgaSeries } from "@/types/komga";
 
 interface HomeData {
-  onGoingSeries: KomgaSeries[];
+  ongoing: KomgaSeries[];
   recentlyRead: KomgaBook[];
-  popularSeries: KomgaSeries[];
+  onDeck: KomgaBook[];
 }
 
 export default function HomePage() {
@@ -29,9 +29,9 @@ export default function HomePage() {
         const jsonData = await response.json();
         // Transformer les données pour correspondre à l'interface HomeData
         setData({
-          onGoingSeries: jsonData.ongoing || [],
+          ongoing: jsonData.ongoing || [],
           recentlyRead: jsonData.recentlyRead || [],
-          popularSeries: jsonData.popular || [],
+          onDeck: jsonData.onDeck || [],
         });
       } catch (error) {
         console.error("Erreur lors de la récupération des données:", error);
@@ -75,6 +75,7 @@ export default function HomePage() {
   }
 
   if (!data) return null;
+  console.log("PAGE", data);
 
   return <HomeContent data={data} />;
 }

src/app/settings/page.tsx

@@ -1,16 +1,22 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
+import { Loader2, Network, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { storageService } from "@/lib/services/storage.service";
 import { AuthError } from "@/types/auth";
 
+interface ErrorMessage {
+  message: string;
+}
+
 export default function SettingsPage() {
   const router = useRouter();
   const formRef = useRef<HTMLFormElement>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [isCacheClearing, setIsCacheClearing] = useState(false);
   const [error, setError] = useState<AuthError | null>(null);
-  const [success, setSuccess] = useState(false);
+  const [success, setSuccess] = useState<string | null>(null);
   const [config, setConfig] = useState({
     serverUrl: "",
     username: "",
@@ -29,17 +35,38 @@ export default function SettingsPage() {
     }
   }, []);
 
-  const handleTest = async () => {
-    if (!formRef.current) return;
+  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");
+      }
+
+      setSuccess("Cache serveur supprimé avec succès");
+      router.refresh(); // Rafraîchir la page pour recharger les données
+    } catch (error) {
+      console.error("Erreur:", error);
+      setError({
+        code: "CACHE_CLEAR_ERROR",
+        message: error instanceof Error ? error.message : "Une erreur est survenue",
+      });
+    } finally {
+      setIsCacheClearing(false);
+    }
+  };
+
+  const handleTest = async () => {
     setIsLoading(true);
     setError(null);
-    setSuccess(false);
-
-    const formData = new FormData(formRef.current);
-    const serverUrl = formData.get("serverUrl") as string;
-    const username = formData.get("username") as string;
-    const password = formData.get("password") as string;
+    setSuccess(null);
 
     try {
       const response = await fetch("/api/komga/test", {
@@ -48,28 +75,23 @@ export default function SettingsPage() {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          serverUrl: serverUrl.trim(),
-          username,
-          password,
+          serverUrl: config.serverUrl,
+          username: config.username,
+          password: config.password,
         }),
       });
 
       if (!response.ok) {
         const data = await response.json();
-        throw new Error(
-          `${data.error}${
-            data.details ? `\n\nDétails: ${JSON.stringify(data.details, null, 2)}` : ""
-          }`
-        );
+        throw new Error(data.error || "Erreur lors du test de connexion");
       }
 
-      setSuccess(true);
+      setSuccess("Connexion réussie");
     } catch (error) {
-      console.error("Erreur de test:", error);
+      console.error("Erreur:", error);
       setError({
-        code: "INVALID_SERVER_URL",
-        message:
-          error instanceof Error ? error.message : "Impossible de se connecter au serveur Komga",
+        code: "TEST_CONNECTION_ERROR",
+        message: error instanceof Error ? error.message : "Une erreur est survenue",
       });
     } finally {
       setIsLoading(false);
@@ -78,7 +100,7 @@ export default function SettingsPage() {
 
   const handleSave = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setSuccess(false);
+    setSuccess(null);
 
     const formData = new FormData(event.currentTarget);
     const serverUrl = formData.get("serverUrl") as string;
@@ -100,120 +122,151 @@ export default function SettingsPage() {
     );
 
     setConfig(newConfig);
-    setSuccess(true);
+    setSuccess("Configuration sauvegardée avec succès");
   };
 
   return (
-    <div className="container max-w-2xl">
+    <div className="container py-8 space-y-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">Préférences</h1>
+      </div>
+
       <div className="space-y-6">
-        <div>
-          <h1 className="text-3xl font-bold">Préférences</h1>
-          <p className="text-muted-foreground mt-2">Configurez votre connexion au serveur Komga</p>
-        </div>
-
-        <div className="rounded-lg border bg-card text-card-foreground shadow-sm p-6">
-          <h2 className="text-xl font-semibold mb-4">Configuration du serveur Komga</h2>
-          <p className="text-sm text-muted-foreground mb-6">
-            Ces identifiants sont différents de ceux utilisés pour vous connecter à l'application.
-            Il s'agit des identifiants de votre serveur Komga.
-          </p>
-
-          <form ref={formRef} className="space-y-8" onSubmit={handleSave}>
+        {/* Section Configuration Komga */}
+        <div className="space-y-4">
+          <div>
+            <h2 className="text-xl font-semibold">Configuration Komga</h2>
+            <p className="text-sm text-muted-foreground">
+              Configurez les informations de connexion à votre serveur Komga. Ces informations sont
+              nécessaires pour accéder à votre bibliothèque.
+            </p>
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
+            {/* Formulaire de configuration */}
             <div className="space-y-4">
-              <div className="space-y-2">
-                <label
-                  htmlFor="serverUrl"
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              <form ref={formRef} onSubmit={handleSave} className="space-y-4">
+                <div className="space-y-2">
+                  <label htmlFor="serverUrl" className="text-sm font-medium">
+                    URL du serveur
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    L'adresse de votre serveur Komga, par exemple : https://komga.votredomaine.com
+                  </p>
+                  <input
+                    type="url"
+                    id="serverUrl"
+                    name="serverUrl"
+                    required
+                    defaultValue={config.serverUrl}
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="username" className="text-sm font-medium">
+                    Nom d'utilisateur
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    Votre identifiant de connexion au serveur Komga
+                  </p>
+                  <input
+                    type="text"
+                    id="username"
+                    name="username"
+                    required
+                    defaultValue={config.username}
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="password" className="text-sm font-medium">
+                    Mot de passe
+                  </label>
+                  <p className="text-xs text-muted-foreground">
+                    Votre mot de passe de connexion au serveur Komga
+                  </p>
+                  <input
+                    type="password"
+                    id="password"
+                    name="password"
+                    required
+                    defaultValue={config.password}
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                </div>
+                <button
+                  type="submit"
+                  className="w-full inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                 >
-                  URL du serveur Komga
-                </label>
-                <input
-                  id="serverUrl"
-                  name="serverUrl"
-                  type="url"
-                  placeholder="https://komga.example.com"
-                  defaultValue={config.serverUrl || process.env.NEXT_PUBLIC_DEFAULT_KOMGA_URL}
-                  required
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                />
-                <p className="text-sm text-muted-foreground">
-                  L'URL complète de votre serveur Komga, par exemple: https://komga.example.com
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <label
-                  htmlFor="username"
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                  Identifiant Komga
-                </label>
-                <input
-                  id="username"
-                  name="username"
-                  type="text"
-                  defaultValue={config.username}
-                  required
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                />
-                <p className="text-sm text-muted-foreground">
-                  L'identifiant de votre compte sur le serveur Komga
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <label
-                  htmlFor="password"
-                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                >
-                  Mot de passe Komga
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  defaultValue={config.password}
-                  required
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                />
-                <p className="text-sm text-muted-foreground">
-                  Le mot de passe de votre compte sur le serveur Komga
-                </p>
-              </div>
+                  Sauvegarder
+                </button>
+              </form>
             </div>
 
-            {error && (
-              <div className="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
-                {error.message}
+            {/* Actions */}
+            <div className="space-y-4">
+              <div>
+                <h3 className="text-sm font-medium">Actions</h3>
+                <p className="text-xs text-muted-foreground mb-4">
+                  Outils de gestion de la connexion et du cache
+                </p>
+                <div className="space-y-4">
+                  <div>
+                    <button
+                      onClick={handleTest}
+                      disabled={isLoading}
+                      className="w-full inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground ring-offset-background transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                    >
+                      {isLoading ? (
+                        <>
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          Test en cours...
+                        </>
+                      ) : (
+                        "Tester la connexion"
+                      )}
+                    </button>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Vérifie que la connexion au serveur est fonctionnelle avec les paramètres
+                      actuels
+                    </p>
+                  </div>
+                  <div>
+                    <button
+                      onClick={handleClearCache}
+                      disabled={isCacheClearing}
+                      className="w-full inline-flex items-center justify-center rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                    >
+                      {isCacheClearing ? (
+                        <>
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          Suppression...
+                        </>
+                      ) : (
+                        "Supprimer le cache serveur"
+                      )}
+                    </button>
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Vide le cache du serveur pour forcer le rechargement des données. Utile en cas
+                      de problème d'affichage.
+                    </p>
+                  </div>
+                </div>
               </div>
-            )}
-
-            {success && (
-              <div className="rounded-md bg-green-500/15 p-3 text-sm text-green-500">
-                {isLoading ? "Test de connexion réussi" : "Configuration sauvegardée"}
-              </div>
-            )}
-
-            <div className="flex space-x-4">
-              <button
-                type="button"
-                disabled={isLoading}
-                onClick={handleTest}
-                className="flex-1 inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                {isLoading ? "Test en cours..." : "Tester la connexion"}
-              </button>
-
-              <button
-                type="submit"
-                disabled={isLoading}
-                className="flex-1 inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-              >
-                Sauvegarder
-              </button>
             </div>
-          </form>
+          </div>
         </div>
+
+        {/* Messages de succès/erreur */}
+        {error && (
+          <div className="rounded-md bg-destructive/15 p-4">
+            <p className="text-sm text-destructive">{error.message}</p>
+          </div>
+        )}
+        {success && (
+          <div className="rounded-md bg-green-500/15 p-4">
+            <p className="text-sm text-green-500">{success}</p>
+          </div>
+        )}
       </div>
     </div>
   );