From a3d0094cec8d7b2f89f355cc12615e09187a76ae Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sat, 1 Mar 2025 11:37:34 +0100
Subject: [PATCH] feat: local store read progress for later sync

---
 .../clear/[libraryId]/[seriesId]/route.ts     |  5 +++
 src/components/home/MediaRow.tsx              | 42 ++++++++++++-------
 src/components/reader/ClientBookWrapper.tsx   |  4 +-
 .../reader/components/ControlButtons.tsx      |  2 +-
 .../reader/hooks/usePageNavigation.ts         |  9 ++--
 src/components/reader/types.ts                |  4 +-
 src/components/series/BookGrid.tsx            | 13 +++---
 src/components/ui/cover.tsx                   |  4 +-
 src/components/ui/mark-as-read-button.tsx     |  6 ++-
 src/components/ui/mark-as-unread-button.tsx   | 16 +++----
 .../services/client-offlinebook.service.ts    | 31 ++++++++++++++
 11 files changed, 93 insertions(+), 43 deletions(-)
 create mode 100644 src/lib/services/client-offlinebook.service.ts

diff --git a/src/app/api/komga/cache/clear/[libraryId]/[seriesId]/route.ts b/src/app/api/komga/cache/clear/[libraryId]/[seriesId]/route.ts
index 34e8d06..86c5a44 100644
--- a/src/app/api/komga/cache/clear/[libraryId]/[seriesId]/route.ts
+++ b/src/app/api/komga/cache/clear/[libraryId]/[seriesId]/route.ts
@@ -4,6 +4,7 @@ import { getErrorMessage } from "@/utils/errors";
 import { LibraryService } from "@/lib/services/library.service";
 import { HomeService } from "@/lib/services/home.service";
 import { SeriesService } from "@/lib/services/series.service";
+import { revalidatePath } from "next/cache";
 
 export async function POST(
   request: Request,
@@ -13,13 +14,17 @@ export async function POST(
     const { libraryId, seriesId } = params;
 
     await HomeService.invalidateHomeCache();
+    revalidatePath("/");
 
     if (libraryId) {
       await LibraryService.invalidateLibrarySeriesCache(libraryId);
+      revalidatePath(`/library/${libraryId}`);
     }
+
     if (seriesId) {
       await SeriesService.invalidateSeriesBooksCache(seriesId);
       await SeriesService.invalidateSeriesCache(seriesId);
+      revalidatePath(`/series/${seriesId}`);
     }
 
     return NextResponse.json({ message: "🧹 Cache vidé avec succès" });
diff --git a/src/components/home/MediaRow.tsx b/src/components/home/MediaRow.tsx
index de04f2c..d48fc08 100644
--- a/src/components/home/MediaRow.tsx
+++ b/src/components/home/MediaRow.tsx
@@ -4,6 +4,8 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useRef, useState } from "react";
 import { Cover } from "@/components/ui/cover";
 import { useRouter } from "next/navigation";
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
+import { KomgaBook } from "@/types/komga";
 
 interface BaseItem {
   id: string;
@@ -18,12 +20,12 @@ interface OptimizedSeries extends BaseItem {
 }
 
 interface OptimizedBook extends BaseItem {
-  readProgress:{
-    page: number
-  }
+  readProgress: {
+    page: number;
+  };
   media: {
     pagesCount: number;
-  }
+  };
   metadata: {
     title: string;
     number?: string;
@@ -124,19 +126,27 @@ function MediaCard({ item, onClick }: MediaCardProps) {
       onClick={onClick}
       className="flex-shrink-0 w-[200px] relative flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors overflow-hidden cursor-pointer"
     >
-      {/* Image de couverture */}
       <div className="relative aspect-[2/3] bg-muted">
-        <Cover
-          type={isSeries ? "series" : "book"}
-          id={item.id}
-          alt={`Couverture de ${title}`}
-          quality={100}
-          readBooks={isSeries ? item.booksReadCount : undefined}
-          totalBooks={isSeries ? item.booksCount : undefined}
-          isCompleted={isSeries ? item.booksCount === item.booksReadCount : undefined}
-          currentPage={isSeries ? undefined : item.readProgress?.page}
-          totalPages={isSeries ? undefined : item.media?.pagesCount}
-        />
+        {isSeries ? (
+          <Cover
+            type={isSeries ? "series" : "book"}
+            id={item.id}
+            alt={`Couverture de ${title}`}
+            quality={100}
+            readBooks={item.booksReadCount}
+            totalBooks={item.booksCount}
+            isCompleted={item.booksCount === item.booksReadCount}
+          />
+        ) : (
+          <Cover
+            type="book"
+            id={item.id}
+            alt={`Couverture de ${title}`}
+            quality={100}
+            currentPage={ClientOfflineBookService.getCurrentPage(item as KomgaBook)}
+            totalPages={item.media?.pagesCount}
+          />
+        )}
         {/* Overlay avec les informations au survol */}
         <div className="absolute inset-0 bg-black/60 opacity-0 hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3">
           <h3 className="font-medium text-sm text-white line-clamp-2">{title}</h3>
diff --git a/src/components/reader/ClientBookWrapper.tsx b/src/components/reader/ClientBookWrapper.tsx
index 14bffe3..505ec05 100644
--- a/src/components/reader/ClientBookWrapper.tsx
+++ b/src/components/reader/ClientBookWrapper.tsx
@@ -3,6 +3,7 @@
 import { KomgaBook } from "@/types/komga";
 import { BookReader } from "./BookReader";
 import { useRouter } from "next/navigation";
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 
 interface ClientBookWrapperProps {
   book: KomgaBook;
@@ -12,10 +13,11 @@ interface ClientBookWrapperProps {
 export function ClientBookWrapper({ book, pages }: ClientBookWrapperProps) {
   const router = useRouter();
 
-  const handleCloseReader = () => {
+  const handleCloseReader = (currentPage: number) => {
     fetch(`/api/komga/cache/clear/${book.libraryId}/${book.seriesId}`, {
       method: "POST",
     });
+    ClientOfflineBookService.setCurrentPage(book, currentPage);
     router.back();
   };
 
diff --git a/src/components/reader/components/ControlButtons.tsx b/src/components/reader/components/ControlButtons.tsx
index 5662637..42900df 100644
--- a/src/components/reader/components/ControlButtons.tsx
+++ b/src/components/reader/components/ControlButtons.tsx
@@ -101,7 +101,7 @@ export const ControlButtons = ({
         <button
           onClick={(e) => {
             e.stopPropagation();
-            onClose();
+            onClose(currentPage);
           }}
           className={cn(
             "absolute top-4 right-4 p-2 rounded-full bg-background/50 hover:bg-background/80 transition-all duration-300 z-30",
diff --git a/src/components/reader/hooks/usePageNavigation.ts b/src/components/reader/hooks/usePageNavigation.ts
index c853fb5..ee9baf1 100644
--- a/src/components/reader/hooks/usePageNavigation.ts
+++ b/src/components/reader/hooks/usePageNavigation.ts
@@ -1,11 +1,12 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import { KomgaBook } from "@/types/komga";
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 
 interface UsePageNavigationProps {
   book: KomgaBook;
   pages: number[];
   isDoublePage: boolean;
-  onClose?: () => void;
+  onClose?: (currentPage: number) => void;
   direction: "ltr" | "rtl";
 }
 
@@ -16,7 +17,7 @@ export const usePageNavigation = ({
   onClose,
   direction,
 }: UsePageNavigationProps) => {
-  const [currentPage, setCurrentPage] = useState(book.readProgress?.page || 1);
+  const [currentPage, setCurrentPage] = useState(ClientOfflineBookService.getCurrentPage(book));
   const [isLoading, setIsLoading] = useState(true);
   const [secondPageLoading, setSecondPageLoading] = useState(true);
   const [zoomLevel, setZoomLevel] = useState(1);
@@ -37,6 +38,7 @@ export const usePageNavigation = ({
   const syncReadProgress = useCallback(
     async (page: number) => {
       try {
+        ClientOfflineBookService.setCurrentPage(book, page);
         const completed = page === pages.length;
         await fetch(`/api/komga/books/${book.id}/read-progress`, {
           method: "PATCH",
@@ -239,7 +241,7 @@ export const usePageNavigation = ({
         }
       } else if (e.key === "Escape" && onClose) {
         e.preventDefault();
-        onClose();
+        onClose(currentPage);
       }
     };
 
@@ -269,6 +271,7 @@ export const usePageNavigation = ({
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         syncReadProgress(currentPageRef.current);
+        ClientOfflineBookService.removeCurrentPage(book);
       }
     };
   }, [syncReadProgress]);
diff --git a/src/components/reader/types.ts b/src/components/reader/types.ts
index a148164..a85fb47 100644
--- a/src/components/reader/types.ts
+++ b/src/components/reader/types.ts
@@ -12,7 +12,7 @@ export interface PageCache {
 export interface BookReaderProps {
   book: KomgaBook;
   pages: number[];
-  onClose?: () => void;
+  onClose?: (currentPage: number) => void;
 }
 
 export interface ThumbnailProps {
@@ -39,7 +39,7 @@ export interface ControlButtonsProps {
   onPreviousPage: () => void;
   onNextPage: () => void;
   onPageChange: (page: number) => void;
-  onClose?: () => void;
+  onClose?: (currentPage: number) => void;
   currentPage: number;
   totalPages: number;
   isDoublePage: boolean;
diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx
index 6c1814e..f775c81 100644
--- a/src/components/series/BookGrid.tsx
+++ b/src/components/series/BookGrid.tsx
@@ -8,6 +8,7 @@ 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";
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 
 interface BookGridProps {
   books: KomgaBook[];
@@ -31,10 +32,12 @@ const getReadingStatusInfo = (book: KomgaBook, t: (key: string, options?: any) =
     };
   }
 
-  if (book.readProgress.page > 0) {
+  const currentPage = ClientOfflineBookService.getCurrentPage(book);
+
+  if (currentPage > 0) {
     return {
       label: t("books.status.progress", {
-        current: book.readProgress.page,
+        current: currentPage,
         total: book.media.pagesCount,
       }),
       className: "bg-blue-500/10 text-blue-500",
@@ -102,7 +105,8 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
       {localBooks.map((book) => {
         const statusInfo = getReadingStatusInfo(book, t);
         const isRead = book.readProgress?.completed || false;
-        const currentPage = book.readProgress?.page || 0;
+        const hasReadProgress = book.readProgress !== null;
+        const currentPage = ClientOfflineBookService.getCurrentPage(book);
 
         return (
           <div
@@ -138,10 +142,9 @@ export function BookGrid({ books, onBookClick }: BookGridProps) {
                     className="bg-white/90 hover:bg-white text-black shadow-sm"
                   />
                 )}
-                {isRead && (
+                {hasReadProgress && (
                   <MarkAsUnreadButton
                     bookId={book.id}
-                    isRead={isRead}
                     onSuccess={() => handleMarkAsUnread(book.id)}
                     className="bg-white/90 hover:bg-white text-black shadow-sm"
                   />
diff --git a/src/components/ui/cover.tsx b/src/components/ui/cover.tsx
index 757fba6..a99d65a 100644
--- a/src/components/ui/cover.tsx
+++ b/src/components/ui/cover.tsx
@@ -44,7 +44,7 @@ export function Cover(props: CoverProps) {
   } = props;
 
   const imageUrl = getImageUrl(type, id);
-  
+
   const showProgress = () => {
     if (type === "book") {
       const { currentPage, totalPages } = props;
@@ -52,7 +52,7 @@ export function Cover(props: CoverProps) {
         <ProgressBar progress={currentPage} total={totalPages} type="book" />
       ) : null;
     }
-    
+
     if (type === "series") {
       const { readBooks, totalBooks } = props;
       return readBooks && totalBooks && readBooks > 0 && !isCompleted ? (
diff --git a/src/components/ui/mark-as-read-button.tsx b/src/components/ui/mark-as-read-button.tsx
index 3e1dc79..574d887 100644
--- a/src/components/ui/mark-as-read-button.tsx
+++ b/src/components/ui/mark-as-read-button.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { CheckCircle2 } from "lucide-react";
+import { BookCheck } from "lucide-react";
 import { Button } from "./button";
 import { useToast } from "./use-toast";
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 
 interface MarkAsReadButtonProps {
   bookId: string;
@@ -24,6 +25,7 @@ export function MarkAsReadButton({
   const handleMarkAsRead = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Empêcher la propagation au parent
     try {
+      ClientOfflineBookService.removeCurrentPageById(bookId);
       const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
         method: "PATCH",
         headers: {
@@ -60,7 +62,7 @@ export function MarkAsReadButton({
       disabled={isRead}
       aria-label="Marquer comme lu"
     >
-      <CheckCircle2 className="h-5 w-5" />
+      <BookCheck className="h-5 w-5" />
     </Button>
   );
 }
diff --git a/src/components/ui/mark-as-unread-button.tsx b/src/components/ui/mark-as-unread-button.tsx
index 606a837..e5664ca 100644
--- a/src/components/ui/mark-as-unread-button.tsx
+++ b/src/components/ui/mark-as-unread-button.tsx
@@ -1,27 +1,22 @@
 "use client";
 
-import { XCircle } from "lucide-react";
+import { BookX } from "lucide-react";
 import { Button } from "./button";
 import { useToast } from "./use-toast";
-
+import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
 interface MarkAsUnreadButtonProps {
   bookId: string;
-  isRead: boolean;
   onSuccess?: () => void;
   className?: string;
 }
 
-export function MarkAsUnreadButton({
-  bookId,
-  isRead = false,
-  onSuccess,
-  className,
-}: MarkAsUnreadButtonProps) {
+export function MarkAsUnreadButton({ bookId, onSuccess, className }: MarkAsUnreadButtonProps) {
   const { toast } = useToast();
 
   const handleMarkAsUnread = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Empêcher la propagation au parent
     try {
+      ClientOfflineBookService.removeCurrentPageById(bookId);
       const response = await fetch(`/api/komga/books/${bookId}/read-progress`, {
         method: "DELETE",
       });
@@ -51,10 +46,9 @@ export function MarkAsUnreadButton({
       size="icon"
       onClick={handleMarkAsUnread}
       className={`h-8 w-8 p-0 rounded-br-lg rounded-tl-lg ${className}`}
-      disabled={!isRead}
       aria-label="Marquer comme non lu"
     >
-      <XCircle className="h-5 w-5" />
+      <BookX className="h-5 w-5" />
     </Button>
   );
 }
diff --git a/src/lib/services/client-offlinebook.service.ts b/src/lib/services/client-offlinebook.service.ts
new file mode 100644
index 0000000..f1dff07
--- /dev/null
+++ b/src/lib/services/client-offlinebook.service.ts
@@ -0,0 +1,31 @@
+import { KomgaBook } from "@/types/komga";
+
+export class ClientOfflineBookService {
+  static setCurrentPage(book: KomgaBook, page: number) {
+    localStorage.setItem(`${book.id}-page`, page.toString());
+  }
+
+  static getCurrentPage(book: KomgaBook) {
+    const readProgressPage = book.readProgress?.page || 0;
+    if (typeof localStorage !== "undefined") {
+      const cPageLS = localStorage.getItem(`${book.id}-page`) || "0";
+      const currentPage = parseInt(cPageLS);
+
+      if (currentPage < readProgressPage) {
+        return readProgressPage;
+      }
+
+      return currentPage;
+    } else {
+      return readProgressPage;
+    }
+  }
+
+  static removeCurrentPage(book: KomgaBook) {
+    localStorage.removeItem(`${book.id}-page`);
+  }
+
+  static removeCurrentPageById(bookId: string) {
+    localStorage.removeItem(`${bookId}-page`);
+  }
+}