Simplify ReaderControls#useOpenChapter

src/features/reader/hotkeys/ReaderHotkeys.tsx

@@ -67,7 +67,6 @@ export const ReaderHotkeys = ({
     }));
     const exitReader = ReaderService.useExit();
 
-    const openChapter = ReaderControls.useOpenChapter();
     const openPage = ReaderControls.useOpenPage();
 
     useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_PAGE], () => openPage('previous'), [openPage]);
@@ -96,13 +95,12 @@ export const ReaderHotkeys = ({
                 readingDirection.value,
                 themeDirection,
                 scrollElementRef.current,
-                openChapter,
                 getReaderStore().tapZone.setShowPreview,
                 scrollAmount,
             );
         },
         { preventDefault: true },
-        [themeDirection, openChapter],
+        [themeDirection],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.SCROLL_FORWARD],
@@ -128,23 +126,22 @@ export const ReaderHotkeys = ({
                 readingDirection.value,
                 themeDirection,
                 scrollElementRef.current,
-                openChapter,
                 getReaderStore().tapZone.setShowPreview,
                 scrollAmount,
             );
         },
         { preventDefault: true },
-        [themeDirection, openChapter],
+        [themeDirection],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],
-        () => openChapter(getOptionForDirection('previous', 'next', readerThemeDirection)),
+        () => ReaderControls.openChapter(getOptionForDirection('previous', 'next', readerThemeDirection)),
-        [openChapter, readerThemeDirection],
+        [readerThemeDirection],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.NEXT_CHAPTER],
-        () => openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
+        () => ReaderControls.openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
-        [openChapter, readerThemeDirection],
+        [readerThemeDirection],
     );
     useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () =>
         getReaderStore().overlay.setIsVisible(!getReaderStore().overlay.isVisible),

src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx

@@ -7,9 +7,7 @@
  */
 
 import { memo } from 'react';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderInfiniteScrollUpdateChapter } from '@/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts';
-import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 
 const BaseReaderInfiniteScrollUpdateChapter = ({
@@ -20,7 +18,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
     isCurrentChapter,
     isNextChapterVisible,
     imageWrapper,
-    openChapter,
     scrollElement,
 }: {
     chapterId: ChapterIdInfo['id'];
@@ -30,7 +27,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
     isCurrentChapter: boolean;
     isNextChapterVisible: boolean;
     imageWrapper: HTMLElement | null;
-    openChapter: ReturnType<typeof ReaderControls.useOpenChapter>;
     scrollElement: HTMLElement | null;
 }) => {
     useReaderInfiniteScrollUpdateChapter(
@@ -39,7 +35,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
         previousChapterId,
         isCurrentChapter,
         isPreviousChapterVisible,
-        openChapter,
         imageWrapper,
         scrollElement,
     );
@@ -49,7 +44,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
         nextChapterId,
         isCurrentChapter,
         isNextChapterVisible,
-        openChapter,
         imageWrapper,
         scrollElement,
     );
@@ -57,8 +51,4 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
     return null;
 };
 
-export const ReaderInfiniteScrollUpdateChapter = withPropsFrom(
+export const ReaderInfiniteScrollUpdateChapter = memo(BaseReaderInfiniteScrollUpdateChapter);
-    memo(BaseReaderInfiniteScrollUpdateChapter),
-    [() => ({ openChapter: ReaderControls.useOpenChapter() })],
-    ['openChapter'],
-);

src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts

@@ -7,7 +7,6 @@
  */
 
 import { useCallback, useEffect, useMemo } from 'react';
-import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { ReadingDirection, ReadingMode } from '@/features/reader/Reader.types.ts';
 import {
     isContinuousReadingMode,
@@ -17,6 +16,7 @@ import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
 import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx';
 import { getReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
+import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 
 interface ElementIntersection {
     start: boolean;
@@ -242,7 +242,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
     chapterToOpenId: number | undefined,
     isCurrentChapter: boolean,
     isChapterToOpenVisible: boolean,
-    openChapter: ReturnType<typeof ReaderControls.useOpenChapter>,
     image: HTMLElement | null,
     scrollElement: HTMLElement | null,
 ) => {
@@ -286,7 +285,7 @@ export const useReaderInfiniteScrollUpdateChapter = (
 
             const loadChapter = loadPreviousChapter || loadNextChapter;
             if (loadChapter) {
-                openChapter(chapterToOpenId, undefined, false);
+                ReaderControls.openChapter(chapterToOpenId, undefined, false);
             }
         };
 
@@ -300,7 +299,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
         isCurrentChapter,
         isChapterToOpenVisible,
         chapterToOpenId,
-        openChapter,
     ]);
 
     useIntersectionObserver(
@@ -347,12 +345,12 @@ export const useReaderInfiniteScrollUpdateChapter = (
 
                 const openChapterToOpen = initialOpenPreviousChapter || openNextChapter;
                 if (openChapterToOpen) {
-                    openChapter(chapterToOpenId, !isChapterToOpenVisible, false);
+                    ReaderControls.openChapter(chapterToOpenId, !isChapterToOpenVisible, false);
                     return;
                 }
 
                 if (openPreviousChapter) {
-                    openChapter(chapterId, false, false);
+                    ReaderControls.openChapter(chapterId, false, false);
                 }
             },
             [
@@ -365,7 +363,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
                 readingDirection,
                 shouldUseInfiniteScroll,
                 shouldShowTransitionPage,
-                openChapter,
             ],
         ),
         useMemo(

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx

@@ -31,10 +31,8 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
     nextChapter,
     chapters = [],
     readerThemeDirection,
-    openChapter,
 }: Pick<ReaderStateChapters, 'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'> & {
     readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
-    openChapter: ReturnType<typeof ReaderControls.useOpenChapter>;
 }) => {
     const { t } = useTranslation();
 
@@ -56,7 +54,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
                     ),
                 )}
                 onClick={() => {
-                    openChapter(getOptionForDirection('previous', 'next', readerThemeDirection));
+                    ReaderControls.openChapter(getOptionForDirection('previous', 'next', readerThemeDirection));
                 }}
                 disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)}
             />
@@ -88,7 +86,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
                     ),
                 )}
                 onClick={() => {
-                    openChapter(getOptionForDirection('next', 'previous', readerThemeDirection));
+                    ReaderControls.openChapter(getOptionForDirection('next', 'previous', readerThemeDirection));
                 }}
                 disabled={getOptionForDirection(!nextChapter, !previousChapter, readerThemeDirection)}
             />
@@ -122,9 +120,6 @@ export const ReaderNavBarDesktopChapterNavigation = withPropsFrom(
         () => ({
             readerThemeDirection: ReaderService.useGetThemeDirection(),
         }),
-        () => ({
-            openChapter: ReaderControls.useOpenChapter(),
-        }),
     ],
-    ['readerThemeDirection', 'openChapter'],
+    ['readerThemeDirection'],
 );

src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx

@@ -28,8 +28,8 @@ import { ReaderProgressBarSlotMobile } from '@/features/reader/overlay/progress-
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
+import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 
 const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
     [ProgressBarPosition.BOTTOM]: 'up',
@@ -48,7 +48,6 @@ const BaseMobileReaderProgressBar = ({
     topOffset?: number;
     bottomOffset?: number;
 }) => {
-    const openChapter = ReaderControls.useOpenChapter();
     const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
     const isVisible = useReaderStore((state) => state.overlay.isVisible);
     const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({
@@ -251,7 +250,7 @@ const BaseMobileReaderProgressBar = ({
                     }}
                 >
                     <IconButton
-                        onClick={() => openChapter('previous')}
+                        onClick={() => ReaderControls.openChapter('previous')}
                         disabled={!previousChapter}
                         sx={{
                             backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
@@ -324,7 +323,7 @@ const BaseMobileReaderProgressBar = ({
                         slots={progressBarCurrentPage}
                     />
                     <IconButton
-                        onClick={() => openChapter('next')}
+                        onClick={() => ReaderControls.openChapter('next')}
                         disabled={!nextChapter}
                         sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
                     >

src/features/reader/services/ReaderControls.ts

@@ -91,7 +91,6 @@ export class ReaderControls {
         readingDirection: ReadingDirection,
         themeDirection: Direction,
         element: HTMLElement,
-        openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>,
         setShowPreview: TReaderTapZoneContext['setShowPreview'],
         scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
     ): void {
@@ -129,12 +128,12 @@ export class ReaderControls {
             scrollToOptions: ScrollToOptions,
         ) => {
             if (isAtStartForDirection && offset === ScrollOffset.BACKWARD && isContinuousReadingModeActive) {
-                openChapter('previous');
+                ReaderControls.openChapter('previous');
                 return;
             }
 
             if (isAtEndForDirection && offset === ScrollOffset.FORWARD && isContinuousReadingModeActive) {
-                openChapter('next');
+                ReaderControls.openChapter('next');
                 return;
             }
 
@@ -158,12 +157,11 @@ export class ReaderControls {
         }
     }
 
-    static useOpenChapter(): (
+    static openChapter(
         offset: 'previous' | 'next' | ChapterIdInfo['id'],
-        doTransitionCheck?: boolean,
+        doTransitionCheck: boolean = true,
-        scrollIntoView?: boolean,
+        scrollIntoView: boolean = true,
-    ) => void {
+    ): void {
-        return useCallback((offset, doTransitionCheck = true, scrollIntoView = true) => {
         const {
             chapters: {
                 currentChapter,
@@ -173,11 +171,7 @@ export class ReaderControls {
                 visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
                 setReaderStateChapters,
             },
-                settings: {
+            settings: { shouldInformAboutMissingChapter, shouldInformAboutScanlatorChange, shouldUseInfiniteScroll },
-                    shouldInformAboutMissingChapter,
-                    shouldInformAboutScanlatorChange,
-                    shouldUseInfiniteScroll,
-                },
         } = getReaderStore();
 
         if (!currentChapter) {
@@ -256,7 +250,6 @@ export class ReaderControls {
         };
 
         doOpenChapter().catch(defaultPromiseErrorHandler('ReaderControls#useOpenChapter'));
-        }, []);
     }
 
     private static async checkNextChapterConsistency(
@@ -323,18 +316,9 @@ export class ReaderControls {
         forceDirection?: Direction,
         hideOverlay?: boolean,
     ) => void {
-        const openChapter = ReaderControls.useOpenChapter();
+        return useCallback((page, forceDirection, hideOverlay: boolean = true) => {
-
-        return useCallback(
-            (page, forceDirection, hideOverlay: boolean = true) => {
             const {
-                    pages: {
+                pages: { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode },
-                        currentPageIndex,
-                        setPageToScrollToIndex,
-                        pages,
-                        transitionPageMode,
-                        setTransitionPageMode,
-                    },
                 settings: { readingDirection, readingMode, shouldShowTransitionPage },
             } = getReaderStore();
 
@@ -385,7 +369,7 @@ export class ReaderControls {
                 convertedPage === 'previous' &&
                 !!getReaderStore().chapters.previousChapter;
             if (shouldOpenPreviousChapter) {
-                    openChapter('previous');
+                ReaderControls.openChapter('previous');
                 return;
             }
 
@@ -395,7 +379,7 @@ export class ReaderControls {
                 convertedPage === 'next' &&
                 !!getReaderStore().chapters.nextChapter;
             if (shouldOpenNextChapter) {
-                    openChapter('next');
+                ReaderControls.openChapter('next');
                 return;
             }
 
@@ -426,9 +410,7 @@ export class ReaderControls {
             }
 
             setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex);
-            },
+        }, []);
-            [openChapter],
-        );
     }
 
     static useUpdateCurrentPageIndex(): (
@@ -554,7 +536,6 @@ export class ReaderControls {
     ): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
         const { direction: themeDirection } = useTheme();
         const openPage = ReaderControls.useOpenPage();
-        const openChapter = ReaderControls.useOpenChapter();
 
         return useCallback(
             (e) => {
@@ -589,7 +570,6 @@ export class ReaderControls {
                                 readingDirection.value,
                                 themeDirection,
                                 scrollElement,
-                                openChapter,
                                 getReaderStore().tapZone.setShowPreview,
                                 scrollAmount,
                             );
@@ -601,7 +581,7 @@ export class ReaderControls {
                         throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
                 }
             },
-            [scrollElement, openPage, openChapter, themeDirection],
+            [scrollElement, openPage, themeDirection],
         );
     }