feat: change page url

src/client/page/reader/comic.tsx

@@ -1,5 +1,6 @@
 import { Typography, styled } from "@mui/material";
 import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import { Document } from "../../accessor/document";
 
 type ComicType = "comic" | "artist cg" | "donjinshi" | "western";
@@ -30,27 +31,41 @@ const CurrentView = styled("img")(({theme})=>({
 
 export const ComicReader = (props: { doc: Document }) => {
     const additional = props.doc.additional;
-    const [curPage, setCurPage] = useState(0);
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const curPage = (parseInt(searchParams.get("page") ?? "0"));
+    const setCurPage = (n: number) => {
+        setSearchParams([
+            ["page", n.toString()]
+        ]);
+    }
+    if (isNaN(curPage)){
+        return <Typography>Error. Page number is not a number.</Typography>
+    }
     if (!("page" in additional)) {
         console.error("invalid content : page read fail : " + JSON.stringify(additional));
         return <Typography>Error. DB error. page restriction</Typography>;
     }
+    
+    const maxPage: number = additional["page"] as number;
     const PageDown = () => setCurPage(Math.max(curPage - 1, 0));
-    const PageUp = () => setCurPage(Math.min(curPage + 1, page - 1));
-    const page: number = additional["page"] as number;
+    const PageUp = () => setCurPage(Math.min(curPage + 1, maxPage - 1));
+
     const onKeyUp = (e: KeyboardEvent) => {
+        console.log(`currently: ${curPage}/${maxPage}`)
         if (e.code === "ArrowLeft") {
             PageDown();
         } else if (e.code === "ArrowRight") {
             PageUp();
         }
     };
+
     useEffect(() => {
         document.addEventListener("keydown", onKeyUp);
         return () => {
             document.removeEventListener("keydown", onKeyUp);
         };
-    });
+    }, [curPage]);
     // theme.mixins.toolbar.minHeight;
     return (
         <ViewMain>