diff --git a/apps/readest-app/src/app/library/components/ImportMenu.tsx b/apps/readest-app/src/app/library/components/ImportMenu.tsx index 61457037..ca5e2d90 100644 --- a/apps/readest-app/src/app/library/components/ImportMenu.tsx +++ b/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 = ({ 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 = ({ setIsDropdownOpen, onImportBook className='dropdown-content dropdown-center bg-base-100 menu rounded-box z-[1] mt-3 w-52 p-2 shadow' > - : undefined} - onClick={toggleAutoUploadBooks} - /> ); }; diff --git a/apps/readest-app/src/app/library/components/SettingsMenu.tsx b/apps/readest-app/src/app/library/components/SettingsMenu.tsx index 9d23560b..6b66bc73 100644 --- a/apps/readest-app/src/app/library/components/SettingsMenu.tsx +++ b/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 = ({ setIsDropdownOpen }) => { const { token, user, logout } = useAuth(); const { settings, setSettings, saveSettings } = useSettingsStore(); const [quotas, setQuotas] = React.useState([]); + const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload); const showAboutReadest = () => { setAboutDialogVisible(true); @@ -38,7 +41,7 @@ const SettingsMenu: React.FC = ({ setIsDropdownOpen }) => { }; const handleUserLogin = () => { - router.push('/auth'); + navigateToLogin(router); setIsDropdownOpen?.(false); }; @@ -55,6 +58,17 @@ const SettingsMenu: React.FC = ({ 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 = ({ setIsDropdownOpen }) => { ) : ( } onClick={handleUserLogin}> )} + : undefined} + onClick={toggleAutoUploadBooks} + />

diff --git a/apps/readest-app/src/hooks/usePullToRefresh.ts b/apps/readest-app/src/hooks/usePullToRefresh.ts index 2c9b796a..3a564459 100644 --- a/apps/readest-app/src/hooks/usePullToRefresh.ts +++ b/apps/readest-app/src/hooks/usePullToRefresh.ts @@ -14,7 +14,7 @@ export const usePullToRefresh = (ref: React.RefObject, 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, 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) { diff --git a/apps/readest-app/src/hooks/useSync.ts b/apps/readest-app/src/hooks/useSync.ts index a09dccc5..1554007b 100644 --- a/apps/readest-app/src/hooks/useSync.ts +++ b/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;