chore: commit page, mark stale

frontend/src/features/book/api/api.jsx

@@ -78,6 +78,26 @@ async function editBook({ id, data }) {
   return await response.json();
 }
 
+async function commitPage({ id, page }) {
+  const response = await fetch(
+    `http://localhost:5001/api/books/${id}/pages/${page}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ shouldTrack: true }),
+    }
+  );
+
+  if (!response.ok) {
+    const message = await response.json();
+    throw new Error(message);
+  }
+
+  return await response.json();
+}
+
 export {
   getBooks,
   getBook,
@@ -86,5 +106,6 @@ export {
   createBook,
   deleteBook,
   editBook,
+  commitPage,
   getBookDataFromUrl,
 };

frontend/src/features/book/components/Book/Book.jsx

@@ -1,19 +1,21 @@
 import { lazy, Suspense, useEffect, useRef, useState } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Box, Center, Group, Loader } from "@mantine/core";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { definedLangInfoQuery } from "@language/api/language";
 import { termDataQuery } from "@term/api/term";
-import { paneResizeStorage } from "@actions/utils";
+import { paneResizeStorage, getFormDataFromObj } from "@actions/utils";
 import useNavigationProgress from "@hooks/useNavigationProgress";
 import useDocumentTitle from "@hooks/useDocumentTitle";
 import TranslationPane from "../TranslationPane/TranslationPane";
 import ReadPane from "../ReadPane/ReadPane";
 import { getBookQuery, getPageQuery } from "../../api/query";
 import useSetupShortcuts from "../../hooks/useSetupShortcuts";
 import useBookState from "../../hooks/useBookState";
+import { editBook } from "../../api/api";
 import classes from "./Book.module.css";
+import { keys } from "../../api/keys";
 
 const ThemeForm = lazy(
   () => import("@settings/components/ThemeForm/ThemeForm")
@@ -40,7 +42,6 @@ function Book({ themeFormOpen, onThemeFormOpen, onDrawerOpen }) {
       : activeTerm.data);
 
   const { data: book } = useQuery(getBookQuery(id));
-  const { data: page } = useQuery(getPageQuery(id, pageNum));
   const { data: language } = useQuery(definedLangInfoQuery(book.languageId));
   const { data: term } = useQuery(termDataQuery(key));
 
@@ -56,6 +57,16 @@ function Book({ themeFormOpen, onThemeFormOpen, onDrawerOpen }) {
 
   const paneRightRef = useRef(null);
 
+  const { mutate } = useMutation({
+    mutationFn: editBook,
+    onSuccess: (response) =>
+      queryClient.invalidateQueries(keys.stats(response.id)),
+  });
+
+  useEffect(() => {
+    mutate({ id, data: getFormDataFromObj({ action: "markAsStale" }) });
+  }, [id, mutate]);
+
   useEffect(() => {
     const nextPage = Number(pageNum) + 1;
     const prevPage = Number(pageNum) - 1;
@@ -82,7 +93,6 @@ function Book({ themeFormOpen, onThemeFormOpen, onDrawerOpen }) {
         className={classes.paneLeft}>
         <ReadPane
           book={book}
-          page={page}
           isRtl={language.isRightToLeft}
           state={state}
           dispatch={dispatch}

frontend/src/features/book/components/BooksTable/BooksTable.jsx

@@ -172,14 +172,14 @@ function BooksTable({ languageChoices, tagChoices }) {
         <Menu.Item
           leftSection={<IconArchiveOff />}
           key="unarchive"
-          onClick={() => handleEdit(row.original.id, { archived: false })}>
+          onClick={() => handleEdit(row.original.id, { action: "unarchive" })}>
           Unarchive
         </Menu.Item>
       ) : (
         <Menu.Item
           leftSection={<IconArchive />}
           key="archive"
-          onClick={() => handleEdit(row.original.id, { archived: true })}>
+          onClick={() => handleEdit(row.original.id, { action: "archive" })}>
           Archive
         </Menu.Item>
       ),

frontend/src/features/book/components/EditBookForm/EditBookForm.jsx

@@ -44,20 +44,19 @@ function EditBookForm({ book, onSubmit, onCloseModal }) {
       book_tags: book.tags,
       audio_file: undefined,
     },
-    transformValues: (values) => {
-      const data = {
-        ...values,
-        audio_filename: existingAudioName,
-      };
-
-      return getFormDataFromObj(data);
-    },
+    transformValues: (values) => ({
+      ...values,
+      audio_filename: existingAudioName,
+    }),
   });
 
   if (!language) return;
 
   return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
+    <form
+      onSubmit={form.onSubmit((data) =>
+        handleSubmit(getFormDataFromObj({ ...data, action: "edit" }))
+      )}>
       <TextInput
         wrapperProps={{ dir: language.isRightToLeft ? "rtl" : "ltr" }}
         required

frontend/src/features/book/components/ReadPane/ReadPane.jsx

@@ -5,26 +5,28 @@ import PageHeader from "./components/PageHeader/PageHeader";
 import Player from "./components/Player/Player";
 import Toolbar from "./components/Toolbar/Toolbar";
 import TheText from "./components/TheText/TheText";
-import classes from "../Book/Book.module.css";
 import {
   handleClickOutside,
   resetFocusActiveSentence,
 } from "@actions/interactions-desktop";
 import EditTheText from "./components/EditTheText/EditTheText";
 import EditHeader from "./components/EditHeader/EditHeader";
 import ContextMenu from "./components/ContextMenu/ContextMenu";
+import { useQuery } from "@tanstack/react-query";
+import { getPageQuery } from "../../api/query";
+import classes from "../Book/Book.module.css";
 
 function ReadPane({
   book,
-  page,
   state,
   dispatch,
   activeTerm,
   onSetActiveTerm,
   onDrawerOpen,
   isRtl,
 }) {
-  const { page: pageNum } = useParams();
+  const { id, page: pageNum } = useParams();
+  const { data: page } = useQuery(getPageQuery(id, pageNum));
   const [params, setParams] = useSearchParams();
   const contextMenuAreaRef = useRef(null);
 

frontend/src/features/book/components/ReadPane/components/TheText/TheText.jsx

@@ -1,6 +1,7 @@
 // lute\templates\read\page_content.html
 import { memo, useEffect } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
 import { Text, useComputedColorScheme } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { IconClipboardCheck } from "@tabler/icons-react";
@@ -18,10 +19,14 @@ import {
 } from "@actions/interactions-desktop";
 import { applyLuteHighlights } from "@actions/general";
 import { copyToClipboard } from "@actions/utils";
+import { commitPage } from "../../../../api/api";
+import { keys } from "../../../../api/keys";
 
 function TheText({ paragraphs, onSetActiveTerm }) {
+  const { id, page } = useParams();
   const { data: settings } = useQuery(settingsQuery);
   const colorScheme = useComputedColorScheme();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     startHoverMode();
@@ -39,32 +44,48 @@ function TheText({ paragraphs, onSetActiveTerm }) {
       : resetFocusActiveSentence();
   }
 
+  const { mutate } = useMutation({
+    mutationFn: commitPage,
+    onSuccess: () => queryClient.invalidateQueries(keys.books),
+  });
+
+  useEffect(() => {
+    mutate({ id, page });
+  }, [id, mutate, page]);
+
+  function handleSelectStart(e) {
+    // trigger only with lmb
+    if (e.button !== 0) return;
+    handleMouseDown(e);
+  }
+
+  function handleSelectEnd(e) {
+    if (e.button !== 0) return;
+    const termData = handleMouseUp(e);
+
+    if (!termData) return;
+    handleSetTerm(termData);
+
+    if (termData.type !== "copy") return;
+    handleCopyText(termData);
+  }
+
   return (
     <div className="thetext">
       {paragraphs.map((paragraph, index) => (
         <p key={index} className="textparagraph">
           {paragraph.map((sentence, index) => (
             <span
               key={`sent_${index + 1}`}
-              className="textsentence"
-              id={`sent_${index + 1}`}>
+              id={`sent_${index + 1}`}
+              className="textsentence">
               {sentence.map((textitem) =>
                 textitem.isWord ? (
                   <Popup id={textitem.wid} key={textitem.id}>
                     <TextItem
                       data={textitem}
-                      onMouseDown={(e) => {
-                        // trigger only with lmb
-                        if (e.button !== 0) return;
-                        handleMouseDown(e);
-                      }}
-                      onMouseUp={(e) => {
-                        if (e.button !== 0) return;
-                        const termData = handleMouseUp(e);
-                        if (!termData) return;
-                        handleSetTerm(termData);
-                        handleCopyText(termData);
-                      }}
+                      onMouseDown={handleSelectStart}
+                      onMouseUp={handleSelectEnd}
                       onMouseOver={handleMouseOver}
                       onMouseOut={hoverOut}
                     />
@@ -84,8 +105,6 @@ function TheText({ paragraphs, onSetActiveTerm }) {
 }
 
 async function handleCopyText(termData) {
-  if (termData.type !== "copy") return;
-
   const text = await copyToClipboard(termData.data);
   text &&
     notifications.show({