feat: implement reading tracker for chapter pages

api/api.ts

@@ -40,12 +40,10 @@ export const customInstance = <T>(
   options?: AxiosRequestConfig,
 ): Promise<T> => {
   const source = axios.CancelToken.source();
-  const promise = Api({
+  return Api({
     ...config,
     ...options,
     cancelToken: source.token,
     paramsSerializer: { indexes: null },
   }).then(({ data }) => data);
-
-  return promise;
 };

app/manga/[id]/chapter/[chapterNumber]/page.tsx

@@ -7,21 +7,26 @@ import { ArrowLeft, ChevronLeft, ChevronRight, Home } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { useGetMangaChapterImages, useMarkAsRead } from "@/api/mangamochi";
+import { useReadingTracker } from "@/hooks/use-reading-tracker";
 
 export default function ChapterReaderPage() {
+  const { setCurrentChapterPage, getCurrentChapterPage } = useReadingTracker();
+
   const params = useParams();
   const router = useRouter();
   const mangaId = Number(params.id);
   const chapterNumber = Number(params.chapterNumber);
 
+  const [currentPage, setCurrentPage] = useState(
+    getCurrentChapterPage(chapterNumber) ?? 1,
+  );
+
   const { data, isLoading } = useGetMangaChapterImages(chapterNumber);
 
   const { mutate } = useMarkAsRead();
 
-  const [currentPage, setCurrentPage] = useState(1);
-
   useEffect(() => {
-    if (!data) {
+    if (!data || isLoading) {
       return;
     }
 
@@ -30,6 +35,21 @@ export default function ChapterReaderPage() {
     }
   }, [data, mutate, currentPage]);
 
+  useEffect(() => {
+    setCurrentChapterPage(chapterNumber, currentPage);
+  }, [chapterNumber, currentPage]);
+
+  useEffect(() => {
+    if (!isLoading && !data?.data) {
+      return;
+    }
+
+    const storedChapterPage = getCurrentChapterPage(chapterNumber);
+    if (storedChapterPage) {
+      setCurrentPage(storedChapterPage);
+    }
+  }, [getCurrentChapterPage, isLoading, data?.data]);
+
   if (!data?.data) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background">

app/manga/[id]/page.tsx

@@ -257,6 +257,7 @@ export default function MangaDetailPage() {
                               </p>
                             </div>
                           </div>
+                            {provider.supportsChapterFetch && (
                           <div className={"pr-4"}>
                             <Button
                               size="sm"
@@ -270,7 +271,7 @@ export default function MangaDetailPage() {
                               <Database className="h-4 w-4" />
                               Fetch from Provider
                             </Button>
-                          </div>
+                          </div>)}
                         </div>
                         <ChevronDown
                           className={`h-5 w-5 text-muted-foreground transition-transform ${

app/page.tsx

@@ -8,7 +8,6 @@ import { BookOpen, Search } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { useGetMangas } from "@/api/mangamochi";
-import { useAuth } from "@/contexts/auth-context";
 import { AuthHeader } from "@/components/auth-header";
 import { ImportDropdown } from "@/components/import-dropdown";
 import { SortOption, SortOptions } from "@/components/sort-options";

hooks/use-reading-tracker.ts

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+
+interface ReadingTrackerData {
+  chapterPage: { [chapterId: number]: number };
+}
+
+export const useReadingTracker = () => {
+  const setCurrentChapterPage = useCallback(
+    (id: number, pageNumber: number) => {
+      const jsonString = localStorage.getItem("readingTrackerData");
+
+      let readingTrackerData: ReadingTrackerData;
+      try {
+        readingTrackerData = jsonString
+          ? JSON.parse(jsonString)
+          : { chapterPage: {} };
+      } catch (error) {
+        console.error("Error parsing reading tracker data:", error);
+        readingTrackerData = { chapterPage: {} };
+      }
+
+      const updatedData = {
+        ...readingTrackerData,
+        chapterPage: {
+          ...readingTrackerData.chapterPage,
+          [id]: pageNumber,
+        },
+      };
+
+      localStorage.setItem("readingTrackerData", JSON.stringify(updatedData));
+    },
+    [],
+  );
+
+  const getCurrentChapterPage = useCallback(
+    (id: number): number | undefined => {
+      const jsonString = localStorage.getItem("readingTrackerData");
+      if (!jsonString) return undefined;
+
+      try {
+        const readingTrackerData: ReadingTrackerData = JSON.parse(jsonString);
+        return readingTrackerData.chapterPage[id];
+      } catch (error) {
+        console.error("Error parsing reading tracker data:", error);
+        return undefined;
+      }
+    },
+    [],
+  );
+
+  return { setCurrentChapterPage, getCurrentChapterPage };
+};