ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pass progress bar props per HOC

Browse Source 
Some unused "reader page state" values which were passed as props caused unnecessary re-renders
This commit is contained in:
schroda
2024-12-26 17:38:12 +01:00
parent d4939247bd
commit 506be54e72
4 changed files with 39 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,19 +14,19 @@ import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import { ComponentProps, memo, useCallback, useLayoutEffect } from 'react';
import { ReaderProgressBar } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBar.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
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, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { 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';
import { ReaderProgressBarProps, TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { ReaderProgressBarSlotMobile } from '@/modules/reader/components/overlay/progress-bar/mobile/ReaderProgressBarSlotMobile.tsx';
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotProps'] = {
container: {
@@ -98,14 +98,15 @@ const BaseMobileReaderProgressBar = ({
nextChapter,
isVisible,
setIsMaximized,
currentPageIndex,
pages,
direction,
}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
Pick<TReaderOverlayContext, 'isVisible'> &
Pick<TReaderProgressBarContext, 'setIsMaximized'>) => {
const pagesState = userReaderStatePagesContext();
const { currentPageIndex, pages } = pagesState;
const direction = ReaderService.useGetThemeDirection();
Pick<TReaderProgressBarContext, 'setIsMaximized'> &
Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> & {
direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
}) => {
const openNextChapter = ReaderService.useNavigateToChapter(nextChapter, ReaderResumeMode.START);
const openPreviousChapter = ReaderService.useNavigateToChapter(previousChapter, ReaderResumeMode.END);
@@ -133,8 +134,6 @@ const BaseMobileReaderProgressBar = ({
{getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
</IconButton>
<ReaderProgressBar
progressBarPosition={ProgressBarPosition.BOTTOM}
{...pagesState}
createProgressBarSlot={useCallback(
(page, _1, _2, _3, _4, _5, isTrailingPage) => (
<ReaderProgressBarSlotMobile pageName={page.name} isTrailingPage={isTrailingPage} />
@@ -168,6 +167,12 @@ const BaseMobileReaderProgressBar = ({
export const MobileReaderProgressBar = withPropsFrom(
memo(BaseMobileReaderProgressBar),
[useReaderStateChaptersContext, useReaderOverlayContext, useReaderProgressBarContext],
['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized'],
[
useReaderStateChaptersContext,
useReaderOverlayContext,
useReaderProgressBarContext,
userReaderStatePagesContext,
() => ({ direction: ReaderService.useGetThemeDirection() }),
],
['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized', 'currentPageIndex', 'pages', 'direction'],
);