Extract context types

src/modules/library/Library.types.ts

@@ -60,3 +60,8 @@ export type LibraryDuplicatesDescriptionWorkerInput<Manga extends TMangaDuplicat
     mangasToCheck: Manga[];
     mangas: Manga[];
 };
+
+export type LibraryOptionsContextType = {
+    options: LibraryOptions;
+    setOptions: React.Dispatch<React.SetStateAction<LibraryOptions>>;
+};

src/modules/library/contexts/LibraryOptionsContext.tsx

@@ -8,12 +8,7 @@
 
 import React, { useContext } from 'react';
 import { DEFAULT_CATEGORY_METADATA } from '@/modules/category/services/CategoryMetadata.ts';
-import { LibraryOptions } from '@/modules/library/Library.types.ts';
+import { LibraryOptionsContextType } from '@/modules/library/Library.types.ts';
-
-type LibraryOptionsContextType = {
-    options: LibraryOptions;
-    setOptions: React.Dispatch<React.SetStateAction<LibraryOptions>>;
-};
 
 export const LibraryOptionsContext = React.createContext<LibraryOptionsContextType>({
     options: DEFAULT_CATEGORY_METADATA,

src/modules/navigation-bar/NavigationBar.types.ts

@@ -22,3 +22,35 @@ export interface NavbarItem {
     IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
     show: 'mobile' | 'desktop' | 'both';
 }
+
+export type NavbarContextType = {
+    history: string[];
+
+    // AppBar title
+    title: string | React.ReactNode;
+    setTitle: (title: NavbarContextType['title'], browserTitle?: string) => void;
+
+    appBarHeight: number;
+    setAppBarHeight: React.Dispatch<React.SetStateAction<number>>;
+
+    // AppBar action buttons
+    action: any;
+    setAction: React.Dispatch<React.SetStateAction<any>>;
+
+    // Allow default navbar to be overrided
+    override: INavbarOverride;
+    setOverride: React.Dispatch<React.SetStateAction<INavbarOverride>>;
+
+    // NavBar
+    isCollapsed: boolean;
+    setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+
+    navBarWidth: number;
+    setNavBarWidth: React.Dispatch<React.SetStateAction<number>>;
+
+    readerNavBarWidth: number;
+    setReaderNavBarWidth: React.Dispatch<React.SetStateAction<number>>;
+
+    bottomBarHeight: number;
+    setBottomBarHeight: React.Dispatch<React.SetStateAction<number>>;
+};

src/modules/navigation-bar/contexts/NavbarContext.tsx

@@ -8,39 +8,7 @@
 
 import React, { useContext } from 'react';
 
-import { INavbarOverride } from '@/modules/navigation-bar/NavigationBar.types.ts';
+import { NavbarContextType } from '@/modules/navigation-bar/NavigationBar.types.ts';
-
-type NavbarContextType = {
-    history: string[];
-
-    // AppBar title
-    title: string | React.ReactNode;
-    setTitle: (title: NavbarContextType['title'], browserTitle?: string) => void;
-
-    appBarHeight: number;
-    setAppBarHeight: React.Dispatch<React.SetStateAction<number>>;
-
-    // AppBar action buttons
-    action: any;
-    setAction: React.Dispatch<React.SetStateAction<any>>;
-
-    // Allow default navbar to be overrided
-    override: INavbarOverride;
-    setOverride: React.Dispatch<React.SetStateAction<INavbarOverride>>;
-
-    // NavBar
-    isCollapsed: boolean;
-    setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-
-    navBarWidth: number;
-    setNavBarWidth: React.Dispatch<React.SetStateAction<number>>;
-
-    readerNavBarWidth: number;
-    setReaderNavBarWidth: React.Dispatch<React.SetStateAction<number>>;
-
-    bottomBarHeight: number;
-    setBottomBarHeight: React.Dispatch<React.SetStateAction<number>>;
-};
 
 export const NavBarContext = React.createContext<NavbarContextType>({
     history: [],

src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx

@@ -10,29 +10,26 @@ import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
-import { ContextType, useLayoutEffect } from 'react';
+import { useLayoutEffect } from 'react';
 import Popover from '@mui/material/Popover';
 import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { Link } from 'react-router-dom';
 import { Select } from '@/modules/core/components/inputs/Select.tsx';
-import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
 import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
+import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 
 export const ReaderNavBarDesktopChapterNavigation = ({
     currentChapter,
     previousChapter,
     nextChapter,
     chapters = [],
-}: Pick<
+}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'>) => {
-    ContextType<typeof ReaderStateChaptersContext>,
-    'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'
->) => {
     const { t } = useTranslation();
     const readerThemeDirection = ReaderService.useGetThemeDirection();
     const openChapter = ReaderControls.useOpenChapter();

src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx

@@ -7,11 +7,9 @@
  */
 
 import Stack from '@mui/material/Stack';
-import { ContextType } from 'react';
 import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
 import { ReaderSettingReadingDirection } from '@/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx';
 import { ReaderSettingTapZoneLayout } from '@/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx';
-import { ReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx';
 import { ReaderSettingTapZoneInvertMode } from '@/modules/reader/components/settings/layout/ReaderSettingTapZoneInvertMode.tsx';
 import { ReaderSettingPageScaleMode } from '@/modules/reader/components/settings/layout/ReaderSettingPageScaleMode.tsx';
 import { ReaderSettingStretchPage } from '@/modules/reader/components/settings/layout/ReaderSettingStretchPage.tsx';
@@ -19,6 +17,7 @@ import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts'
 import { ReaderSettingPageGap } from '@/modules/reader/components/settings/layout/ReaderSettingPageGap.tsx';
 import { ReaderSettingWidth } from '@/modules/reader/components/settings/layout/ReaderSettingWidth.tsx';
 import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
+import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
 
 export const ReaderLayoutSettings = ({
     setShowPreview,
@@ -27,7 +26,7 @@ export const ReaderLayoutSettings = ({
     isDefaultable,
     onDefault,
 }: ReaderSettingsTypeProps & {
-    setShowPreview: ContextType<typeof ReaderTapZoneContext>['setShowPreview'];
+    setShowPreview: TReaderTapZoneContext['setShowPreview'];
 }) => (
     <Stack sx={{ gap: 2 }}>
         <DefaultSettingFootnote />

src/modules/reader/contexts/ReaderOverlayContext.tsx

@@ -6,12 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { createContext, useContext } from 'react';
+import { createContext, useContext } from 'react';
-
+import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
-type TReaderOverlayContext = {
-    isVisible: boolean;
-    setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
-};
 
 export const ReaderOverlayContext = createContext<TReaderOverlayContext>({
     isVisible: false,

src/modules/reader/contexts/ReaderProgressBarContext.tsx

@@ -7,13 +7,7 @@
  */
 
 import { createContext, useContext } from 'react';
-
+import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
-type TReaderProgressBarContext = {
-    isMaximized: boolean;
-    setIsMaximized: (visible: boolean) => void;
-    isDragging: boolean;
-    setIsDragging: (isDragging: boolean) => void;
-};
 
 export const ReaderProgressBarContext = createContext<TReaderProgressBarContext>({
     isMaximized: false,

src/modules/reader/contexts/ReaderScrollbarContext.tsx

@@ -7,13 +7,7 @@
  */
 
 import { createContext, useContext } from 'react';
-
+import { TReaderScrollbarContext } from '@/modules/reader/types/Reader.types.ts';
-type TReaderScrollbarContext = {
-    scrollbarXSize: number;
-    setScrollbarXSize: (size: number) => void;
-    scrollbarYSize: number;
-    setScrollbarYSize: (size: number) => void;
-};
 
 export const ReaderScrollbarContext = createContext<TReaderScrollbarContext>({
     scrollbarXSize: 0,

src/modules/reader/contexts/ReaderTapZoneContext.tsx

@@ -7,11 +7,7 @@
  */
 
 import { createContext, useContext } from 'react';
-
+import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
-type TReaderTapZoneContext = {
-    showPreview: boolean;
-    setShowPreview: (showPreview: boolean) => void;
-};
 
 export const ReaderTapZoneContext = createContext<TReaderTapZoneContext>({
     showPreview: false,

src/modules/reader/contexts/state/ReaderStateChaptersContextProvider.tsx

@@ -6,13 +6,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ContextType, ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
-
+import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
-type TContext = ContextType<typeof ReaderStateChaptersContext>;
 
 export const ReaderStateChaptersContextProvider = ({ children }: { children: ReactNode }) => {
-    const [state, setState] = useState<Omit<TContext, 'setReaderStateChapters'>>({ mangaChapters: [], chapters: [] });
+    const [state, setState] = useState<Omit<ReaderStateChapters, 'setReaderStateChapters'>>({
+        mangaChapters: [],
+        chapters: [],
+    });
 
     const value = useMemo(
         () => ({

src/modules/reader/contexts/state/ReaderStateMangaContext.tsx

@@ -7,12 +7,7 @@
  */
 
 import { createContext, useContext } from 'react';
-import { TMangaReader } from '@/modules/manga/Manga.types.ts';
+import { TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
-
-type TReaderStateMangaContext = {
-    manga: TMangaReader | undefined;
-    setManga: (manga: TMangaReader | undefined) => void;
-};
 
 export const ReaderStateMangaContext = createContext<TReaderStateMangaContext>({
     manga: undefined,

src/modules/reader/contexts/state/ReaderStateMangaContextProvider.tsx

@@ -6,11 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ContextType, ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import { ReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
 
 export const ReaderStateMangaContextProvider = ({ children }: { children: ReactNode }) => {
-    const [manga, setManga] = useState<ContextType<typeof ReaderStateMangaContext>['manga']>();
+    const [manga, setManga] = useState<TReaderStateMangaContext['manga']>();
 
     const value = useMemo(() => ({ manga, setManga }), [manga]);
 

src/modules/reader/contexts/state/ReaderStatePagesContextProvider.tsx

@@ -6,25 +6,24 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ContextType, ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import { ReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { createPageData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
 import { ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
-
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
-type TContext = ContextType<typeof ReaderStatePagesContext>;
 
 export const ReaderStatePagesContextProvider = ({ children }: { children: ReactNode }) => {
-    const [totalPages, setTotalPages] = useState<TContext['totalPages']>(0);
+    const [totalPages, setTotalPages] = useState<ReaderStatePages['totalPages']>(0);
-    const [currentPageIndex, setCurrentPageIndex] = useState<TContext['currentPageIndex']>(0);
+    const [currentPageIndex, setCurrentPageIndex] = useState<ReaderStatePages['currentPageIndex']>(0);
-    const [pageToScrollToIndex, setPageToScrollToIndex] = useState<TContext['pageToScrollToIndex']>(0);
+    const [pageToScrollToIndex, setPageToScrollToIndex] = useState<ReaderStatePages['pageToScrollToIndex']>(0);
-    const [pageUrls, setPageUrls] = useState<TContext['pageUrls']>([]);
+    const [pageUrls, setPageUrls] = useState<ReaderStatePages['pageUrls']>([]);
-    const [pageLoadStates, setPageLoadStates] = useState<TContext['pageLoadStates']>([{ loaded: false }]);
+    const [pageLoadStates, setPageLoadStates] = useState<ReaderStatePages['pageLoadStates']>([{ loaded: false }]);
-    const [pages, setPages] = useState<TContext['pages']>([createPageData('', 0)]);
+    const [pages, setPages] = useState<ReaderStatePages['pages']>([createPageData('', 0)]);
-    const [transitionPageMode, setTransitionPageMode] = useState<TContext['transitionPageMode']>(
+    const [transitionPageMode, setTransitionPageMode] = useState<ReaderStatePages['transitionPageMode']>(
         ReaderTransitionPageMode.NONE,
     );
     const [retryFailedPagesKeyPrefix, setRetryFailedPagesKeyPrefix] =
-        useState<TContext['retryFailedPagesKeyPrefix']>('');
+        useState<ReaderStatePages['retryFailedPagesKeyPrefix']>('');
 
     const value = useMemo(
         () => ({

src/modules/reader/contexts/state/ReaderStateSettingsContext.tsx

@@ -7,14 +7,9 @@
  */
 
 import { createContext, useContext } from 'react';
-import { IReaderSettingsWithDefaultFlag } from '@/modules/reader/types/Reader.types.ts';
+import { TReaderStateSettingsContext } from '@/modules/reader/types/Reader.types.ts';
 import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
 
-type TReaderStateSettingsContext = {
-    settings: IReaderSettingsWithDefaultFlag;
-    setSettings: (settings: IReaderSettingsWithDefaultFlag) => void;
-};
-
 export const ReaderStateSettingsContext = createContext<TReaderStateSettingsContext>({
     settings: DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
     setSettings: () => undefined,

src/modules/reader/contexts/state/ReaderStateSettingsContextProvider.tsx

@@ -6,12 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ContextType, ReactNode, useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 import { ReaderStateSettingsContext } from '@/modules/reader/contexts/state/ReaderStateSettingsContext.tsx';
 import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
+import { TReaderStateSettingsContext } from '@/modules/reader/types/Reader.types.ts';
 
 export const ReaderStateSettingsContextProvider = ({ children }: { children: ReactNode }) => {
-    const [settings, setSettings] = useState<ContextType<typeof ReaderStateSettingsContext>['settings']>(
+    const [settings, setSettings] = useState<TReaderStateSettingsContext['settings']>(
         DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
     );
 

src/modules/reader/services/ReaderControls.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ContextType, MutableRefObject, useCallback, useMemo } from 'react';
+import { MutableRefObject, useCallback, useMemo } from 'react';
 import { Direction, useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
@@ -28,7 +28,7 @@ import {
     READING_DIRECTION_TO_THEME_DIRECTION,
 } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { isEndOfPageInViewport, isPageInViewport } from '@/modules/reader/utils/ReaderPager.utils.tsx';
-import { ReaderOverlayContext, useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
+import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlayContext.tsx';
 import { useReaderTapZoneContext } from '@/modules/reader/contexts/ReaderTapZoneContext.tsx';
 import { TapZoneRegionType } from '@/modules/reader/types/TapZoneLayout.types.ts';
 import { ReaderTapZoneService } from '@/modules/reader/services/ReaderTapZoneService.ts';
@@ -40,6 +40,7 @@ import { useMetadataServerSettings } from '@/modules/settings/services/ServerSet
 import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
 import { awaitConfirmation } from '@/modules/core/utils/AwaitableDialog.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
 
 const getScrollDirectionInvert = (
     scrollDirection: ScrollDirection,
@@ -83,7 +84,7 @@ export class ReaderControls {
         themeDirection: Direction,
         element: HTMLElement,
         openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>,
-        setIsOverlayVisible: ContextType<typeof ReaderOverlayContext>['setIsVisible'],
+        setIsOverlayVisible: TReaderOverlayContext['setIsVisible'],
         scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
     ): void {
         if (!element) {

src/modules/reader/types/Reader.types.ts

@@ -11,6 +11,7 @@ import { TapZoneInvertMode, TapZoneLayouts } from '@/modules/reader/types/TapZon
 import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { TMangaReader } from '@/modules/manga/Manga.types.ts';
 
 export enum ProgressBarType {
     HIDDEN,
@@ -240,3 +241,20 @@ export enum ReaderResumeMode {
     END,
     LAST_READ,
 }
+
+export type TReaderScrollbarContext = {
+    scrollbarXSize: number;
+    setScrollbarXSize: (size: number) => void;
+    scrollbarYSize: number;
+    setScrollbarYSize: (size: number) => void;
+};
+
+export type TReaderStateMangaContext = {
+    manga: TMangaReader | undefined;
+    setManga: (manga: TMangaReader | undefined) => void;
+};
+
+export type TReaderStateSettingsContext = {
+    settings: IReaderSettingsWithDefaultFlag;
+    setSettings: (settings: IReaderSettingsWithDefaultFlag) => void;
+};

src/modules/reader/types/ReaderOverlay.types.ts

@@ -19,3 +19,8 @@ interface ReaderNavBarBaseProps extends BaseReaderOverlayProps {
 export interface ReaderBottomBarMobileProps extends ReaderNavBarBaseProps {}
 
 export interface ReaderNavBarDesktopProps extends ReaderNavBarBaseProps {}
+
+export type TReaderOverlayContext = {
+    isVisible: boolean;
+    setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+};

src/modules/reader/types/ReaderProgressBar.types.ts

@@ -65,3 +65,10 @@ export interface CurrentPageSlotProps extends Pick<IReaderSettings, 'progressBar
     setIsDragging: (isDragging: boolean) => void;
     boxProps?: BoxProps;
 }
+
+export type TReaderProgressBarContext = {
+    isMaximized: boolean;
+    setIsMaximized: (visible: boolean) => void;
+    isDragging: boolean;
+    setIsDragging: (isDragging: boolean) => void;
+};

src/modules/reader/types/TapZoneLayout.types.ts

@@ -34,3 +34,8 @@ export interface TapZoneInvertMode {
     vertical: boolean;
     horizontal: boolean;
 }
+
+export type TReaderTapZoneContext = {
+    showPreview: boolean;
+    setShowPreview: (showPreview: boolean) => void;
+};