From 9bc11905f7bf9f361635e43a1832d7c66574f38b Mon Sep 17 00:00:00 2001 From: chrox Date: Thu, 21 Nov 2024 12:47:08 +0100 Subject: [PATCH] Remove eslint react-hooks/exhaustive-deps warnings --- apps/readest-app/src/app/library/page.tsx | 1 + .../src/app/reader/components/BookmarkToggler.tsx | 1 + .../src/app/reader/components/FoliateViewer.tsx | 3 +++ .../src/app/reader/components/ReaderContent.tsx | 1 + apps/readest-app/src/app/reader/components/ViewMenu.tsx | 4 ++++ .../src/app/reader/components/annotator/Annotator.tsx | 1 + .../src/app/reader/components/notebook/Notebook.tsx | 1 + .../src/app/reader/components/settings/ColorPanel.tsx | 1 + .../src/app/reader/components/settings/FontPanel.tsx | 7 +++++++ .../src/app/reader/components/settings/LayoutPanel.tsx | 7 +++++++ .../src/app/reader/components/settings/MiscPanel.tsx | 1 + .../src/app/reader/components/sidebar/SearchBar.tsx | 2 ++ .../src/app/reader/components/sidebar/SideBar.tsx | 1 + apps/readest-app/src/app/reader/hooks/useBooksManager.ts | 3 ++- apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts | 1 + apps/readest-app/src/app/reader/hooks/useSidebar.ts | 1 + apps/readest-app/src/app/reader/page.tsx | 1 + apps/readest-app/src/components/WindowButtons.tsx | 1 + apps/readest-app/src/hooks/useShortcuts.ts | 1 + apps/readest-app/src/hooks/useTheme.ts | 1 + apps/readest-app/src/hooks/useTrafficLight.ts | 1 + 21 files changed, 40 insertions(+), 1 deletion(-) diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx index b700275e..5b4b79cc 100644 --- a/apps/readest-app/src/app/library/page.tsx +++ b/apps/readest-app/src/app/library/page.tsx @@ -28,6 +28,7 @@ const LibraryPage = () => { if (loadingTimeout) clearTimeout(loadingTimeout); setLoading(false); }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const importBooks = async (files: [string | File]) => { diff --git a/apps/readest-app/src/app/reader/components/BookmarkToggler.tsx b/apps/readest-app/src/app/reader/components/BookmarkToggler.tsx index 6d72e37c..4a372875 100644 --- a/apps/readest-app/src/app/reader/components/BookmarkToggler.tsx +++ b/apps/readest-app/src/app/reader/components/BookmarkToggler.tsx @@ -72,6 +72,7 @@ const BookmarkToggler: React.FC = ({ bookKey }) => { .some((item) => CFI.compare(start, item.cfi) * CFI.compare(end, item.cfi) <= 0); setIsBookmarked(locationBookmarked); setBookmarkRibbonVisibility(bookKey, locationBookmarked); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [config, progress]); return ( diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index 11250088..0e246eaa 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -112,6 +112,7 @@ const FoliateViewer: React.FC<{ const viewSettings = getViewSettings(bookKey)!; viewRef.current.renderer.setStyles?.(getStyles(viewSettings, themeCode)); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [themeCode]); useEffect(() => { @@ -163,6 +164,7 @@ const FoliateViewer: React.FC<{ }; openBook(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const initAnnotations = () => { @@ -179,6 +181,7 @@ const FoliateViewer: React.FC<{ if (viewInited) { initAnnotations(); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [viewInited]); return
; diff --git a/apps/readest-app/src/app/reader/components/ReaderContent.tsx b/apps/readest-app/src/app/reader/components/ReaderContent.tsx index 832ba1e4..2c78e283 100644 --- a/apps/readest-app/src/app/reader/components/ReaderContent.tsx +++ b/apps/readest-app/src/app/reader/components/ReaderContent.tsx @@ -48,6 +48,7 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) => if (index === 0) setSideBarBookKey(key); } }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const saveConfigAndCloseBook = (bookKey: string) => { diff --git a/apps/readest-app/src/app/reader/components/ViewMenu.tsx b/apps/readest-app/src/app/reader/components/ViewMenu.tsx index f61a1296..6357686a 100644 --- a/apps/readest-app/src/app/reader/components/ViewMenu.tsx +++ b/apps/readest-app/src/app/reader/components/ViewMenu.tsx @@ -48,17 +48,20 @@ const ViewMenu: React.FC = ({ useEffect(() => { getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [themeCode]); useEffect(() => { getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated'); viewSettings!.scrolled = isScrolledMode; setViewSettings(bookKey, viewSettings!); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isScrolledMode]); useEffect(() => { document.body.classList.toggle('invert', isInvertedColors); getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isInvertedColors]); useEffect(() => { @@ -70,6 +73,7 @@ const ViewMenu: React.FC = ({ } viewSettings!.zoomLevel = zoomLevel; setViewSettings(bookKey, viewSettings!); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [zoomLevel]); return ( diff --git a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx index 65e503b1..ef12ca9f 100644 --- a/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx +++ b/apps/readest-app/src/app/reader/components/annotator/Annotator.tsx @@ -135,6 +135,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => { return () => { eventDispatcher.offSync('iframe-single-click', handleSingleClick); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx index c3eecd3c..c9b2b100 100644 --- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx +++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx @@ -27,6 +27,7 @@ const Notebook: React.FC = ({}) => { setNotebookWidth(settings.globalReadSettings.notebookWidth); setNotebookPin(settings.globalReadSettings.isNotebookPinned); setNotebookVisible(settings.globalReadSettings.isNotebookPinned); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleNotebookResize = (newWidth: string) => { diff --git a/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx b/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx index 699a028d..53f07291 100644 --- a/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx @@ -17,6 +17,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { useEffect(() => { view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [themeCode]); return ( diff --git a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx index 8c1a2052..a732637d 100644 --- a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx @@ -59,6 +59,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultFont]); useEffect(() => { @@ -69,6 +70,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultFontSize]); useEffect(() => { @@ -79,6 +81,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [minFontSize]); useEffect(() => { @@ -89,6 +92,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [serifFont]); useEffect(() => { @@ -99,6 +103,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [sansSerifFont]); useEffect(() => { @@ -109,6 +114,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [monospaceFont]); useEffect(() => { @@ -119,6 +125,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [overrideFont]); const handleFontFamilyFont = (option: string) => { diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx index 5360735b..8c83de66 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -29,6 +29,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [lineHeight]); useEffect(() => { @@ -39,6 +40,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [fullJustification]); useEffect(() => { @@ -49,6 +51,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setStyles?.(getStyles(viewSettings, themeCode)); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [hyphenation]); useEffect(() => { @@ -59,6 +62,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setAttribute('margin', `${marginPx}px`); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [marginPx]); useEffect(() => { @@ -69,6 +73,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setAttribute('gap', `${gapPercent}%`); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [gapPercent]); useEffect(() => { @@ -83,6 +88,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { 'max-inline-size', `${maxColumnCount === 1 ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`, ); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxColumnCount]); useEffect(() => { @@ -96,6 +102,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { 'max-inline-size', `${maxColumnCount === 1 ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`, ); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxInlineSize]); return ( diff --git a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx index f4a75851..ee63ae14 100644 --- a/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx @@ -69,6 +69,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { } else { getView(bookKey)?.renderer.removeAttribute('animated'); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [animated]); return ( diff --git a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx index c4e4a254..8915db97 100644 --- a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx +++ b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx @@ -35,11 +35,13 @@ const SearchBar: React.FC = ({ useEffect(() => { handleSearchTermChange(searchTerm); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [bookKey]); useEffect(() => { setSearchTerm(term); handleSearchTermChange(term); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [term]); useEffect(() => { diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx index a141eb64..e3a088f0 100644 --- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx +++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx @@ -50,6 +50,7 @@ const SideBar: React.FC<{ return () => { eventDispatcher.off('search', onSearchEvent); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleDragMove = (e: MouseEvent) => { diff --git a/apps/readest-app/src/app/reader/hooks/useBooksManager.ts b/apps/readest-app/src/app/reader/hooks/useBooksManager.ts index ba438f11..efa63030 100644 --- a/apps/readest-app/src/app/reader/hooks/useBooksManager.ts +++ b/apps/readest-app/src/app/reader/hooks/useBooksManager.ts @@ -9,9 +9,9 @@ const useBooksManager = () => { const searchParams = useSearchParams(); const { envConfig } = useEnv(); const { bookKeys, sideBarBookKey } = useReaderStore(); + const [shouldUpdateSearchParams, setShouldUpdateSearchParams] = useState(false); const { setBookKeys, initViewState, setSideBarBookKey } = useReaderStore(); - const [shouldUpdateSearchParams, setShouldUpdateSearchParams] = useState(false); useEffect(() => { if (shouldUpdateSearchParams) { const ids = bookKeys.map((key) => key.split('-')[0]).join(','); @@ -22,6 +22,7 @@ const useBooksManager = () => { } setShouldUpdateSearchParams(false); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [bookKeys, shouldUpdateSearchParams]); // Append a new book and sync with bookKeys and URL diff --git a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts index a893fe5a..55028101 100644 --- a/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts +++ b/apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts @@ -31,5 +31,6 @@ export const useFoliateEvents = ( if (onDrawAnnotation) view.removeEventListener('draw-annotation', onDrawAnnotation); if (onShowAnnotation) view.removeEventListener('show-annotation', onShowAnnotation); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [view, ...dependencies]); }; diff --git a/apps/readest-app/src/app/reader/hooks/useSidebar.ts b/apps/readest-app/src/app/reader/hooks/useSidebar.ts index c5239245..c6beeb9a 100644 --- a/apps/readest-app/src/app/reader/hooks/useSidebar.ts +++ b/apps/readest-app/src/app/reader/hooks/useSidebar.ts @@ -18,6 +18,7 @@ const useSidebar = (initialWidth: string, isPinned: boolean) => { setSideBarWidth(initialWidth); setSideBarPin(isPinned); setSideBarVisible(isPinned); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleSideBarResize = (newWidth: string) => { diff --git a/apps/readest-app/src/app/reader/page.tsx b/apps/readest-app/src/app/reader/page.tsx index 4d1fe1a4..2c44c4f9 100644 --- a/apps/readest-app/src/app/reader/page.tsx +++ b/apps/readest-app/src/app/reader/page.tsx @@ -25,6 +25,7 @@ const ReaderPage = () => { }; initLibrary(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( diff --git a/apps/readest-app/src/components/WindowButtons.tsx b/apps/readest-app/src/components/WindowButtons.tsx index 74b09217..644f982b 100644 --- a/apps/readest-app/src/components/WindowButtons.tsx +++ b/apps/readest-app/src/components/WindowButtons.tsx @@ -52,6 +52,7 @@ const WindowButtons: React.FC = ({ return () => { headerElement?.removeEventListener('mousedown', handleMouseDown); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleMinimize = async () => { diff --git a/apps/readest-app/src/hooks/useShortcuts.ts b/apps/readest-app/src/hooks/useShortcuts.ts index f49479f9..43eacfed 100644 --- a/apps/readest-app/src/hooks/useShortcuts.ts +++ b/apps/readest-app/src/hooks/useShortcuts.ts @@ -106,6 +106,7 @@ const useShortcuts = (actions: KeyActionHandlers, dependencies: React.Dependency window.removeEventListener('keydown', unifiedHandleKeyDown); window.removeEventListener('message', unifiedHandleKeyDown); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [shortcuts, ...dependencies]); }; diff --git a/apps/readest-app/src/hooks/useTheme.ts b/apps/readest-app/src/hooks/useTheme.ts index 50ac7c6f..bfa9b3b8 100644 --- a/apps/readest-app/src/hooks/useTheme.ts +++ b/apps/readest-app/src/hooks/useTheme.ts @@ -81,6 +81,7 @@ export const useTheme = () => { fg: palette['base-content'], primary: palette.primary, }); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [themeMode, themeColor, isDarkMode]); const updateThemeMode = (mode: ThemeMode) => setThemeMode(mode); diff --git a/apps/readest-app/src/hooks/useTrafficLight.ts b/apps/readest-app/src/hooks/useTrafficLight.ts index 0017b2a9..d2bc78df 100644 --- a/apps/readest-app/src/hooks/useTrafficLight.ts +++ b/apps/readest-app/src/hooks/useTrafficLight.ts @@ -35,6 +35,7 @@ const useTrafficLight = () => { unlistenEnterFullScreen?.(); unlistenExitFullScreen?.(); }; + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return { isTrafficLightVisible };