fix: stale settings used when syncing books (#273)

* fix: add passive: true to touchstart event listener when pulling to refresh

* fix: stale settings used when syncing books and move auto upload from import menu to settings menu

apps/readest-app/src/app/library/components/ImportMenu.tsx

@@ -1,11 +1,4 @@
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { MdCheck } from 'react-icons/md';
-import { useAuth } from '@/context/AuthContext';
-import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
-import { useSettingsStore } from '@/store/settingsStore';
-import { navigateToLogin } from '@/utils/nav';
 import MenuItem from '@/components/MenuItem';
 
 interface ImportMenuProps {
@@ -15,22 +8,6 @@ interface ImportMenuProps {
 
 const ImportMenu: React.FC<ImportMenuProps> = ({ setIsDropdownOpen, onImportBooks }) => {
   const _ = useTranslation();
-  const router = useRouter();
-  const { user } = useAuth();
-  const { envConfig } = useEnv();
-  const { settings, setSettings, saveSettings } = useSettingsStore();
-  const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload);
-
-  const toggleAutoUploadBooks = () => {
-    if (!user) {
-      navigateToLogin(router);
-    }
-    settings.autoUpload = !settings.autoUpload;
-    setSettings(settings);
-    saveSettings(envConfig, settings);
-    setIsAutoUpload(settings.autoUpload);
-    setIsDropdownOpen?.(false);
-  };
 
   const handleImportBooks = () => {
     onImportBooks();
@@ -43,11 +20,6 @@ const ImportMenu: React.FC<ImportMenuProps> = ({ setIsDropdownOpen, onImportBook
       className='dropdown-content dropdown-center bg-base-100 menu rounded-box z-[1] mt-3 w-52 p-2 shadow'
     >
       <MenuItem label={_('From Local File')} onClick={handleImportBooks} />
-      <MenuItem
-        label={_('Auto Upload Books to Cloud')}
-        icon={isAutoUpload ? <MdCheck className='text-base-content' /> : undefined}
-        onClick={toggleAutoUploadBooks}
-      />
     </ul>
   );
 };

apps/readest-app/src/app/library/components/SettingsMenu.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { PiUserCircle } from 'react-icons/pi';
 import { PiUserCircleCheck } from 'react-icons/pi';
+import { MdCheck } from 'react-icons/md';
 
 import { setAboutDialogVisible } from '@/components/AboutWindow';
 import { isWebAppPlatform } from '@/services/environment';
@@ -12,6 +13,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { getStoragePlanData } from '@/utils/access';
+import { navigateToLogin } from '@/utils/nav';
 import { QuotaType } from '@/types/user';
 import MenuItem from '@/components/MenuItem';
 import Quota from '@/components/Quota';
@@ -27,6 +29,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
   const { token, user, logout } = useAuth();
   const { settings, setSettings, saveSettings } = useSettingsStore();
   const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
+  const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload);
 
   const showAboutReadest = () => {
     setAboutDialogVisible(true);
@@ -38,7 +41,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
   };
 
   const handleUserLogin = () => {
-    router.push('/auth');
+    navigateToLogin(router);
     setIsDropdownOpen?.(false);
   };
 
@@ -55,6 +58,17 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
     setIsDropdownOpen?.(false);
   };
 
+  const toggleAutoUploadBooks = () => {
+    settings.autoUpload = !settings.autoUpload;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsAutoUpload(settings.autoUpload);
+
+    if (settings.autoUpload && !user) {
+      navigateToLogin(router);
+    }
+  };
+
   useEffect(() => {
     if (!user || !token) return;
     const storagPlan = getStoragePlanData(token);
@@ -112,6 +126,11 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
       ) : (
         <MenuItem label={_('Sign In')} icon={<PiUserCircle />} onClick={handleUserLogin}></MenuItem>
       )}
+      <MenuItem
+        label={_('Auto Upload Books to Cloud')}
+        icon={isAutoUpload ? <MdCheck className='text-base-content' /> : undefined}
+        onClick={toggleAutoUploadBooks}
+      />
       <hr className='border-base-200 my-1' />
       <MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
       <hr className='border-base-200 my-1' />

apps/readest-app/src/hooks/usePullToRefresh.ts

@@ -14,7 +14,7 @@ export const usePullToRefresh = (ref: React.RefObject<HTMLDivElement>, onTrigger
     const el = ref.current;
     if (!el) return;
 
-    el.addEventListener('touchstart', handleTouchStart);
+    el.addEventListener('touchstart', handleTouchStart, { passive: true });
 
     function handleTouchStart(startEvent: TouchEvent) {
       const el = ref.current;
@@ -22,7 +22,7 @@ export const usePullToRefresh = (ref: React.RefObject<HTMLDivElement>, onTrigger
 
       const initialY = startEvent.touches[0]!.clientY;
 
-      el.addEventListener('touchmove', handleTouchMove);
+      el.addEventListener('touchmove', handleTouchMove, { passive: false });
       el.addEventListener('touchend', handleTouchEnd);
 
       function handleTouchMove(moveEvent: TouchEvent) {

apps/readest-app/src/hooks/useSync.ts

@@ -94,6 +94,10 @@ export function useSync(bookKey?: string) {
       if (!records?.length) return;
       const maxTime = computeMaxTimestamp(records);
       setLastSyncedAt(maxTime);
+
+      // due to closures in React hooks the settings might be stale
+      // we need to fetch the latest settings from store
+      const settings = useSettingsStore.getState().settings;
       switch (type) {
         case 'books':
           settings.lastSyncedAtBooks = maxTime;