diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 71e70afa..ed4bb403 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -15,6 +15,8 @@ module.exports = { { files: ['*'], rules: { + 'no-param-reassign': ['error', { props: true, ignorePropertyModificationsForRegex: ["^draft"] }], + 'unused-imports/no-unused-imports': 'error', 'import/prefer-default-export': 'off', diff --git a/src/features/manga/components/cards/MangaCard.tsx b/src/features/manga/components/cards/MangaCard.tsx index f3e64387..82cfbb83 100644 --- a/src/features/manga/components/cards/MangaCard.tsx +++ b/src/features/manga/components/cards/MangaCard.tsx @@ -99,6 +99,7 @@ export const MangaCard = memo((props: MangaCardProps) => { const longPressBind = useLongPress( useCallback( (e: any, { context }: any) => { + // eslint-disable-next-line no-param-reassign e.shiftKey = true; handleClick(e, context as () => {}); }, diff --git a/src/features/reader/Reader.types.ts b/src/features/reader/Reader.types.ts index 35d74b3c..4280f4f6 100644 --- a/src/features/reader/Reader.types.ts +++ b/src/features/reader/Reader.types.ts @@ -10,7 +10,6 @@ import { MutableRefObject } from 'react'; import { TapZoneInvertMode, TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts'; import { TChapterReader } from '@/features/chapter/Chapter.types.ts'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; -import { TMangaReader } from '@/features/manga/Manga.types.ts'; import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; import { ScrollOffset } from '@/base/Base.types.ts'; @@ -243,7 +242,7 @@ export interface ReaderStateChapters { interface ReaderSettingsTypeBaseProps { settings: IReaderSettingsWithDefaultFlag; updateSetting: ( - ...args: OmitFirst> + ...args: Parameters ) => ReturnType; } @@ -378,11 +377,6 @@ export type TReaderScrollbarContext = { setScrollbarYSize: (size: number) => void; }; -export type TReaderStateMangaContext = { - manga: TMangaReader | undefined; - setManga: (manga: TMangaReader | undefined) => void; -}; - export type TReaderStateSettingsContext = { settings: IReaderSettingsWithDefaultFlag; setSettings: (settings: IReaderSettingsWithDefaultFlag) => void; diff --git a/src/features/reader/ReaderStore.ts b/src/features/reader/ReaderStore.ts new file mode 100644 index 00000000..8338f1ce --- /dev/null +++ b/src/features/reader/ReaderStore.ts @@ -0,0 +1,35 @@ +/* + * Copyright (C) Contributors to the Suwayomi project + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import { create } from 'zustand'; +import { immer } from 'zustand/middleware/immer'; +import { TMangaReader } from '@/features/manga/Manga.types.ts'; + +interface ReaderStore { + reset: () => void; + manga: TMangaReader | undefined; + setManga: (manga: TMangaReader | undefined) => void; +} + +const DEFAULT_STATE = { + manga: undefined, +} satisfies Pick; + +export const useReaderStore = create()( + immer((set) => ({ + ...DEFAULT_STATE, + reset: () => + set((draft) => { + draft.manga = DEFAULT_STATE.manga; + }), + setManga: (manga) => + set((draft) => { + draft.manga = manga; + }), + })), +); diff --git a/src/features/reader/contexts/state/ReaderStateContextProvider.tsx b/src/features/reader/contexts/state/ReaderStateContextProvider.tsx index 766a9692..7c1b3c5f 100644 --- a/src/features/reader/contexts/state/ReaderStateContextProvider.tsx +++ b/src/features/reader/contexts/state/ReaderStateContextProvider.tsx @@ -8,16 +8,13 @@ import { ReactNode } from 'react'; import { ReaderStateChaptersContextProvider } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx'; -import { ReaderStateMangaContextProvider } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx'; import { ReaderStatePagesContextProvider } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx'; import { ReaderStateSettingsContextProvider } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx'; export const ReaderStateContextProvider = ({ children }: { children: ReactNode }) => ( - - - - {children} - - - + + + {children} + + ); diff --git a/src/features/reader/contexts/state/ReaderStateMangaContext.tsx b/src/features/reader/contexts/state/ReaderStateMangaContext.tsx deleted file mode 100644 index 33c70211..00000000 --- a/src/features/reader/contexts/state/ReaderStateMangaContext.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Copyright (C) Contributors to the Suwayomi project - * - * This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at https://mozilla.org/MPL/2.0/. - */ - -import { createContext, ReactNode, useContext, useMemo, useState } from 'react'; -import { TReaderStateMangaContext } from '@/features/reader/Reader.types.ts'; - -export const ReaderStateMangaContext = createContext({ - manga: undefined, - setManga: () => undefined, -}); - -export const useReaderStateMangaContext = () => useContext(ReaderStateMangaContext); - -export const ReaderStateMangaContextProvider = ({ children }: { children: ReactNode }) => { - const [manga, setManga] = useState(); - - const value = useMemo(() => ({ manga, setManga }), [manga]); - - return {children}; -}; diff --git a/src/features/reader/hooks/useReaderResetStates.ts b/src/features/reader/hooks/useReaderResetStates.ts index e7ba5481..7c296e0e 100644 --- a/src/features/reader/hooks/useReaderResetStates.ts +++ b/src/features/reader/hooks/useReaderResetStates.ts @@ -13,15 +13,14 @@ import { ReaderStatePages, ReaderTransitionPageMode, TReaderAutoScrollContext, - TReaderStateMangaContext, TReaderStateSettingsContext, } from '@/features/reader/Reader.types.ts'; import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts'; import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { READER_STATE_CHAPTERS_DEFAULTS } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx'; +import { getReaderStore } from '@/features/reader/ReaderStore.ts'; export const useReaderResetStates = ( - setManga: TReaderStateMangaContext['setManga'], setReaderStateChapters: ReaderStateChapters['setReaderStateChapters'], setCurrentPageIndex: ReaderStatePages['setCurrentPageIndex'], setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'], @@ -36,7 +35,7 @@ export const useReaderResetStates = ( ) => { useEffect( () => () => { - setManga(undefined); + getReaderStore().reset(); setReaderStateChapters(READER_STATE_CHAPTERS_DEFAULTS); setCurrentPageIndex(0); diff --git a/src/features/reader/hotkeys/ReaderHotkeys.tsx b/src/features/reader/hotkeys/ReaderHotkeys.tsx index 74a8bcf5..e00702cf 100644 --- a/src/features/reader/hotkeys/ReaderHotkeys.tsx +++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx @@ -21,12 +21,10 @@ import { READING_DIRECTION_VALUES, READING_MODE_VALUES, } from '@/features/reader/settings/ReaderSettings.constants.tsx'; -import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx'; 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 { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx'; import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx'; @@ -36,8 +34,6 @@ const useHotkeys = (...args: Parameters): ReturnType( - updateSetting: ReturnType, - deleteSetting: ReturnType, setting: Setting, value: IReaderSettings[Setting], values: IReaderSettings[Setting][], @@ -45,7 +41,7 @@ const updateSettingCycleThrough = ( isDefaultable: boolean, ) => { if (isDefault) { - updateSetting(setting, values[0]); + ReaderService.updateSetting(setting, values[0]); return; } @@ -53,11 +49,11 @@ const updateSettingCycleThrough = ( const isDefaultNextValue = nextValue === undefined; if (isDefaultNextValue) { - deleteSetting(setting); + ReaderService.deleteSetting(setting); return; } - updateSetting(setting, nextValue); + ReaderService.updateSetting(setting, nextValue); }; export const ReaderHotkeys = ({ @@ -68,7 +64,6 @@ export const ReaderHotkeys = ({ const { direction: themeDirection } = useTheme(); const readerThemeDirection = ReaderService.useGetThemeDirection(); const { enableScope, disableScope } = useHotkeysContext(); - const { manga } = useReaderStateMangaContext(); const { isVisible, setIsVisible: setIsOverlayVisible } = useReaderOverlayContext(); const { hotkeys, @@ -87,9 +82,6 @@ export const ReaderHotkeys = ({ const openChapter = ReaderControls.useOpenChapter(); const openPage = ReaderControls.useOpenPage(); - const updateSetting = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA); - const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA); - useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_PAGE], () => openPage('previous'), [openPage]); useHotkeys(hotkeys[ReaderHotkey.NEXT_PAGE], () => openPage('next'), [openPage]); useHotkeys( @@ -177,8 +169,6 @@ export const ReaderHotkeys = ({ hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE], () => { updateSettingCycleThrough( - updateSetting, - deleteSetting, 'pageScaleMode', pageScaleMode.value, READER_PAGE_SCALE_MODE_VALUES, @@ -186,24 +176,22 @@ export const ReaderHotkeys = ({ true, ); }, - [updateSetting, deleteSetting, pageScaleMode.value, pageScaleMode.isDefault], + [pageScaleMode.value, pageScaleMode.isDefault], ); useHotkeys( hotkeys[ReaderHotkey.STRETCH_IMAGE], - () => updateSetting('shouldStretchPage', !shouldStretchPage.value), - [updateSetting, shouldStretchPage.value], + () => ReaderService.updateSetting('shouldStretchPage', !shouldStretchPage.value), + [shouldStretchPage.value], ); useHotkeys( hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], - () => updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value), - [updateSetting, shouldOffsetDoubleSpreads.value], + () => ReaderService.updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value), + [shouldOffsetDoubleSpreads.value], ); useHotkeys( hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => { updateSettingCycleThrough( - updateSetting, - deleteSetting, 'readingMode', readingMode.value, READING_MODE_VALUES, @@ -211,14 +199,12 @@ export const ReaderHotkeys = ({ true, ); }, - [updateSetting, deleteSetting, readingMode.value, readingMode.isDefault], + [readingMode.value, readingMode.isDefault], ); useHotkeys( hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], () => { updateSettingCycleThrough( - updateSetting, - deleteSetting, 'readingDirection', readingDirection.value, READING_DIRECTION_VALUES, @@ -226,7 +212,7 @@ export const ReaderHotkeys = ({ true, ); }, - [updateSetting, deleteSetting, readingDirection.value, readingDirection.isDefault], + [readingDirection.value, readingDirection.isDefault], ); useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], automaticScrolling.toggleActive, { preventDefault: true }, [ automaticScrolling.toggleActive, @@ -234,20 +220,20 @@ export const ReaderHotkeys = ({ useHotkeys( hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], () => - updateSetting('autoScroll', { + ReaderService.updateSetting('autoScroll', { ...autoScroll, value: Math.min(AUTO_SCROLL_SPEED.max, autoScroll.value + AUTO_SCROLL_SPEED.step), }), - [updateSetting, autoScroll.value], + [autoScroll.value], ); useHotkeys( hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], () => - updateSetting('autoScroll', { + ReaderService.updateSetting('autoScroll', { ...autoScroll, value: Math.max(AUTO_SCROLL_SPEED.min, autoScroll.value - AUTO_SCROLL_SPEED.step), }), - [updateSetting, autoScroll.value], + [autoScroll.value], ); useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]); diff --git a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx index a6f1d250..e56b1da6 100644 --- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx +++ b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx @@ -24,13 +24,8 @@ import { makeToast } from '@/base/utils/Toast.ts'; import { MobileHeaderProps } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx'; import { AppRoutes } from '@/base/AppRoute.constants.ts'; -import { - ReaderStateChapters, - TReaderScrollbarContext, - TReaderStateMangaContext, -} from '@/features/reader/Reader.types.ts'; +import { ReaderStateChapters, TReaderScrollbarContext } from '@/features/reader/Reader.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx'; import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx'; import { ReaderLibraryButton } from '@/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx'; @@ -39,19 +34,19 @@ 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/ReaderStore.ts'; const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' }; const BaseReaderOverlayHeaderMobile = forwardRef< HTMLDivElement, - MobileHeaderProps & - Pick & - Pick & - Pick ->(({ isVisible, manga, currentChapter, scrollbarYSize }, ref) => { + MobileHeaderProps & Pick & Pick +>(({ isVisible, currentChapter, scrollbarYSize }, ref) => { const { t } = useTranslation(); const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' }); + const manga = useReaderStoreShallow((state) => state.manga); + const { id: mangaId, title } = manga ?? DEFAULT_MANGA; const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER; @@ -136,6 +131,6 @@ const BaseReaderOverlayHeaderMobile = forwardRef< export const ReaderOverlayHeaderMobile = withPropsFrom( memo(BaseReaderOverlayHeaderMobile), - [useReaderStateMangaContext, useReaderStateChaptersContext, useReaderScrollbarContext], - ['manga', 'currentChapter', 'scrollbarYSize'], + [useReaderStateChaptersContext, useReaderScrollbarContext], + ['currentChapter', 'scrollbarYSize'], ); diff --git a/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx b/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx index efbb3871..968cb072 100644 --- a/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx +++ b/src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx @@ -14,9 +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 { TReaderStateMangaContext } from '@/features/reader/Reader.types.ts'; -import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const ACTION_FALLBACK_MANGA = { ...FALLBACK_MANGA, @@ -24,7 +22,9 @@ const ACTION_FALLBACK_MANGA = { inLibrary: false, }; -const BaseReaderLibraryButton = ({ manga }: Pick) => { +export const ReaderLibraryButton = memo(() => { + const manga = useReaderStoreShallow((state) => state.manga); + const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA; const { t } = useTranslation(); @@ -46,10 +46,4 @@ const BaseReaderLibraryButton = ({ manga }: Pick ); -}; - -export const ReaderLibraryButton = withPropsFrom( - memo(BaseReaderLibraryButton), - [useReaderStateMangaContext], - ['manga'], -); +}); diff --git a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx index 96079f85..544d364f 100644 --- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx +++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx @@ -24,16 +24,15 @@ import { ReaderNavBarDesktopQuickSettings } from '@/features/reader/overlay/navi import { ReaderNavBarDesktopActions } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx'; import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx'; import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx'; -import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx'; import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx'; import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx'; import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts'; -import { IReaderSettings, ReaderStateChapters, TReaderStateMangaContext } from '@/features/reader/Reader.types.ts'; +import { IReaderSettings, ReaderStateChapters } from '@/features/reader/Reader.types.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx'; +import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts'; const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => { const wasNavBarStaticRef = useRef(isStaticNav); @@ -57,7 +56,6 @@ const BaseReaderNavBarDesktop = ({ isVisible, openSettings, setReaderNavBarWidth, - manga, chapters, currentChapter, previousChapter, @@ -65,12 +63,10 @@ const BaseReaderNavBarDesktop = ({ isStaticNav, }: ReaderNavBarDesktopProps & Pick & - Pick & Pick & Pick) => { const { t } = useTranslation(); - - const updateReaderSettings = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA); + const manga = useReaderStoreShallow((state) => state.manga); const [navBarElement, setNavBarElement] = useState(); useResizeObserver( @@ -109,7 +105,7 @@ const BaseReaderNavBarDesktop = ({ { setReaderNavBarWidth(0); - updateReaderSettings('isStaticNav', !isStaticNav); + ReaderService.updateSetting('isStaticNav', !isStaticNav); }} color={isStaticNav ? 'primary' : 'inherit'} > @@ -153,10 +149,9 @@ export const ReaderNavBarDesktop = withPropsFrom( memo(BaseReaderNavBarDesktop), [ useNavBarContext, - useReaderStateMangaContext, useReaderStateChaptersContext, userReaderStatePagesContext, ReaderService.useSettingsWithoutDefaultFlag, ], - ['setReaderNavBarWidth', 'manga', 'chapters', 'currentChapter', 'previousChapter', 'nextChapter', 'isStaticNav'], + ['setReaderNavBarWidth', 'chapters', 'currentChapter', 'previousChapter', 'nextChapter', 'isStaticNav'], ); 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 c20b0183..046e0519 100644 --- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx +++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx @@ -14,16 +14,13 @@ import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigati import { ReaderNavBarDesktopReadingMode } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx'; import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx'; import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx'; -import { IReaderSettingsWithDefaultFlag, TReaderStateMangaContext } from '@/features/reader/Reader.types.ts'; +import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts'; import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts'; import { ReaderService } from '@/features/reader/services/ReaderService.ts'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; -import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx'; -import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts'; import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx'; const BaseReaderNavBarDesktopQuickSettings = ({ - manga, readingMode, shouldOffsetDoubleSpreads, pageScaleMode, @@ -31,8 +28,7 @@ const BaseReaderNavBarDesktopQuickSettings = ({ readingDirection, autoScroll, openSettings, -}: Pick & - Pick & +}: Pick & Pick< IReaderSettingsWithDefaultFlag, | 'readingMode' @@ -44,38 +40,37 @@ const BaseReaderNavBarDesktopQuickSettings = ({ >) => { const { t } = useTranslation(); - const updateSetting = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA); - const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA); - return ( updateSetting('readingMode', value)} + setReadingMode={(value) => ReaderService.updateSetting('readingMode', value)} isDefaultable - onDefault={() => deleteSetting('readingMode')} + onDefault={() => ReaderService.deleteSetting('readingMode')} /> updateSetting('shouldOffsetDoubleSpreads', value)} + setShouldOffsetDoubleSpreads={(value) => + ReaderService.updateSetting('shouldOffsetDoubleSpreads', value) + } /> deleteSetting('pageScaleMode')} + onDefault={() => ReaderService.deleteSetting('pageScaleMode')} /> updateSetting('readingDirection', value)} + setReadingDirection={(value) => ReaderService.updateSetting('readingDirection', value)} isDefaultable - onDefault={() => deleteSetting('readingDirection')} + onDefault={() => ReaderService.deleteSetting('readingDirection')} /> updateSetting('autoScroll', ...args)} + setAutoScroll={(...args) => ReaderService.updateSetting('autoScroll', ...args)} />