Dev (#4)

* feat: prefetch next page to void waiting on navigation

* fix: highlight editor does not have comment

* fix: add mark without refresh mark list

* chore: eslint errors, ui styles

next.config.mjs

@@ -9,15 +9,17 @@ const config = {
   // void reader effect triggered twice
   reactStrictMode: false,
 
-  output: 'standalone',
+  output: "standalone",
+
+  transpilePackages: ["ahooks"],
 
   typescript: {
-    ignoreBuildErrors: true
+    ignoreBuildErrors: true,
   },
 
   experimental: {
-    instrumentationHook: true
-  }
-}
+    instrumentationHook: true,
+  },
+};
 
 export default config;

src/components/highlightList.tsx

@@ -67,10 +67,10 @@ function HighlightListItem(props: HighlightListItemProps) {
     e.stopPropagation();
 
   const comment = !content ? null : (
-    <>
-      <Typography variant="caption">comment</Typography>
+    <Box sx={{ mt: 1 }}>
+      <Typography variant="caption">批注</Typography>
       <Typography variant="body1">{content}</Typography>
-    </>
+    </Box>
   );
 
   return (
@@ -100,12 +100,12 @@ function HighlightListItem(props: HighlightListItemProps) {
               onClose={menuClose}
               keepMounted
             >
-              <MenuItem onClick={removeBookmark}>remove bookmark</MenuItem>
+              <MenuItem onClick={removeBookmark}>删除</MenuItem>
             </Menu>
           </IconButton>
         </Box>
         <Typography variant="body1">{selectedString}</Typography>
-        <br />
+        {/* <br /> */}
         {comment}
       </Box>
       <Divider />

src/components/pages/reader/epubReader.tsx

@@ -1,12 +1,8 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import ePub, { type Rendition, type Contents, type Location } from "epubjs";
-import { EpubCFI } from "epubjs";
+import { useLatest } from "ahooks";
+import { type Contents, type Location } from "epubjs";
 import Popper, { type PopperProps } from "@mui/material/Popper";
-import {
-  Colors,
-  HighlightEditor,
-  getColorsValue,
-} from "y/components/highlightEditor";
+import { HighlightEditor } from "y/components/highlightEditor";
 import { addMark, removeMark, apiUpdateMark } from "../../../clientApi";
 import { getElementHeading } from "../../../pages/reader/index";
 import type * as Prisma from "@prisma/client";
@@ -61,6 +57,8 @@ export function useReader({
   // point curEditorValueRef to curEditorValue
   curEditorValueRef.current = curEditorValue;
 
+  const highlightListRef = useLatest(highlightList);
+
   const theme = useTheme();
 
   const addMarkMutation = useMutation({
@@ -114,8 +112,13 @@ export function useReader({
       );
 
       setCurEditorValue((val) => {
+        let v = val;
+        // when val has a id, it means user clicks a existing mark without closing and selects strings.
+        if (val.id) {
+          v = EMPTY_EDITOR_VALUE(val.bookId);
+        }
         return {
-          ...val,
+          ...v,
           epubcfi,
           selectedString: range.toString(),
           type: MarkType.Highlight,
@@ -130,10 +133,12 @@ export function useReader({
   const handleMarkClick = useCallback(
     (epubcfi: string, data: EditorValue, g: SVGGElement) => {
       anchorEl.current = g;
-      setCurEditorValue(data);
+      const d =
+        highlightListRef.current.find((item) => item.id === data.id) ?? data;
+      setCurEditorValue(d);
       setOpenPopover(true);
     },
-    [],
+    [highlightListRef],
   );
 
   const handleRelocated = useCallback(
@@ -146,7 +151,8 @@ export function useReader({
   useEffect(() => {
     const epubReader = new EpubReader(opfUrl, "viewer");
     epubReaderRef.current = epubReader;
-    window.epubReader = epubReaderRef.current;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+    (window as any).epubReader = epubReaderRef.current;
     epubReader.registerTheme("light", {});
     epubReader.registerTheme("dark", {
       body: {
@@ -187,16 +193,19 @@ export function useReader({
 
             return value;
           });
+          onHighlightRefetch();
         });
       }
       setCurEditorValue(value);
     },
-    [addMarkMutate],
+    [addMarkMutate, onHighlightRefetch],
   );
 
   const handleEditorCancel = useCallback(() => {
+    // todo: does `updateHighlightElement` really need?
     // canceling will remove changes
     updateHighlightElement(preEditorValue.current);
+    setCurEditorValue(EMPTY_EDITOR_VALUE(preEditorValue.current.bookId));
     setOpenPopover(false);
   }, [updateHighlightElement]);
 
@@ -206,7 +215,7 @@ export function useReader({
       const val = { ...curEditorValue, ...value };
       if (!val.id) return;
 
-      await updateMarkMutate(val);
+      await updateMarkMutate(val as EditorValue & { id: number });
       updateHighlightElement(value);
       setOpenPopover(false);
       onHighlightRefetch();

src/pages/bookshelf/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
+import { useRouter } from "next/router";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import IconButton from "@mui/material/IconButton";
@@ -73,6 +74,12 @@ export default function Bookshelf(props: BookshelfProps) {
 
   const { classes } = useStyles();
 
+  const router = useRouter();
+
+  useEffect(() => {
+    void router.prefetch("/reader");
+  }, [router]);
+
   const categoryQuery = useQuery({
     queryKey: ["getCategory"] as const,
     queryFn: () => apiGetCategory().then((res) => res.data),

src/pages/login.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
@@ -29,6 +29,10 @@ export default function Login() {
     },
   });
 
+  useEffect(() => {
+    void router.prefetch("/bookshelf");
+  }, [router]);
+
   return (
     <Container
       component="main"

src/pages/reader/index.tsx

@@ -156,6 +156,10 @@ export default function Reader(props: ReaderProps) {
 
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  useEffect(() => {
+    void router.prefetch("/bookshelf");
+  }, [router]);
+
   const addBookmark = async () => {
     if (!epubReaderRef.current) return;