Use HOC for reader context usage

src/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx

@@ -11,8 +11,7 @@ import { ReactNode, useCallback, useMemo, useRef } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { TypographyProps } from '@mui/material/Typography';
 import { StackProps } from '@mui/material/Stack';
-import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
-import { ReaderProgressBarProps } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 import { ReaderProgressBarPageNumber } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarPageNumber.tsx';
 import { ReaderProgressBarContainer } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarContainer.tsx';
 import { ReaderProgressBarRoot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarRoot.tsx';
@@ -30,8 +29,10 @@ import { getOptionForDirection as getOptionForDirectionImpl } from '@/modules/th
 import { ReaderProgressBarSlotsActionArea } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlotsActionArea.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 
-export const ReaderProgressBar = ({
+const BaseReaderProgressBar = ({
     totalPages,
     pages,
     pageLoadStates,
@@ -40,34 +41,37 @@ export const ReaderProgressBar = ({
     slots,
     createProgressBarSlot,
     progressBarPosition,
-}: ReaderProgressBarProps & {
-    createProgressBarSlot: (
-        page: ReaderProgressBarProps['pages'][number],
-        pageLoadStates: ReaderProgressBarProps['pageLoadStates'],
-        pagesIndex: number,
-    ) => ReactNode;
-    slotProps?: {
-        container?: StackProps;
-        progressBarRoot?: StackProps;
-        progressBarSlotsActionArea?: StackProps;
-        progressBarSlotsContainer?: StackProps;
-        progressBarSlot?: BoxProps;
-        progressBarReadPages?: BoxProps;
-        progressBarCurrentPageSlot?: BoxProps;
-        progressBarPageTexts?: {
-            base?: TypographyProps;
-            current?: TypographyProps;
-            total?: TypographyProps;
+    isDragging,
+    setIsDragging,
+    openPage,
+    direction,
+}: ReaderProgressBarProps &
+    Pick<TReaderProgressBarContext, 'isDragging' | 'setIsDragging'> & {
+        createProgressBarSlot: (
+            page: ReaderProgressBarProps['pages'][number],
+            pageLoadStates: ReaderProgressBarProps['pageLoadStates'],
+            pagesIndex: number,
+        ) => ReactNode;
+        slotProps?: {
+            container?: StackProps;
+            progressBarRoot?: StackProps;
+            progressBarSlotsActionArea?: StackProps;
+            progressBarSlotsContainer?: StackProps;
+            progressBarSlot?: BoxProps;
+            progressBarReadPages?: BoxProps;
+            progressBarCurrentPageSlot?: BoxProps;
+            progressBarPageTexts?: {
+                base?: TypographyProps;
+                current?: TypographyProps;
+                total?: TypographyProps;
+            };
         };
-    };
-    slots?: {
-        progressBarCurrentPage?: ReactNode;
-    };
-}) => {
-    const { isDragging, setIsDragging } = useReaderProgressBarContext();
-    const openPage = ReaderControls.useOpenPage();
-    const direction = ReaderService.useGetThemeDirection();
-
+        slots?: {
+            progressBarCurrentPage?: ReactNode;
+        };
+        openPage: ReturnType<typeof ReaderControls.useOpenPage>;
+        direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+    }) => {
     const progressBarRef = useRef<HTMLDivElement | null>(null);
 
     const isHorizontalPosition = getProgressBarPositionInfo(progressBarPosition).isHorizontal;
@@ -212,3 +216,15 @@ export const ReaderProgressBar = ({
         </ReaderProgressBarContainer>
     );
 };
+
+export const ReaderProgressBar = withPropsFrom(
+    BaseReaderProgressBar,
+    [
+        useReaderProgressBarContext,
+        () => ({ openPage: ReaderControls.useOpenPage() }),
+        () => ({
+            direction: ReaderService.useGetThemeDirection(),
+        }),
+    ],
+    ['isDragging', 'setIsDragging', 'openPage', 'direction'],
+);

src/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx

@@ -16,9 +16,15 @@ import { ThemeMode } from '@/modules/theme/contexts/ThemeModeContext.tsx';
 import { createTheme } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { DIRECTION_TO_CACHE } from '@/modules/theme/ThemeDirectionCache.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 
-export const ReaderProgressBarDirectionWrapper = ({ children }: { children: ReactNode }) => {
-    const direction = ReaderService.useGetThemeDirection();
+const BaseReaderProgressBarDirectionWrapper = ({
+    children,
+    direction,
+}: {
+    children: ReactNode;
+    direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+}) => {
     const [appTheme] = useLocalStorage<AppThemes>('appTheme', 'default');
     const [themeMode] = useLocalStorage<ThemeMode>('themeMode', ThemeMode.SYSTEM);
     const [pureBlackMode] = useLocalStorage<boolean>('pureBlackMode', false);
@@ -40,3 +46,9 @@ export const ReaderProgressBarDirectionWrapper = ({ children }: { children: Reac
         </CacheProvider>
     );
 };
+
+export const ReaderProgressBarDirectionWrapper = withPropsFrom(
+    BaseReaderProgressBarDirectionWrapper,
+    [() => ({ direction: ReaderService.useGetThemeDirection() })],
+    ['direction'],
+);

src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx

@@ -20,15 +20,22 @@ import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/R
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
-import { ProgressBarPosition, ReaderResumeMode } from '@/modules/reader/types/Reader.types.ts';
+import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
 import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
+import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
 
-export const MobileReaderProgressBar = () => {
-    const { nextChapter, previousChapter } = useReaderStateChaptersContext();
-    const { isVisible } = useReaderOverlayContext();
-    const { setIsMaximized } = useReaderProgressBarContext();
+const BaseMobileReaderProgressBar = ({
+    previousChapter,
+    nextChapter,
+    isVisible,
+    setIsMaximized,
+}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
+    Pick<TReaderOverlayContext, 'isVisible'> &
+    Pick<TReaderProgressBarContext, 'setIsMaximized'>) => {
     const pagesState = userReaderStatePagesContext();
     const { currentPageIndex, pages } = pagesState;
 
@@ -177,3 +184,9 @@ export const MobileReaderProgressBar = () => {
         </ReaderProgressBarDirectionWrapper>
     );
 };
+
+export const MobileReaderProgressBar = withPropsFrom(
+    BaseMobileReaderProgressBar,
+    [useReaderStateChaptersContext, useReaderOverlayContext, useReaderProgressBarContext],
+    ['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized'],
+);

src/modules/reader/components/overlay/progress-bar/variants/StandardReaderProgressBar.tsx

@@ -9,26 +9,40 @@
 import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
-import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarSlot.tsx';
-import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
-import { ProgressBarType } from '@/modules/reader/types/Reader.types.ts';
+import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
 import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
 import { getPage, getProgressBarPositionInfo } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
 import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
+import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { useReaderProgressBarContext } from '@/modules/reader/contexts/ReaderProgressBarContext.tsx';
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
 
-export const StandardReaderProgressBar = () => {
+const BaseStandardReaderProgressBar = ({
+    readerNavBarWidth,
+    isMaximized,
+    setIsMaximized,
+    isDragging,
+    progressBarType,
+    progressBarSize,
+    progressBarPosition,
+    readerDirection,
+    scrollbarXSize,
+    scrollbarYSize,
+}: Pick<NavbarContextType, 'readerNavBarWidth'> &
+    Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> &
+    Pick<IReaderSettings, 'progressBarType' | 'progressBarSize' | 'progressBarPosition'> &
+    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & {
+        readerDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
+    }) => {
     const theme = useTheme();
     const pagesState = userReaderStatePagesContext();
     const { currentPageIndex, pages } = pagesState;
-    const { readerNavBarWidth } = useNavBarContext();
-    const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarContext();
-    const { progressBarType, progressBarSize, progressBarPosition } = ReaderService.useSettings();
-    const readerDirection = ReaderService.useGetThemeDirection();
-    const { scrollbarXSize, scrollbarYSize } = useReaderScrollbarContext();
 
     const currentPagesIndex = getPage(currentPageIndex, pages).pagesIndex;
 
@@ -255,3 +269,26 @@ export const StandardReaderProgressBar = () => {
         </ReaderProgressBarDirectionWrapper>
     );
 };
+
+export const StandardReaderProgressBar = withPropsFrom(
+    BaseStandardReaderProgressBar,
+    [
+        useNavBarContext,
+        useReaderProgressBarContext,
+        ReaderService.useSettingsWithoutDefaultFlag,
+        () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
+        useReaderScrollbarContext,
+    ],
+    [
+        'readerNavBarWidth',
+        'isMaximized',
+        'setIsMaximized',
+        'isDragging',
+        'progressBarType',
+        'progressBarSize',
+        'progressBarPosition',
+        'readerDirection',
+        'scrollbarXSize',
+        'scrollbarYSize',
+    ],
+);