diff --git a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx index d7df58b1..95c805f1 100644 --- a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx +++ b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx @@ -17,7 +17,7 @@ import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts'; import { CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; -import { getReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderAutoScroll = ({ themeDirection, @@ -26,11 +26,11 @@ const BaseReaderAutoScroll = ({ themeDirection: Direction; combinedDirection: Direction; }) => { - const { scrollRef, direction } = useReaderStoreShallow((state) => ({ + const { scrollRef, direction } = useReaderStore((state) => ({ scrollRef: state.autoScroll.scrollRef, direction: state.autoScroll.direction, })); - const { readingMode, autoScroll } = useReaderStoreShallow((state) => ({ + const { readingMode, autoScroll } = useReaderStore((state) => ({ readingMode: state.settings.readingMode.value, autoScroll: state.settings.autoScroll, })); diff --git a/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx b/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx index 049d3ca9..25d260ac 100644 --- a/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx +++ b/src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx @@ -17,7 +17,7 @@ import { useRef } from 'react'; import { IReaderSettings } from '@/features/reader/Reader.types.ts'; import { AUTO_SCROLL_SPEED } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { coerceIn } from '@/lib/HelperFunctions.ts'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; export const ReaderNavBarDesktopAutoScroll = ({ autoScroll, @@ -26,7 +26,7 @@ export const ReaderNavBarDesktopAutoScroll = ({ setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void; }) => { const { t } = useTranslation(); - const { isActive, toggleActive } = useReaderStoreShallow((state) => ({ + const { isActive, toggleActive } = useReaderStore((state) => ({ isActive: state.autoScroll.isActive, toggleActive: state.autoScroll.toggleActive, })); diff --git a/src/features/reader/filters/ReaderRGBAFilter.tsx b/src/features/reader/filters/ReaderRGBAFilter.tsx index 10d974f0..ab1a231f 100644 --- a/src/features/reader/filters/ReaderRGBAFilter.tsx +++ b/src/features/reader/filters/ReaderRGBAFilter.tsx @@ -10,13 +10,13 @@ import Box from '@mui/material/Box'; import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick) => { const { value: { red, green, blue, alpha, blendMode }, enabled, - } = useReaderStoreShallow((state) => state.settings.customFilter.rgba); + } = useReaderStore((state) => state.settings.customFilter.rgba); if (!enabled) { return null; diff --git a/src/features/reader/hotkeys/ReaderHotkeys.tsx b/src/features/reader/hotkeys/ReaderHotkeys.tsx index e36bd83b..4f219ec7 100644 --- a/src/features/reader/hotkeys/ReaderHotkeys.tsx +++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx @@ -23,7 +23,7 @@ import { HotkeyScope } from '@/features/hotkeys/Hotkeys.types.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; import { ScrollOffset } from '@/base/Base.types.ts'; import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; -import { getReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const useHotkeys = (...args: Parameters): ReturnType => { const [keys, callback, options, dependencies] = args; @@ -60,7 +60,7 @@ export const ReaderHotkeys = ({ }) => { const readerThemeDirection = ReaderService.useGetThemeDirection(); const { enableScope, disableScope } = useHotkeysContext(); - const { hotkeys } = useReaderStoreShallow((state) => ({ + const { hotkeys } = useReaderStore((state) => ({ hotkeys: state.settings.hotkeys, })); const exitReader = ReaderService.useExit(); diff --git a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts index eae590ce..9fe726b1 100644 --- a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts +++ b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts @@ -15,7 +15,7 @@ import { import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts'; import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx'; -import { getReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; interface ElementIntersection { @@ -245,7 +245,7 @@ export const useReaderInfiniteScrollUpdateChapter = ( image: HTMLElement | null, scrollElement: HTMLElement | null, ) => { - const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStoreShallow( + const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStore( (state) => ({ readingMode: state.settings.readingMode.value, readingDirection: state.settings.readingDirection.value, diff --git a/src/features/reader/overlay/components/ReaderPageNumber.tsx b/src/features/reader/overlay/components/ReaderPageNumber.tsx index b036e774..1b249207 100644 --- a/src/features/reader/overlay/components/ReaderPageNumber.tsx +++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx @@ -17,20 +17,20 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { reverseString } from '@/base/utils/Strings.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderPageNumber = ({ isDesktop, readerNavBarWidth, }: Pick, 'isDesktop'> & Pick) => { - const scrollbar = useReaderStoreShallow((state) => state.scrollbar); - const { currentPageIndex, pages, totalPages } = useReaderStoreShallow((state) => ({ + const scrollbar = useReaderStore((state) => state.scrollbar); + const { currentPageIndex, pages, totalPages } = useReaderStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, totalPages: state.pages.totalPages, })); - const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStoreShallow((state) => ({ + const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStore((state) => ({ readingDirection: state.settings.readingDirection.value, shouldShowPageNumber: state.settings.shouldShowPageNumber, progressBarType: state.settings.progressBarType, diff --git a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx index 49ab03b6..dce34949 100644 --- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx +++ b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx @@ -30,17 +30,17 @@ import { FALLBACK_CHAPTER } from '@/features/chapter/Chapter.constants.ts'; import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; import { requestManager } from '@/lib/requests/RequestManager.ts'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' }; const BaseReaderOverlayHeaderMobile = forwardRef(({ isVisible }, ref) => { const { t } = useTranslation(); const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); - const currentChapter = useReaderStoreShallow((state) => state.chapters.currentChapter); + const currentChapter = useReaderStore((state) => state.chapters.currentChapter); - const manga = useReaderStoreShallow((state) => state.manga); - const scrollbar = useReaderStoreShallow((state) => state.scrollbar); + const manga = useReaderStore((state) => state.manga); + const scrollbar = useReaderStore((state) => state.scrollbar); const { id: mangaId, title } = manga ?? DEFAULT_MANGA; const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER; diff --git a/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx b/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx index d2b0903c..da5f0a70 100644 --- a/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx +++ b/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx @@ -14,7 +14,7 @@ import { memo } from 'react'; import { CustomTooltip } from '@/base/components/CustomTooltip.tsx'; import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx'; import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const ACTION_FALLBACK_MANGA = { ...FALLBACK_MANGA, @@ -23,7 +23,7 @@ const ACTION_FALLBACK_MANGA = { }; export const ReaderLibraryButton = memo(() => { - const manga = useReaderStoreShallow((state) => state.manga); + const manga = useReaderStore((state) => state.manga); const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA; diff --git a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx index bc61285a..6ac5c67f 100644 --- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx +++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx @@ -29,7 +29,7 @@ import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholde import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => { const wasNavBarStaticRef = useRef(isStaticNav); @@ -55,8 +55,8 @@ const BaseReaderNavBarDesktop = ({ setReaderNavBarWidth, }: ReaderNavBarDesktopProps & Pick) => { const { t } = useTranslation(); - const manga = useReaderStoreShallow((state) => state.manga); - const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStoreShallow((state) => ({ + const manga = useReaderStore((state) => state.manga); + const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStore((state) => ({ chapters: state.chapters.chapters, currentChapter: state.chapters.currentChapter, previousChapter: state.chapters.previousChapter, diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx index 72d29d80..74effb60 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx @@ -22,7 +22,7 @@ import { CHAPTER_ACTION_TO_TRANSLATION, FALLBACK_CHAPTER } from '@/features/chap import { IconBrowser } from '@/assets/icons/IconBrowser.tsx'; import { IconWebView } from '@/assets/icons/IconWebView.tsx'; import { requestManager } from '@/lib/requests/RequestManager.ts'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; const DownloadButton = ({ @@ -62,12 +62,12 @@ const DownloadButton = ({ }; export const ReaderNavBarDesktopActions = memo(() => { - const currentChapter = useReaderStoreShallow((state) => state.chapters.currentChapter); + const currentChapter = useReaderStore((state) => state.chapters.currentChapter); const { id, isBookmarked, realUrl } = currentChapter ?? FALLBACK_CHAPTER; const { t } = useTranslation(); - const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStoreShallow((state) => ({ + const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStore((state) => ({ pageLoadStates: state.pages.pageLoadStates, setPageLoadStates: state.pages.setPageLoadStates, setRetryFailedPagesKeyPrefix: state.pages.setRetryFailedPagesKeyPrefix, diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx index 6911d3ed..98e1de6d 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx @@ -17,13 +17,13 @@ import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progres 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 { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; const BaseReaderNavBarDesktopPageNavigation = () => { const { t } = useTranslation(); const getOptionForDirection = useGetOptionForDirection(); - const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({ + const { currentPageIndex, pages } = useReaderStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, })); diff --git a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx index f19bd173..4affcdda 100644 --- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx @@ -18,12 +18,12 @@ import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/n import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick) => { const { t } = useTranslation(); const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } = - useReaderStoreShallow((state) => ({ + useReaderStore((state) => ({ readingMode: state.settings.readingMode, shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads, pageScaleMode: state.settings.pageScaleMode, diff --git a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx index 3549891a..e5ae0cb2 100644 --- a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx +++ b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx @@ -24,7 +24,7 @@ import { MobileReaderProgressBar } from '@/features/reader/overlay/progress-bar/ import { ReaderChapterList } from '@/features/reader/overlay/navigation/components/ReaderChapterList.tsx'; import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderBottomBarMobile = ({ openSettings, @@ -32,14 +32,14 @@ const BaseReaderBottomBarMobile = ({ topOffset = 0, }: ReaderBottomBarMobileProps & { topOffset?: number }) => { const { t } = useTranslation(); - const { currentChapter, chapters } = useReaderStoreShallow((state) => ({ + const { currentChapter, chapters } = useReaderStore((state) => ({ currentChapter: state.chapters.currentChapter, chapters: state.chapters.chapters, })); const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' }); const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' }); - const scrollbar = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStore((state) => state.scrollbar); const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0); const bottomBarRef = useRef(null); diff --git a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx index 01154d37..55995ace 100644 --- a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx @@ -15,15 +15,15 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx'; import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx'; import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderBottomBarMobileQuickSettings = () => { const { t } = useTranslation(); - const { isActive, toggleActive } = useReaderStoreShallow((state) => ({ + const { isActive, toggleActive } = useReaderStore((state) => ({ isActive: state.autoScroll.isActive, toggleActive: state.autoScroll.toggleActive, })); - const { readingMode, readingDirection, autoScroll } = useReaderStoreShallow((state) => ({ + const { readingMode, readingDirection, autoScroll } = useReaderStore((state) => ({ readingMode: state.settings.readingMode, readingDirection: state.settings.readingDirection, autoScroll: state.settings.autoScroll, diff --git a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx index c9cf56f6..952b9cad 100644 --- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx @@ -31,7 +31,7 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; 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'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseReaderProgressBar = ({ slotProps, @@ -62,14 +62,14 @@ const BaseReaderProgressBar = ({ direction: ReturnType; fullSegmentClicks: boolean; }) => { - const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStoreShallow((state) => ({ + const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStore((state) => ({ pages: state.pages.pages, pageLoadStates: state.pages.pageLoadStates, totalPages: state.pages.totalPages, currentPageIndex: state.pages.currentPageIndex, })); const readingMode = useReaderStore((state) => state.settings.readingMode.value); - const { isDragging, setIsDragging } = useReaderStoreShallow((state) => ({ + const { isDragging, setIsDragging } = useReaderStore((state) => ({ isDragging: state.progressBar.isDragging, setIsDragging: state.progressBar.setIsDragging, })); diff --git a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx index 4d59034e..c6c098f6 100644 --- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx @@ -20,7 +20,7 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { ReaderProgressBarSlotDesktop } from '@/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const BaseStandardReaderProgressBar = ({ readerNavBarWidth, @@ -30,16 +30,17 @@ const BaseStandardReaderProgressBar = ({ }) => { const theme = useTheme(); - const scrollbar = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStore((state) => state.scrollbar); const totalPages = useReaderStore((state) => state.pages.totalPages); - const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = - useReaderStoreShallow((state) => ({ + const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = useReaderStore( + (state) => ({ progressBarType: state.settings.progressBarType, progressBarSize: state.settings.progressBarSize, progressBarPosition: state.settings.progressBarPosition, progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, - })); - const { isMaximized, setIsMaximized, isDragging } = useReaderStoreShallow((state) => ({ + }), + ); + const { isMaximized, setIsMaximized, isDragging } = useReaderStore((state) => ({ isMaximized: state.progressBar.isMaximized, setIsMaximized: state.progressBar.setIsMaximized, isDragging: state.progressBar.isDragging, diff --git a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx index fa425339..7c34a0b6 100644 --- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx +++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx @@ -28,7 +28,7 @@ import { ReaderProgressBarSlotMobile } from '@/features/reader/overlay/progress- import { applyStyles } from '@/base/utils/ApplyStyles.ts'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record = { @@ -48,9 +48,9 @@ const BaseMobileReaderProgressBar = ({ topOffset?: number; bottomOffset?: number; }) => { - const scrollbar = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStore((state) => state.scrollbar); const isVisible = useReaderStore((state) => state.overlay.isVisible); - const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({ + const { currentPageIndex, pages } = useReaderStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pages: state.pages.pages, })); @@ -58,11 +58,11 @@ const BaseMobileReaderProgressBar = ({ previousChapter: state.chapters.previousChapter, nextChapter: state.chapters.nextChapter, })); - const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStoreShallow((state) => ({ + const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStore((state) => ({ progressBarPosition: state.settings.progressBarPosition, progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical, })); - const { setIsMaximized, isDragging } = useReaderStoreShallow((state) => ({ + const { setIsMaximized, isDragging } = useReaderStore((state) => ({ setIsMaximized: state.progressBar.setIsMaximized, isDragging: state.progressBar.isDragging, })); diff --git a/src/features/reader/screens/Reader.tsx b/src/features/reader/screens/Reader.tsx index b84fdefe..43aca425 100644 --- a/src/features/reader/screens/Reader.tsx +++ b/src/features/reader/screens/Reader.tsx @@ -35,7 +35,8 @@ import { useReaderSetChaptersState } from '@/features/reader/hooks/useReaderSetC import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts'; import { useChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx'; import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; + import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx'; const BaseReader = ({ @@ -43,16 +44,14 @@ const BaseReader = ({ readerNavBarWidth, }: Pick) => { const { t } = useTranslation(); - const manga = useReaderStoreShallow((state) => state.manga); - const overlay = useReaderStoreShallow((state) => state.overlay); - const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderStoreShallow( - (state) => ({ - mangaChapters: state.chapters.mangaChapters, - initialChapter: state.chapters.initialChapter, - chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling, - currentChapter: state.chapters.currentChapter, - }), - ); + const manga = useReaderStore((state) => state.manga); + const overlay = useReaderStore((state) => state.overlay); + const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderStore((state) => ({ + mangaChapters: state.chapters.mangaChapters, + initialChapter: state.chapters.initialChapter, + chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling, + currentChapter: state.chapters.currentChapter, + })); const { shouldSkipDupChapters, shouldSkipFilteredChapters, @@ -63,7 +62,7 @@ const BaseReader = ({ shouldShowReadingModePreview, shouldShowTapZoneLayoutPreview, setSettings, - } = useReaderStoreShallow((state) => ({ + } = useReaderStore((state) => ({ shouldSkipDupChapters: state.settings.shouldSkipDupChapters, shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters, backgroundColor: state.settings.backgroundColor, @@ -112,7 +111,7 @@ const BaseReader = ({ const error = mangaResponse.error ?? chaptersResponse.error ?? defaultSettingsResponse.error; useEffect(() => { - useReaderStore.getState().setManga(mangaResponse.data?.manga); + getReaderStore().setManga(mangaResponse.data?.manga); }, [mangaResponse.data?.manga]); useReaderResetStates(); diff --git a/src/features/reader/settings/screens/ReaderSettings.tsx b/src/features/reader/settings/screens/ReaderSettings.tsx index a7bcb5dd..45d85b73 100644 --- a/src/features/reader/settings/screens/ReaderSettings.tsx +++ b/src/features/reader/settings/screens/ReaderSettings.tsx @@ -15,10 +15,10 @@ import { ReaderSettingsTabs } from '@/features/reader/settings/components/Reader import { ReaderSettingTab } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { useDisableAllHotkeysWhileMounted } from '@/features/hotkeys/Hotkeys.utils.ts'; import { applyStyles } from '@/base/utils/ApplyStyles.ts'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => { - const settings = useReaderStoreShallow((state) => state.settings); + const settings = useReaderStore((state) => state.settings); useDisableAllHotkeysWhileMounted(isOpen); diff --git a/src/features/reader/stores/ReaderStore.ts b/src/features/reader/stores/ReaderStore.ts index 015aecfb..8b6187af 100644 --- a/src/features/reader/stores/ReaderStore.ts +++ b/src/features/reader/stores/ReaderStore.ts @@ -63,7 +63,7 @@ const DEFAULT_STATE = { }, } satisfies Pick & { scrollbar: Pick }; -export const useReaderStore = create()( +const readerStore = create()( immer((set, get, store) => ({ ...DEFAULT_STATE, reset: () => @@ -114,6 +114,5 @@ export const useReaderStore = create()( ...createReaderTapZoneStoreSlice(set, get, store), })), ); -export const useReaderStoreShallow = (selector: (state: ReaderStore) => T): T => - useReaderStore(useShallow(selector)); -export const getReaderStore = () => useReaderStore.getState(); +export const useReaderStore = (selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector)); +export const getReaderStore = () => readerStore.getState(); diff --git a/src/features/reader/tap-zones/TapZoneLayout.tsx b/src/features/reader/tap-zones/TapZoneLayout.tsx index c977217e..c6a0725e 100644 --- a/src/features/reader/tap-zones/TapZoneLayout.tsx +++ b/src/features/reader/tap-zones/TapZoneLayout.tsx @@ -15,13 +15,13 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; import { ReadingDirection } from '@/features/reader/Reader.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const CANVAS_ID = 'reader-tap-zone-layout-canvas'; const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick) => { const theme = useTheme(); - const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStoreShallow((state) => ({ + const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStore((state) => ({ tapZoneLayout: state.settings.tapZoneLayout.value, tapZoneInvertMode: state.settings.tapZoneInvertMode.value, readingDirection: state.settings.readingDirection.value, diff --git a/src/features/reader/viewer/ReaderViewer.tsx b/src/features/reader/viewer/ReaderViewer.tsx index 306b77fb..b73deb6a 100644 --- a/src/features/reader/viewer/ReaderViewer.tsx +++ b/src/features/reader/viewer/ReaderViewer.tsx @@ -56,7 +56,7 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts'; import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; -import { getReaderStore, useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { getReaderStore, useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const READING_MODE_TO_IN_VIEWPORT_TYPE: Record = { [ReadingMode.SINGLE_PAGE]: PageInViewportType.X, @@ -92,7 +92,7 @@ const BaseReaderViewer = forwardRef( transitionPageMode, retryFailedPagesKeyPrefix, setTransitionPageMode, - } = useReaderStoreShallow((state) => ({ + } = useReaderStore((state) => ({ currentPageIndex: state.pages.currentPageIndex, pageToScrollToIndex: state.pages.pageToScrollToIndex, setPageToScrollToIndex: state.pages.setPageToScrollToIndex, @@ -113,7 +113,7 @@ const BaseReaderViewer = forwardRef( visibleChapters, setReaderStateChapters, isCurrentChapterReady, - } = useReaderStoreShallow((state) => ({ + } = useReaderStore((state) => ({ initialChapter: state.chapters.initialChapter, currentChapter: state.chapters.currentChapter, chapters: state.chapters.chapters, @@ -132,7 +132,7 @@ const BaseReaderViewer = forwardRef( customFilter, shouldStretchPage, isStaticNav, - } = useReaderStoreShallow((state) => ({ + } = useReaderStore((state) => ({ readingMode: state.settings.readingMode.value, readingDirection: state.settings.readingDirection.value, readerWidth: state.settings.readerWidth.value, @@ -144,7 +144,7 @@ const BaseReaderViewer = forwardRef( shouldStretchPage: state.settings.shouldStretchPage.value, isStaticNav: state.settings.isStaticNav, })); - const { showPreview, setShowPreview } = useReaderStoreShallow((state) => ({ + const { showPreview, setShowPreview } = useReaderStore((state) => ({ showPreview: state.tapZone.showPreview, setShowPreview: state.tapZone.setShowPreview, })); @@ -159,7 +159,7 @@ const BaseReaderViewer = forwardRef( const isContinuousReadingModeActive = isContinuousReadingMode(readingMode); const isDragging = useMouseDragScroll(scrollElementRef); - const automaticScrolling = useReaderStoreShallow((state) => ({ + const automaticScrolling = useReaderStore((state) => ({ isPaused: state.autoScroll.isPaused, pause: state.autoScroll.pause, resume: state.autoScroll.resume, diff --git a/src/features/reader/viewer/components/ReaderPage.tsx b/src/features/reader/viewer/components/ReaderPage.tsx index 2a935647..5a6264f6 100644 --- a/src/features/reader/viewer/components/ReaderPage.tsx +++ b/src/features/reader/viewer/components/ReaderPage.tsx @@ -17,7 +17,7 @@ import { import { applyStyles } from '@/base/utils/ApplyStyles.ts'; import { MediaQuery } from '@/base/utils/MediaQuery.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; -import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const getCustomFilterString = (customFilter: ReaderCustomFilter): string => Object.keys(customFilter) @@ -86,7 +86,7 @@ const BaseReaderPage = ({ const { src } = props; const isTabletWidth = MediaQuery.useIsTabletWidth(); - const scrollbar = useReaderStoreShallow((state) => state.scrollbar); + const scrollbar = useReaderStore((state) => state.scrollbar); const handleLoad = useCallback( () => onLoad?.(pagesIndex, src, isPrimaryPage), diff --git a/src/features/reader/viewer/components/ReaderTransitionPage.tsx b/src/features/reader/viewer/components/ReaderTransitionPage.tsx index c2bc1c4c..1c4ef6cf 100644 --- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx +++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx @@ -29,7 +29,7 @@ import { getValueFromObject, noOp } from '@/lib/HelperFunctions.ts'; import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { ChapterType } from '@/lib/graphql/generated/graphql.ts'; import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; -import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts'; +import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts'; const ChapterInfo = ({ title, @@ -92,10 +92,10 @@ const BaseReaderTransitionPage = ({ handleBack: () => void; }) => { const { t } = useTranslation(); - const manga = useReaderStoreShallow((state) => state.manga); - const scrollbar = useReaderStoreShallow((state) => state.scrollbar); + const manga = useReaderStore((state) => state.manga); + const scrollbar = useReaderStore((state) => state.scrollbar); const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode); - const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStoreShallow((state) => ({ + const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStore((state) => ({ readingMode: state.settings.readingMode.value, backgroundColor: state.settings.backgroundColor, shouldShowTransitionPage: state.settings.shouldShowTransitionPage, @@ -223,7 +223,7 @@ export const ReaderTransitionPage = withPropsFrom( memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage, [ ({ chapterId }: Pick, 'chapterId'>) => { - const chapters = useReaderStoreShallow((state) => state.chapters.chapters); + const chapters = useReaderStore((state) => state.chapters.chapters); const currentChapterIndex = useMemo( () => chapters.findIndex((chapter) => chapter.id === chapterId), @@ -246,7 +246,7 @@ export const ReaderTransitionPage = withPropsFrom( useNavBarContext, ({ chapterId, type }: Pick, 'chapterId' | 'type'>) => { const handleBack = useBackButton(); - const chapters = useReaderStoreShallow((state) => state.chapters.chapters); + const chapters = useReaderStore((state) => state.chapters.chapters); const currentChapterIndex = useMemo( () => chapters.findIndex((chapter) => chapter.id === chapterId),