Use HOC for reader context usage

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -32,6 +32,10 @@ import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/R
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
+import { ReaderStateChapters, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
     const wasNavBarStaticRef = useRef(isStaticNav);
@@ -52,17 +56,35 @@ const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolea
 };
 
 const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
-export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDesktopProps) => {
+const BaseReaderNavBarDesktop = ({
+    isVisible,
+    openSettings,
+    setReaderNavBarWidth,
+    manga,
+    chapters,
+    currentChapter,
+    previousChapter,
+    nextChapter,
+    pages,
+    currentPageIndex,
+    pageLoadStates,
+    setPageLoadStates,
+    setRetryFailedPagesKeyPrefix,
+    exit,
+}: ReaderNavBarDesktopProps &
+    Pick<NavbarContextType, 'setReaderNavBarWidth'> &
+    Pick<TReaderStateMangaContext, 'manga'> &
+    Pick<ReaderStateChapters, 'currentChapter' | 'previousChapter' | 'nextChapter' | 'chapters'> &
+    Pick<
+        ReaderStatePages,
+        'pages' | 'currentPageIndex' | 'pageLoadStates' | 'setPageLoadStates' | 'setRetryFailedPagesKeyPrefix'
+    > & {
+        exit: ReturnType<typeof ReaderService.useExit>;
+    }) => {
     const { t } = useTranslation();
-    const { setReaderNavBarWidth } = useNavBarContext();
-    const { manga } = useReaderStateMangaContext();
-    const { chapters, currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
-    const { pages, currentPageIndex, pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } =
-        userReaderStatePagesContext();
 
     const getOptionForDirection = useGetOptionForDirection();
 
-    const exit = ReaderService.useExit();
     const updateReaderSettings = ReaderService.useCreateUpdateSetting(manga ?? DEFAULT_MANGA);
     const settings = ReaderService.useSettings();
 
@@ -154,3 +176,28 @@ export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDes
         </Drawer>
     );
 };
+
+export const ReaderNavBarDesktop = withPropsFrom(
+    BaseReaderNavBarDesktop,
+    [
+        useNavBarContext,
+        useReaderStateMangaContext,
+        useReaderStateChaptersContext,
+        userReaderStatePagesContext,
+        () => ({ exit: ReaderService.useExit() }),
+    ],
+    [
+        'setReaderNavBarWidth',
+        'manga',
+        'chapters',
+        'currentChapter',
+        'previousChapter',
+        'nextChapter',
+        'pages',
+        'currentPageIndex',
+        'pageLoadStates',
+        'setPageLoadStates',
+        'setRetryFailedPagesKeyPrefix',
+        'exit',
+    ],
+);

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

@@ -23,16 +23,20 @@ import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
 import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderNavBarDesktopChapterNavigation = ({
+const BaseReaderNavBarDesktopChapterNavigation = ({
     currentChapter,
     previousChapter,
     nextChapter,
     chapters = [],
-}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'>) => {
+    readerThemeDirection,
+    openChapter,
+}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'> & {
+    readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
+    openChapter: ReturnType<typeof ReaderControls.useOpenChapter>;
+}) => {
     const { t } = useTranslation();
-    const readerThemeDirection = ReaderService.useGetThemeDirection();
-    const openChapter = ReaderControls.useOpenChapter();
 
     const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
 
@@ -111,3 +115,16 @@ export const ReaderNavBarDesktopChapterNavigation = ({
         </Stack>
     );
 };
+
+export const ReaderNavBarDesktopChapterNavigation = withPropsFrom(
+    BaseReaderNavBarDesktopChapterNavigation,
+    [
+        () => ({
+            readerThemeDirection: ReaderService.useGetThemeDirection(),
+        }),
+        () => ({
+            openChapter: ReaderControls.useOpenChapter(),
+        }),
+    ],
+    ['readerThemeDirection', 'openChapter'],
+);

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

@@ -20,18 +20,23 @@ import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderNavBarDesktopPageNavigation = ({
+const BaseReaderNavBarDesktopPageNavigation = ({
     currentPageIndex,
     pages,
-}: Pick<ReaderStatePages, 'currentPageIndex' | 'pages'>) => {
+    readingDirection,
+    openPage,
+}: Pick<ReaderStatePages, 'currentPageIndex' | 'pages'> &
+    Pick<IReaderSettings, 'readingDirection'> & {
+        openPage: ReturnType<typeof ReaderControls.useOpenPage>;
+    }) => {
     const { t } = useTranslation();
-    const openPage = ReaderControls.useOpenPage();
-    const { readingDirection } = ReaderService.useSettings();
     const getOptionForDirection = useGetOptionForDirection();
     const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
 
-    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
+    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
 
     return (
         <Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
@@ -73,3 +78,9 @@ export const ReaderNavBarDesktopPageNavigation = ({
         </Stack>
     );
 };
+
+export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
+    BaseReaderNavBarDesktopPageNavigation,
+    [() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag],
+    ['readingDirection', 'openPage'],
+);

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -25,11 +25,20 @@ import { ReaderChapterList } from '@/modules/reader/components/overlay/navigatio
 import { ReaderBottomBarMobileQuickSettings } from '@/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
+import { ReaderStateChapters, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomBarMobileProps) => {
+const BaseReaderBottomBarMobile = ({
+    openSettings,
+    isVisible,
+    currentChapter,
+    chapters,
+    scrollbarXSize,
+    scrollbarYSize,
+}: ReaderBottomBarMobileProps &
+    Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> &
+    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'>) => {
     const { t } = useTranslation();
-    const { currentChapter, chapters } = useReaderStateChaptersContext();
-    const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
 
     const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
     const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
@@ -112,3 +121,9 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
         </>
     );
 };
+
+export const ReaderBottomBarMobile = withPropsFrom(
+    BaseReaderBottomBarMobile,
+    [useReaderStateChaptersContext, useReaderScrollbarContext],
+    ['currentChapter', 'chapters', 'scrollbarXSize', 'scrollbarYSize'],
+);

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx

@@ -13,11 +13,16 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
+import { IReaderSettingsWithDefaultFlag, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
 const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
-export const ReaderBottomBarMobileQuickSettings = () => {
-    const { manga } = useReaderStateMangaContext();
-    const { readingMode, readingDirection } = ReaderService.useSettings();
+const BaseReaderBottomBarMobileQuickSettings = ({
+    manga,
+    readingMode,
+    readingDirection,
+}: Pick<TReaderStateMangaContext, 'manga'> &
+    Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection'>) => {
     const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? DEFAULT_MANGA);
 
     if (!manga) {
@@ -42,3 +47,9 @@ export const ReaderBottomBarMobileQuickSettings = () => {
         </Stack>
     );
 };
+
+export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
+    BaseReaderBottomBarMobileQuickSettings,
+    [useReaderStateMangaContext, ReaderService.useSettings],
+    ['manga', 'readingMode', 'readingDirection'],
+);