Simplify ReaderControls#useOpenPage

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

@@ -14,18 +14,13 @@ import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { Select } from '@/base/components/inputs/Select.tsx';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
-import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
+import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 
-const BaseReaderNavBarDesktopPageNavigation = ({
-    openPage,
-}: {
-    openPage: ReturnType<typeof ReaderControls.useOpenPage>;
-}) => {
+const BaseReaderNavBarDesktopPageNavigation = () => {
     const { t } = useTranslation();
     const getOptionForDirection = useGetOptionForDirection();
     const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({
@@ -47,7 +42,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
                     getNextIndexFromPage(currentPage) === getNextIndexFromPage(pages.slice(-1)[0]),
                     direction,
                 )}
-                onClick={() => openPage('previous', undefined, false)}
+                onClick={() => ReaderControls.openPage('previous', undefined, false)}
             />
             <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
                 <InputLabel id="reader-nav-bar-desktop-page-select">{t('reader.page_info.label.page')}</InputLabel>
@@ -55,7 +50,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
                     labelId="reader-nav-bar-desktop-page-select"
                     label={t('reader.page_info.label.page')}
                     value={getNextIndexFromPage(currentPage)}
-                    onChange={(e) => openPage(e.target.value as number, undefined, false)}
+                    onChange={(e) => ReaderControls.openPage(e.target.value as number, undefined, false)}
                 >
                     {pages.map((page) => (
                         <MenuItem key={getNextIndexFromPage(page)} value={getNextIndexFromPage(page)}>
@@ -72,14 +67,10 @@ const BaseReaderNavBarDesktopPageNavigation = ({
                     !currentPage.primary.index,
                     direction,
                 )}
-                onClick={() => openPage('next', undefined, false)}
+                onClick={() => ReaderControls.openPage('next', undefined, false)}
             />
         </Stack>
     );
 };
 
-export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
-    memo(BaseReaderNavBarDesktopPageNavigation),
-    [() => ({ openPage: ReaderControls.useOpenPage() })],
-    ['openPage'],
-);
+export const ReaderNavBarDesktopPageNavigation = memo(BaseReaderNavBarDesktopPageNavigation);

src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx

@@ -28,7 +28,6 @@ import { getOptionForDirection as getOptionForDirectionImpl } from '@/features/t
 import { ReaderProgressBarSlotsActionArea } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotsActionArea.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ReadingMode } from '@/features/reader/Reader.types.ts';
@@ -39,7 +38,6 @@ const BaseReaderProgressBar = ({
     slots,
     createProgressBarSlot,
     progressBarPosition,
-    openPage,
     direction,
     fullSegmentClicks,
 }: ReaderProgressBarProps &
@@ -61,7 +59,6 @@ const BaseReaderProgressBar = ({
         slots?: {
             progressBarCurrentPage?: ReactNode;
         };
-        openPage: ReturnType<typeof ReaderControls.useOpenPage>;
         direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
         fullSegmentClicks: boolean;
     }) => {
@@ -114,7 +111,6 @@ const BaseReaderProgressBar = ({
     );
 
     ReaderControls.useHandleProgressDragging(
-        openPage,
         progressBarRef,
         isDragging,
         currentPage,
@@ -131,7 +127,7 @@ const BaseReaderProgressBar = ({
 
         const isTouchEvent = 'touches' in e;
 
-        openPage(
+        ReaderControls.openPage(
             getNextIndexFromPage(
                 getPageForMousePos(
                     isTouchEvent ? e.touches[0] : e,
@@ -170,7 +166,7 @@ const BaseReaderProgressBar = ({
                             ? (slotProps?.progressBarPageTexts?.current?.sx ?? [])
                             : [slotProps?.progressBarPageTexts?.current?.sx]),
                     ]}
-                    onClick={() => openPage('previous', 'ltr', false)}
+                    onClick={() => ReaderControls.openPage('previous', 'ltr', false)}
                 >
                     {currentPage.name}
                 </ReaderProgressBarPageNumber>
@@ -235,7 +231,7 @@ const BaseReaderProgressBar = ({
                             ? (slotProps?.progressBarPageTexts?.total?.sx ?? [])
                             : [slotProps?.progressBarPageTexts?.total?.sx]),
                     ]}
-                    onClick={() => openPage('next', 'ltr', false)}
+                    onClick={() => ReaderControls.openPage('next', 'ltr', false)}
                 >
                     {totalPages}
                 </ReaderProgressBarPageNumber>
@@ -244,8 +240,4 @@ const BaseReaderProgressBar = ({
     );
 };
 
-export const ReaderProgressBar = withPropsFrom(
-    memo(BaseReaderProgressBar),
-    [() => ({ openPage: ReaderControls.useOpenPage() })],
-    ['openPage'],
-);
+export const ReaderProgressBar = memo(BaseReaderProgressBar);