From e22095806dd3b5d32752a14a4313b18d0baa3ef9 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 14 Feb 2025 13:08:05 +0100
Subject: [PATCH] refacto: book page server side

---
 src/app/books/[bookId]/page.tsx             | 168 ++------------------
 src/components/reader/ClientBookReader.tsx  |  45 ++++++
 src/components/reader/ClientBookWrapper.tsx |  33 ++++
 src/components/skeletons/BookSkeleton.tsx   |  16 ++
 4 files changed, 108 insertions(+), 154 deletions(-)
 create mode 100644 src/components/reader/ClientBookReader.tsx
 create mode 100644 src/components/reader/ClientBookWrapper.tsx
 create mode 100644 src/components/skeletons/BookSkeleton.tsx

diff --git a/src/app/books/[bookId]/page.tsx b/src/app/books/[bookId]/page.tsx
index cbce58a..f9f103d 100644
--- a/src/app/books/[bookId]/page.tsx
+++ b/src/app/books/[bookId]/page.tsx
@@ -1,160 +1,20 @@
-"use client";
+import { Suspense } from "react";
+import { ClientBookWrapper } from "@/components/reader/ClientBookWrapper";
+import { BookSkeleton } from "@/components/skeletons/BookSkeleton";
+import { BookService } from "@/lib/services/book.service";
+import { notFound } from "next/navigation";
 
-import { useRouter } from "next/navigation";
-import { KomgaBook } from "@/types/komga";
-import { useEffect, useState } from "react";
-import { BookReader } from "@/components/reader/BookReader";
-import { ImageOff } from "lucide-react";
-import Image from "next/image";
-import { useToast } from "@/components/ui/use-toast";
+export default async function BookPage({ params }: { params: { bookId: string } }) {
+  try {
+    const data = await BookService.getBook(params.bookId);
 
-interface BookData {
-  book: KomgaBook;
-  pages: number[];
-}
-
-export default function BookPage({ params }: { params: { bookId: string } }) {
-  const router = useRouter();
-  const { toast } = useToast();
-  const [data, setData] = useState<BookData | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [imageError, setImageError] = useState(false);
-  const [isReading, setIsReading] = useState(false);
-
-  useEffect(() => {
-    const fetchBookData = async () => {
-      try {
-        const response = await fetch(`/api/komga/books/${params.bookId}`);
-        if (!response.ok) {
-          const data = await response.json();
-          throw new Error(data.error || "Erreur lors de la récupération du tome");
-        }
-        const data = await response.json();
-
-        // Si le livre a une progression de lecture, on l'affiche dans un toast
-        if (data.book.readProgress?.page > 0) {
-          toast({
-            title: "Reprise de la lecture",
-            description: `Reprise à la page ${data.book.readProgress.page}`,
-          });
-        }
-
-        setData(data);
-        setIsReading(true);
-      } catch (error) {
-        console.error("Erreur:", error);
-        setError(error instanceof Error ? error.message : "Une erreur est survenue");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchBookData();
-  }, [params.bookId, toast]);
-
-  const handleCloseReader = () => {
-    setIsReading(false);
-    router.back();
-  };
-
-  if (isLoading) {
     return (
-      <div className="container py-8 space-y-8 animate-pulse">
-        <div className="flex flex-col md:flex-row gap-8">
-          <div className="w-48 h-72 bg-muted rounded-lg" />
-          <div className="flex-1 space-y-4">
-            <div className="h-8 bg-muted rounded w-1/3" />
-            <div className="h-4 bg-muted rounded w-1/4" />
-            <div className="h-24 bg-muted rounded" />
-          </div>
-        </div>
-      </div>
+      <Suspense fallback={<BookSkeleton />}>
+        <ClientBookWrapper book={data.book} pages={data.pages} />
+      </Suspense>
     );
+  } catch (error) {
+    console.error("Erreur:", error);
+    notFound();
   }
-
-  if (error || !data) {
-    return (
-      <div className="container py-8">
-        <div className="rounded-md bg-destructive/15 p-4">
-          <p className="text-sm text-destructive">{error || "Données non disponibles"}</p>
-        </div>
-      </div>
-    );
-  }
-
-  const { book, pages } = data;
-
-  if (isReading) {
-    return <BookReader book={book} pages={pages} onClose={handleCloseReader} />;
-  }
-
-  return (
-    <div className="container py-8 space-y-8">
-      {/* En-tête du tome */}
-      <div className="flex flex-col md:flex-row gap-8">
-        {/* Couverture */}
-        <div className="w-48 shrink-0">
-          <div className="relative aspect-[2/3] rounded-lg overflow-hidden bg-muted">
-            {!imageError ? (
-              <Image
-                src={`/api/komga/images/books/${book.id}/thumbnail`}
-                alt={`Couverture de ${book.metadata.title}`}
-                fill
-                className="object-cover"
-                onError={() => setImageError(true)}
-              />
-            ) : (
-              <div className="w-full h-full flex items-center justify-center">
-                <ImageOff className="w-12 h-12" />
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Informations */}
-        <div className="flex-1 space-y-4">
-          <div>
-            <h1 className="text-3xl font-bold">
-              {book.metadata.title || `Tome ${book.metadata.number}`}
-            </h1>
-            <p className="text-muted-foreground">
-              {book.seriesTitle} - Tome {book.metadata.number}
-            </p>
-          </div>
-
-          {book.metadata.summary && (
-            <p className="text-muted-foreground">{book.metadata.summary}</p>
-          )}
-
-          <div className="space-y-1 text-sm text-muted-foreground">
-            {book.metadata.releaseDate && (
-              <div>
-                <span className="font-medium">Date de sortie :</span>{" "}
-                {new Date(book.metadata.releaseDate).toLocaleDateString()}
-              </div>
-            )}
-            {book.metadata.authors?.length > 0 && (
-              <div>
-                <span className="font-medium">Auteurs :</span>{" "}
-                {book.metadata.authors
-                  .map((author) => `${author.name} (${author.role})`)
-                  .join(", ")}
-              </div>
-            )}
-            {book.size && (
-              <div>
-                <span className="font-medium">Taille :</span> {book.size}
-              </div>
-            )}
-            {book.media.pagesCount > 0 && (
-              <div>
-                <span className="font-medium">Pages :</span> {book.media.pagesCount}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
 }
diff --git a/src/components/reader/ClientBookReader.tsx b/src/components/reader/ClientBookReader.tsx
new file mode 100644
index 0000000..279efa2
--- /dev/null
+++ b/src/components/reader/ClientBookReader.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { KomgaBook } from "@/types/komga";
+import { BookReader } from "./BookReader";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
+
+interface ClientBookReaderProps {
+  book: KomgaBook;
+  pages: number[];
+}
+
+export function ClientBookReader({ book, pages }: ClientBookReaderProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isReading, setIsReading] = useState(false);
+
+  const handleStartReading = () => {
+    // Si le livre a une progression de lecture, on l'affiche dans un toast
+    if (book.readProgress && book.readProgress.page && book.readProgress.page > 0) {
+      toast({
+        title: "Reprise de la lecture",
+        description: `Reprise à la page ${book.readProgress.page}`,
+      });
+    }
+    setIsReading(true);
+  };
+
+  const handleCloseReader = () => {
+    setIsReading(false);
+    router.back();
+  };
+
+  if (isReading) {
+    return <BookReader book={book} pages={pages} onClose={handleCloseReader} />;
+  }
+
+  return (
+    <Button onClick={handleStartReading} size="lg" className="w-full md:w-auto">
+      Commencer la lecture
+    </Button>
+  );
+}
diff --git a/src/components/reader/ClientBookWrapper.tsx b/src/components/reader/ClientBookWrapper.tsx
new file mode 100644
index 0000000..8862b09
--- /dev/null
+++ b/src/components/reader/ClientBookWrapper.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { KomgaBook } from "@/types/komga";
+import { BookReader } from "./BookReader";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useToast } from "@/components/ui/use-toast";
+
+interface ClientBookWrapperProps {
+  book: KomgaBook;
+  pages: number[];
+}
+
+export function ClientBookWrapper({ book, pages }: ClientBookWrapperProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    // Si le livre a une progression de lecture, on l'affiche dans un toast
+    if (book.readProgress && book.readProgress.page && book.readProgress.page > 0) {
+      toast({
+        title: "Reprise de la lecture",
+        description: `Reprise à la page ${book.readProgress.page}`,
+      });
+    }
+  }, [book.readProgress, toast]);
+
+  const handleCloseReader = () => {
+    router.back();
+  };
+
+  return <BookReader book={book} pages={pages} onClose={handleCloseReader} />;
+}
diff --git a/src/components/skeletons/BookSkeleton.tsx b/src/components/skeletons/BookSkeleton.tsx
new file mode 100644
index 0000000..5ac7b66
--- /dev/null
+++ b/src/components/skeletons/BookSkeleton.tsx
@@ -0,0 +1,16 @@
+export function BookSkeleton() {
+  return (
+    <div className="fixed inset-0 bg-background flex items-center justify-center">
+      <div className="w-full h-full max-w-6xl mx-auto flex flex-col items-center justify-center space-y-4">
+        {/* Barre de navigation */}
+        <div className="w-full h-12 bg-muted rounded animate-pulse" />
+
+        {/* Page du livre */}
+        <div className="w-full flex-1 bg-muted rounded animate-pulse" />
+
+        {/* Barre de contrôles */}
+        <div className="w-full h-16 bg-muted rounded animate-pulse" />
+      </div>
+    </div>
+  );
+}