From 0d1d969e53bdb64f1fda5dbfeca2ebf641878961 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Thu, 27 Feb 2025 12:33:58 +0100
Subject: [PATCH] feat(i18n): series page

---
 src/components/series/BookGrid.tsx          | 23 +++++++-----
 src/components/series/PaginatedBookGrid.tsx | 39 +++++++++------------
 src/components/series/SeriesHeader.tsx      | 19 ++++++----
 src/i18n/messages/en/common.json            | 35 +++++++++++++++++-
 src/i18n/messages/fr/common.json            | 33 +++++++++++++++++
 5 files changed, 111 insertions(+), 38 deletions(-)

diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx
index 24f8c77..6c1814e 100644
--- a/src/components/series/BookGrid.tsx
+++ b/src/components/series/BookGrid.tsx
@@ -7,6 +7,7 @@ import { MarkAsReadButton } from "@/components/ui/mark-as-read-button";
 import { MarkAsUnreadButton } from "@/components/ui/mark-as-unread-button";
 import { BookOfflineButton } from "@/components/ui/book-offline-button";
 import { useState, useEffect } from "react";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface BookGridProps {
   books: KomgaBook[];
@@ -14,10 +15,10 @@ interface BookGridProps {
 }
 
 // Fonction utilitaire pour obtenir les informations de statut de lecture
-const getReadingStatusInfo = (book: KomgaBook) => {
+const getReadingStatusInfo = (book: KomgaBook, t: (key: string, options?: any) => string) => {
   if (!book.readProgress) {
     return {
-      label: "Non lu",
+      label: t("books.status.unread"),
       className: "bg-yellow-500/10 text-yellow-500",
     };
   }
@@ -25,26 +26,30 @@ const getReadingStatusInfo = (book: KomgaBook) => {
   if (book.readProgress.completed) {
     const readDate = book.readProgress.readDate ? formatDate(book.readProgress.readDate) : null;
     return {
-      label: readDate ? `Lu le ${readDate}` : "Lu",
+      label: readDate ? t("books.status.readDate", { date: readDate }) : t("books.status.read"),
       className: "bg-green-500/10 text-green-500",
     };
   }
 
   if (book.readProgress.page > 0) {
     return {
-      label: `Page ${book.readProgress.page}/${book.media.pagesCount}`,
+      label: t("books.status.progress", {
+        current: book.readProgress.page,
+        total: book.media.pagesCount,
+      }),
       className: "bg-blue-500/10 text-blue-500",
     };
   }
 
   return {
-    label: "Non lu",
+    label: t("books.status.unread"),
     className: "bg-yellow-500/10 text-yellow-500",
   };
 };
 
 export function BookGrid({ books, onBookClick }: BookGridProps) {
   const [localBooks, setLocalBooks] = useState(books);
+  const { t } = useTranslate();
 
   // Synchroniser localBooks avec les props books
   useEffect(() => {
@@ -54,7 +59,7 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
   if (!localBooks.length) {
     return (
       <div className="text-center p-8">
-        <p className="text-muted-foreground">Aucun tome disponible</p>
+        <p className="text-muted-foreground">{t("books.empty")}</p>
       </div>
     );
   }
@@ -95,7 +100,7 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
   return (
     <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
       {localBooks.map((book) => {
-        const statusInfo = getReadingStatusInfo(book);
+        const statusInfo = getReadingStatusInfo(book, t);
         const isRead = book.readProgress?.completed || false;
         const currentPage = book.readProgress?.page || 0;
 
@@ -111,7 +116,9 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
               <Cover
                 type="book"
                 id={book.id}
-                alt={`Couverture de ${book.metadata.title || `Tome ${book.metadata.number}`}`}
+                alt={t("books.coverAlt", {
+                  title: book.metadata.title || `Tome ${book.metadata.number}`,
+                })}
                 isCompleted={isRead}
                 currentPage={currentPage}
                 totalPages={book.media.pagesCount}
diff --git a/src/components/series/PaginatedBookGrid.tsx b/src/components/series/PaginatedBookGrid.tsx
index 778c2f6..11a8f06 100644
--- a/src/components/series/PaginatedBookGrid.tsx
+++ b/src/components/series/PaginatedBookGrid.tsx
@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 import { Loader2, Filter } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { KomgaBook } from "@/types/komga";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface PaginatedBookGridProps {
   books: KomgaBook[];
@@ -32,6 +33,7 @@ export function PaginatedBookGrid({
   const searchParams = useSearchParams();
   const [isChangingPage, setIsChangingPage] = useState(false);
   const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
+  const { t } = useTranslate();
 
   // Réinitialiser l'état de chargement quand les tomes changent
   useEffect(() => {
@@ -55,26 +57,19 @@ export function PaginatedBookGrid({
 
   const handlePageChange = async (page: number) => {
     setIsChangingPage(true);
-    // Créer un nouvel objet URLSearchParams pour manipuler les paramètres
     const params = new URLSearchParams(searchParams.toString());
     params.set("page", page.toString());
-
-    // Conserver l'état du filtre unread
     params.set("unread", showOnlyUnread.toString());
-
-    // Rediriger vers la nouvelle URL avec les paramètres mis à jour
     await router.push(`${pathname}?${params.toString()}`);
   };
 
   const handleUnreadFilter = async () => {
     setIsChangingPage(true);
     const params = new URLSearchParams(searchParams.toString());
-    params.set("page", "1"); // Retourner à la première page lors du changement de filtre
+    params.set("page", "1");
 
     const newUnreadState = !showOnlyUnread;
     setShowOnlyUnread(newUnreadState);
-
-    // Toujours définir explicitement le paramètre unread
     params.set("unread", newUnreadState.toString());
 
     await router.push(`${pathname}?${params.toString()}`);
@@ -88,26 +83,26 @@ export function PaginatedBookGrid({
   const startIndex = (currentPage - 1) * pageSize + 1;
   const endIndex = Math.min(currentPage * pageSize, totalElements);
 
+  const getShowingText = () => {
+    if (!totalElements) return t("books.empty");
+
+    return t("books.display.showing", {
+      start: startIndex,
+      end: endIndex,
+      total: totalElements,
+    });
+  };
+
   return (
     <div className="space-y-8">
       <div className="flex items-center justify-between flex-wrap gap-4">
-        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">
-          {totalElements > 0 ? (
-            <>
-              Affichage des tomes <span className="font-medium">{startIndex}</span> à{" "}
-              <span className="font-medium">{endIndex}</span> sur{" "}
-              <span className="font-medium">{totalElements}</span>
-            </>
-          ) : (
-            "Aucun tome trouvé"
-          )}
-        </p>
+        <p className="text-sm text-muted-foreground flex-1 min-w-[200px]">{getShowingText()}</p>
         <button
           onClick={handleUnreadFilter}
           className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap ml-auto"
         >
           <Filter className="h-4 w-4" />
-          {showOnlyUnread ? "Afficher tout" : "À lire"}
+          {showOnlyUnread ? t("books.filters.showAll") : t("books.filters.unread")}
         </button>
       </div>
 
@@ -117,7 +112,7 @@ export function PaginatedBookGrid({
           <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm z-10">
             <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-background border shadow-sm">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span className="text-sm">Chargement...</span>
+              <span className="text-sm">{t("books.loading")}</span>
             </div>
           </div>
         )}
@@ -135,7 +130,7 @@ export function PaginatedBookGrid({
 
       <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-between">
         <p className="text-sm text-muted-foreground order-2 sm:order-1">
-          Page {currentPage} sur {totalPages}
+          {t("books.display.page", { current: currentPage, total: totalPages })}
         </p>
         <Pagination
           currentPage={currentPage}
diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index a77ef9b..85d0e74 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -10,6 +10,7 @@ import { RefreshButton } from "@/components/library/RefreshButton";
 import { AppError } from "@/utils/errors";
 import { ERROR_CODES } from "@/constants/errorCodes";
 import { ERROR_MESSAGES } from "@/constants/errorMessages";
+import { useTranslate } from "@/hooks/useTranslate";
 
 interface SeriesHeaderProps {
   series: KomgaSeries;
@@ -19,6 +20,7 @@ interface SeriesHeaderProps {
 export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
   const { toast } = useToast();
   const [isFavorite, setIsFavorite] = useState(false);
+  const { t } = useTranslate();
 
   useEffect(() => {
     const checkFavorite = async () => {
@@ -59,7 +61,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
         setIsFavorite(!isFavorite);
         window.dispatchEvent(new Event("favoritesChanged"));
         toast({
-          title: !isFavorite ? "Ajouté aux favoris" : "Retiré des favoris",
+          title: t(isFavorite ? "series.header.favorite.remove" : "series.header.favorite.add"),
           description: series.metadata.title,
         });
       } else if (response.status === 500) {
@@ -90,7 +92,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
 
     if (booksReadCount === booksCount) {
       return {
-        label: "Lu",
+        label: t("series.header.status.read"),
         className: "bg-green-500/10 text-green-500",
         icon: BookMarked,
       };
@@ -98,14 +100,17 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
 
     if (booksInProgressCount > 0 || (booksReadCount > 0 && booksReadCount < booksCount)) {
       return {
-        label: `${booksReadCount}/${booksCount}`,
+        label: t("series.header.status.progress", {
+          read: booksReadCount,
+          total: booksCount,
+        }),
         className: "bg-blue-500/10 text-blue-500",
         icon: BookOpen,
       };
     }
 
     return {
-      label: "Non lu",
+      label: t("series.header.status.unread"),
       className: "bg-yellow-500/10 text-yellow-500",
       icon: Book,
     };
@@ -120,7 +125,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
         <Cover
           type="series"
           id={series.id}
-          alt={`Couverture de ${series.metadata.title}`}
+          alt={t("series.header.coverAlt", { title: series.metadata.title })}
           className="blur-sm scale-105 brightness-50"
           quality={60}
         />
@@ -134,7 +139,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
             <Cover
               type="series"
               id={series.id}
-              alt={`Couverture de ${series.metadata.title}`}
+              alt={t("series.header.coverAlt", { title: series.metadata.title })}
               quality={90}
             />
           </div>
@@ -155,7 +160,7 @@ export const SeriesHeader = ({ series, refreshSeries }: SeriesHeaderProps) => {
                 {statusInfo.label}
               </span>
               <span className="text-sm text-white/80">
-                {series.booksCount} tome{series.booksCount > 1 ? "s" : ""}
+                {t("series.header.books", { count: series.booksCount })}
               </span>
               <Button
                 variant="ghost"
diff --git a/src/i18n/messages/en/common.json b/src/i18n/messages/en/common.json
index 6c7b541..d1df69c 100644
--- a/src/i18n/messages/en/common.json
+++ b/src/i18n/messages/en/common.json
@@ -130,7 +130,7 @@
       "unread": "Unread",
       "progress": "{read}/{total}"
     },
-    "books": "{count} book | {count} books",
+    "books": "{count} books",
     "filters": {
       "title": "Filters",
       "showAll": "Show all",
@@ -140,6 +140,39 @@
     "display": {
       "showing": "Showing series {start} to {end} of {total}",
       "page": "Page {current} of {total}"
+    },
+    "header": {
+      "coverAlt": "Cover of {{title}}",
+      "books": "{{count}} book",
+      "books_plural": "{{count}} books",
+      "status": {
+        "read": "Read",
+        "unread": "Unread",
+        "progress": "{{read}}/{{total}}"
+      },
+      "favorite": {
+        "add": "Added to favorites",
+        "remove": "Removed from favorites"
+      }
     }
+  },
+  "books": {
+    "empty": "No books available",
+    "coverAlt": "Cover of {{title}}",
+    "status": {
+      "unread": "Unread",
+      "read": "Read",
+      "readDate": "Read on {{date}}",
+      "progress": "Page {{current}}/{{total}}"
+    },
+    "display": {
+      "showing": "Showing books {start} to {end} of {total}",
+      "page": "Page {current} of {total}"
+    },
+    "filters": {
+      "showAll": "Show all",
+      "unread": "Unread"
+    },
+    "loading": "Loading..."
   }
 }
diff --git a/src/i18n/messages/fr/common.json b/src/i18n/messages/fr/common.json
index 57923b5..2562911 100644
--- a/src/i18n/messages/fr/common.json
+++ b/src/i18n/messages/fr/common.json
@@ -140,6 +140,39 @@
     "display": {
       "showing": "Affichage des séries {start} à {end} sur {total}",
       "page": "Page {current} sur {total}"
+    },
+    "header": {
+      "coverAlt": "Couverture de {{title}}",
+      "books": "{{count}} tome",
+      "books_plural": "{{count}} tomes",
+      "status": {
+        "read": "Lu",
+        "unread": "Non lu",
+        "progress": "{{read}}/{{total}}"
+      },
+      "favorite": {
+        "add": "Ajouté aux favoris",
+        "remove": "Retiré des favoris"
+      }
     }
+  },
+  "books": {
+    "empty": "Aucun tome disponible",
+    "coverAlt": "Couverture de {{title}}",
+    "status": {
+      "unread": "Non lu",
+      "read": "Lu",
+      "readDate": "Lu le {{date}}",
+      "progress": "Page {{current}}/{{total}}"
+    },
+    "display": {
+      "showing": "Affichage des tomes {start} à {end} sur {total}",
+      "page": "Page {current} sur {total}"
+    },
+    "filters": {
+      "showAll": "Afficher tout",
+      "unread": "À lire"
+    },
+    "loading": "Chargement..."
   }
 }