Move reader "pages state" to "reader store"

2025-09-19 17:01:20 +02:00
parent dabe50754f
commit bada26ead6
22 changed files with 232 additions and 406 deletions
--- a/src/features/reader/viewer/ReaderChapterViewer.tsx
+++ b/src/features/reader/viewer/ReaderChapterViewer.tsx
@@ -34,7 +34,6 @@ import { createHandleReaderPageLoadError, createUpdateReaderPageLoadState } from
 import { useReaderConvertPagesForReadingMode } from '@/features/reader/viewer/hooks/useReaderConvertPagesForReadingMode.ts';
 import { ReaderTransitionPage } from '@/features/reader/viewer/components/ReaderTransitionPage.tsx';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
-import { READER_STATE_PAGES_DEFAULTS } from '@/features/reader/ReaderContext.constants.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { useReaderSetPagesState } from '@/features/reader/viewer/hooks/useReaderSetPagesState.ts';
@@ -44,6 +43,7 @@ import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholde
 import { ReaderInfiniteScrollUpdateChapter } from '@/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import { READER_DEFAULT_PAGES_STATE } from '@/features/reader/ReaderStore.constants.ts';

 const BaseReaderChapterViewer = ({
    currentPageIndex,
@@ -138,13 +138,11 @@ const BaseReaderChapterViewer = ({
    const [fetchPages, pagesResponse] = requestManager.useGetChapterPagesFetch(chapterId ?? -1);

    const [arePagesFetched, setArePagesFetched] = useState(false);
-    const [totalPages, setTotalPages] = useState<ReaderStatePages['totalPages']>(
-        READER_STATE_PAGES_DEFAULTS.totalPages,
-    );
-    const [pageUrls, setPageUrls] = useState<ReaderStatePages['pageUrls']>(READER_STATE_PAGES_DEFAULTS.pageUrls);
-    const [pages, setPages] = useState<ReaderStatePages['pages']>(READER_STATE_PAGES_DEFAULTS.pages);
+    const [totalPages, setTotalPages] = useState<ReaderStatePages['totalPages']>(READER_DEFAULT_PAGES_STATE.totalPages);
+    const [pageUrls, setPageUrls] = useState<ReaderStatePages['pageUrls']>(READER_DEFAULT_PAGES_STATE.pageUrls);
+    const [pages, setPages] = useState<ReaderStatePages['pages']>(READER_DEFAULT_PAGES_STATE.pages);
    const [pageLoadStates, setPageLoadStates] = useState<ReaderStatePages['pageLoadStates']>(
-        READER_STATE_PAGES_DEFAULTS.pageLoadStates,
+        READER_DEFAULT_PAGES_STATE.pageLoadStates,
    );
    const [pagesToSpreadState, setPagesToSpreadState] = useState<ReaderPageSpreadState[]>(
        pageLoadStates.map(({ url }) => ({ url, isSpread: false })),
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/src/features/reader/viewer/ReaderViewer.tsx
@@ -28,11 +28,9 @@ import {
    ReaderOpenChapterLocationState,
    ReaderResumeMode,
    ReaderStateChapters,
-    ReaderStatePages,
    ReadingDirection,
    ReadingMode,
 } from '@/features/reader/Reader.types.ts';
-import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import {
@@ -77,18 +75,6 @@ const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType>
 const BaseReaderViewer = forwardRef(
    (
        {
-            currentPageIndex,
-            pageToScrollToIndex,
-            setPageToScrollToIndex,
-            pages,
-            totalPages,
-            setPages,
-            setPageLoadStates,
-            setTotalPages,
-            setCurrentPageIndex,
-            transitionPageMode,
-            retryFailedPagesKeyPrefix,
-            setTransitionPageMode,
            readingMode,
            readingDirection,
            shouldUseInfiniteScroll,
@@ -111,34 +97,19 @@ const BaseReaderViewer = forwardRef(
            setReaderStateChapters,
            isCurrentChapterReady,
        }: Pick<
-            ReaderStatePages,
-            | 'currentPageIndex'
-            | 'pageToScrollToIndex'
-            | 'setPageToScrollToIndex'
-            | 'pages'
-            | 'totalPages'
-            | 'setPages'
-            | 'setPageLoadStates'
-            | 'setTotalPages'
-            | 'setCurrentPageIndex'
-            | 'transitionPageMode'
-            | 'retryFailedPagesKeyPrefix'
-            | 'setTransitionPageMode'
+            IReaderSettings,
+            | 'readingMode'
+            | 'readingDirection'
+            | 'shouldUseInfiniteScroll'
+            | 'readerWidth'
+            | 'pageScaleMode'
+            | 'shouldOffsetDoubleSpreads'
+            | 'imagePreLoadAmount'
+            | 'pageGap'
+            | 'customFilter'
+            | 'shouldStretchPage'
+            | 'isStaticNav'
        > &
-            Pick<
-                IReaderSettings,
-                | 'readingMode'
-                | 'readingDirection'
-                | 'shouldUseInfiniteScroll'
-                | 'readerWidth'
-                | 'pageScaleMode'
-                | 'shouldOffsetDoubleSpreads'
-                | 'imagePreLoadAmount'
-                | 'pageGap'
-                | 'customFilter'
-                | 'shouldStretchPage'
-                | 'isStaticNav'
-            > &
            Pick<NavbarContextType, 'readerNavBarWidth'> &
            Pick<
                ReaderStateChapters,
@@ -157,6 +128,33 @@ const BaseReaderViewer = forwardRef(
    ) => {
        const { direction: themeDirection } = useTheme();
        const isOverlayVisible = useReaderStore((state) => state.overlay.isVisible);
+        const {
+            currentPageIndex,
+            pageToScrollToIndex,
+            setPageToScrollToIndex,
+            pages,
+            totalPages,
+            setPages,
+            setPageLoadStates,
+            setTotalPages,
+            setCurrentPageIndex,
+            transitionPageMode,
+            retryFailedPagesKeyPrefix,
+            setTransitionPageMode,
+        } = useReaderStoreShallow((state) => ({
+            currentPageIndex: state.pages.currentPageIndex,
+            pageToScrollToIndex: state.pages.pageToScrollToIndex,
+            setPageToScrollToIndex: state.pages.setPageToScrollToIndex,
+            pages: state.pages.pages,
+            totalPages: state.pages.totalPages,
+            setPages: state.pages.setPages,
+            setPageLoadStates: state.pages.setPageLoadStates,
+            setTotalPages: state.pages.setTotalPages,
+            setCurrentPageIndex: state.pages.setCurrentPageIndex,
+            transitionPageMode: state.pages.transitionPageMode,
+            retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
+            setTransitionPageMode: state.pages.setTransitionPageMode,
+        }));
        const { resumeMode = ReaderResumeMode.START } = useLocation<ReaderOpenChapterLocationState>().state ?? {
            resumeMode: ReaderResumeMode.START,
        };
@@ -445,7 +443,6 @@ const BaseReaderViewer = forwardRef(
 export const ReaderViewer = withPropsFrom(
    memo(BaseReaderViewer),
    [
-        userReaderStatePagesContext,
        ReaderService.useSettingsWithoutDefaultFlag,
        () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }),
        useReaderTapZoneContext,
@@ -453,17 +450,6 @@ export const ReaderViewer = withPropsFrom(
        useNavBarContext,
    ],
    [
-        'currentPageIndex',
-        'pageToScrollToIndex',
-        'setPageToScrollToIndex',
-        'pages',
-        'totalPages',
-        'setPages',
-        'setPageLoadStates',
-        'setTotalPages',
-        'setCurrentPageIndex',
-        'retryFailedPagesKeyPrefix',
-        'setTransitionPageMode',
        'readingMode',
        'readingDirection',
        'shouldUseInfiniteScroll',
@@ -476,7 +462,6 @@ export const ReaderViewer = withPropsFrom(
        'shouldStretchPage',
        'isStaticNav',
        'readerNavBarWidth',
-        'transitionPageMode',
        'updateCurrentPageIndex',
        'showPreview',
        'setShowPreview',
--- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx
+++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx
@@ -14,12 +14,7 @@ import { Link } from 'react-router-dom';
 import { ComponentProps, memo, useMemo } from 'react';
 import { alpha, useTheme } from '@mui/material/styles';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
-import {
-    IReaderSettings,
-    ReaderStatePages,
-    ReaderTransitionPageMode,
-    ReadingMode,
-} from '@/features/reader/Reader.types.ts';
+import { IReaderSettings, ReaderTransitionPageMode, ReadingMode } from '@/features/reader/Reader.types.ts';
 import { isTransitionPageVisible } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import { useBackButton } from '@/base/hooks/useBackButton.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
@@ -34,10 +29,9 @@ import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { getValueFromObject, noOp } from '@/lib/HelperFunctions.ts';
 import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const ChapterInfo = ({
    title,
@@ -78,7 +72,6 @@ const ChapterInfo = ({

 const BaseReaderTransitionPage = ({
    type,
-    transitionPageMode,
    readingMode,
    backgroundColor,
    shouldShowTransitionPage,
@@ -91,7 +84,6 @@ const BaseReaderTransitionPage = ({
    readerNavBarWidth,
    handleBack,
 }: Pick<IReaderSettings, 'readingMode' | 'backgroundColor' | 'shouldShowTransitionPage'> &
-    Pick<ReaderStatePages, 'transitionPageMode'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> & {
        // gets used in the "source props creators" of the "withPropsFrom" call
        // eslint-disable-next-line react/no-unused-prop-types
@@ -108,6 +100,7 @@ const BaseReaderTransitionPage = ({
    const { t } = useTranslation();
    const manga = useReaderStoreShallow((state) => state.manga);
    const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
+    const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode);

    const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
    const isNextType = type === ReaderTransitionPageMode.NEXT;
@@ -252,7 +245,6 @@ export const ReaderTransitionPage = withPropsFrom(
            };
        },
        useNavBarContext,
-        userReaderStatePagesContext,
        ReaderService.useSettingsWithoutDefaultFlag,
        ({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => {
            const handleBack = useBackButton();
@@ -286,7 +278,6 @@ export const ReaderTransitionPage = withPropsFrom(
        'nextChapterScanlator',
        'readerNavBarWidth',
        'backgroundColor',
-        'transitionPageMode',
        'readingMode',
        'handleBack',
        'shouldShowTransitionPage',
--- a/src/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts
+++ b/src/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts
@@ -59,7 +59,7 @@ const usePreserveOnValueChange = (
 const usePreserveOnWindowResize = (
    readingMode: ReadingMode,
    pageScaleMode: ReaderPageScaleMode,
-    setPageToScrollToIndex: React.Dispatch<React.SetStateAction<number | null>>,
+    setPageToScrollToIndex: (index: number | null) => void,
    pageIndex: number,
 ) => {
    const previousDimensionsRef = useRef({ width: window.innerWidth, height: window.innerHeight });