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

Replace "useCategorySelect" with "GlobalDialogManager"

Browse Source
This commit is contained in:
schroda
2025-10-04 14:47:38 +02:00
parent d33f708104
commit b795f98766
8 changed files with 101 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/features/category/components/CategorySelect.tsx
View File

@@ -37,8 +37,8 @@ import { AppRoutes } from '@/base/AppRoute.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
type BaseProps = {
open: boolean;
onClose: (didUpdateCategories: boolean, addToCategories?: number[], removeFromCategories?: number[]) => void;
onCancel: () => void;
onConfirm: (selectedCategories: { addToCategories?: number[]; removeFromCategories?: number[] }) => void;
};
type SingleMangaModeProps = {
@@ -94,7 +94,7 @@ const getCategoryCheckedState = (
export function CategorySelect(props: CategorySelectProps) {
const { t } = useTranslation();
const { open, onClose, mangaId, mangaIds: passedMangaIds, addToLibrary = false } = props;
const { onCancel, onConfirm, mangaId, mangaIds: passedMangaIds, addToLibrary = false } = props;
const isSingleSelectionMode = mangaId !== undefined;
const mangaIds = passedMangaIds ?? [mangaId];
@@ -137,7 +137,7 @@ export function CategorySelect(props: CategorySelectProps) {
const handleCancel = () => {
setSelectionForKey('categoriesToAdd', mangaCategoryIds);
setSelectionForKey('categoriesToRemove', []);
onClose(false);
onCancel();
};
const handleOk = () => {
@@ -148,7 +148,10 @@ export function CategorySelect(props: CategorySelectProps) {
? mangaCategoryIds.filter((categoryId) => !categoriesToAdd.includes(categoryId))
: categoriesToRemove;
onClose(true, addToCategories, removeFromCategories);
onConfirm({
addToCategories,
removeFromCategories,
});
if (doNotShowAddToLibraryDialogAgain) {
updateMetadataServerSettings('showAddToLibraryCategorySelectDialog', false).catch((e) =>
@@ -183,7 +186,7 @@ export function CategorySelect(props: CategorySelectProps) {
},
}}
maxWidth="xs"
open={open}
open
onClose={handleCancel}
>
<DialogTitle>{t('category.title.set_categories')}</DialogTitle>

43
src/features/category/hooks/useCategorySelect.tsx
View File

@@ -1,43 +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 { useMemo, useState } from 'react';
import { CategorySelect, CategorySelectProps } from '@/features/category/components/CategorySelect.tsx';
export const useCategorySelect = ({
mangaId,
mangaIds,
onClose,
addToLibrary,
}: Omit<CategorySelectProps, 'open' | 'onClose'> & Pick<Partial<CategorySelectProps>, 'onClose'>) => {
const [isCategorySelectOpen, setIsCategorySelectOpen] = useState(false);
const CategorySelectComponent = useMemo(() => {
if (!isCategorySelectOpen) {
return null;
}
return (
<CategorySelect
open={isCategorySelectOpen}
onClose={(...args) => {
setIsCategorySelectOpen(false);
onClose?.(...args);
}}
mangaId={mangaId!} // either mangaId or mangaIds is undefined, however, ts is not able to infer it correctly and raises an error
mangaIds={mangaIds as undefined}
addToLibrary={addToLibrary}
/>
);
}, [mangaId, mangaIds, addToLibrary, onClose, isCategorySelectOpen]);
return {
openCategorySelect: setIsCategorySelectOpen,
CategorySelectComponent,
};
};

30
src/features/manga/components/MangaActionMenuItems.tsx
View File

@@ -29,17 +29,16 @@ import {
} from '@/base/components/menu/Menu.utils.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { TrackManga } from '@/features/tracker/components/TrackManga.tsx';
import { useCategorySelect } from '@/features/category/hooks/useCategorySelect.tsx';
import { ChaptersDownloadActionMenuItems } from '@/features/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx';
import { NestedMenuItem } from '@/base/components/menu/NestedMenuItem.tsx';
import { MangaChapterStatFieldsFragment, MangaType } from '@/lib/graphql/generated/graphql.ts';
import { MangaAction, MangaDownloadInfo, MangaIdInfo, MangaUnreadInfo } from '@/features/manga/Manga.types.ts';
import { MANGA_ACTION_TO_TRANSLATION } from '@/features/manga/Manga.constants.ts';
import { AppRoutes } from '@/base/AppRoute.constants.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { CategorySelect } from '@/features/category/components/CategorySelect.tsx';
const ACTION_DISABLES_SELECTION_MODE: MangaAction[] = ['remove_from_library'] as const;
type BaseProps = { onClose: (selectionModeState: boolean) => void; setHideMenu: (hide: boolean) => void };
type BaseProps = { onClose: () => void; setHideMenu: (hide: boolean) => void };
export type SingleModeProps = {
manga: Pick<MangaType, 'id' | 'title' | 'sourceId'> & MangaDownloadInfo & MangaUnreadInfo;
@@ -77,16 +76,9 @@ export const MangaActionMenuItems = ({
const hasUnreadChapters = !!manga?.unreadCount;
const hasReadChapters = !!manga && manga.unreadCount !== manga.chapters.totalCount;
const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
mangaId: manga?.id,
mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
onClose: () => onClose(true),
addToLibrary: false,
});
const handleSelect = () => {
handleSelection?.(manga.id, true);
onClose(true);
onClose();
};
const performAction = (action: MangaAction, mangas: MangaIdInfo[]) => {
@@ -94,7 +86,7 @@ export const MangaActionMenuItems = ({
wasManuallyMarkedAsRead: true,
}).catch(defaultPromiseErrorHandler(`MangaActionMenuItems:performAction(${action})`));
onClose(!ACTION_DISABLES_SELECTION_MODE.includes(action));
onClose();
};
const { downloadableMangas, downloadedMangas, unreadMangas, readMangas } = useMemo(
@@ -127,7 +119,7 @@ export const MangaActionMenuItems = ({
>
<ChaptersDownloadActionMenuItems
mangaIds={isSingleMode ? [manga.id] : Mangas.getIds(selectedMangas)}
closeMenu={() => onClose(true)}
closeMenu={onClose}
/>
</NestedMenuItem>
)}
@@ -176,8 +168,13 @@ export const MangaActionMenuItems = ({
)}
<MenuItem
onClick={() => {
openCategorySelect(true);
GlobalDialogManager.show(CategorySelect, {
mangaId: manga?.id,
mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
addToLibrary: false,
});
setHideMenu(true);
onClose();
}}
Icon={Label}
title={getMenuItemTitle('change_categories', selectedMangas.length)}
@@ -187,7 +184,6 @@ export const MangaActionMenuItems = ({
Icon={FavoriteBorderIcon}
title={getMenuItemTitle('remove_from_library', selectedMangas.length)}
/>
{CategorySelectComponent}
{isTrackDialogOpen && (
<Dialog
open
@@ -196,7 +192,7 @@ export const MangaActionMenuItems = ({
scroll="paper"
onClose={() => {
setIsTrackDialogOpen(false);
onClose(true);
onClose();
}}
>
<TrackManga manga={manga!} />

15
src/features/manga/components/MangaToolbarMenu.tsx
View File

@@ -21,9 +21,10 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { useCategorySelect } from '@/features/category/hooks/useCategorySelect.tsx';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { AppRoutes } from '@/base/AppRoute.constants.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { CategorySelect } from '@/features/category/components/CategorySelect.tsx';
interface IProps {
manga: Pick<MangaType, 'id' | 'inLibrary' | 'sourceId' | 'title'>;
@@ -43,9 +44,9 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
setAnchorEl(null);
};
const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
mangaId: manga.id,
});
const openCategorySelection = () => {
GlobalDialogManager.show(CategorySelect, { mangaId: manga.id });
};
return (
<>
@@ -82,7 +83,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
<CustomTooltip title={t('manga.label.edit_categories')}>
<IconButton
onClick={() => {
openCategorySelect(true);
openCategorySelection();
}}
color="inherit"
>
@@ -142,7 +143,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
<MenuItem
key="categories"
onClick={() => {
openCategorySelect(true);
openCategorySelection();
handleClose();
}}
>
@@ -155,8 +156,6 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
</Menu>
</>
)}
{CategorySelectComponent}
</>
);
};

6
src/features/manga/components/cards/MangaCard.tsx
View File

@@ -49,10 +49,7 @@ export const MangaCard = memo((props: MangaCardProps) => {
settings: { showContinueReadingButton },
} = useMetadataServerSettings();
const { CategorySelectComponent, updateLibraryState, isInLibrary } = useManageMangaLibraryState(
manga,
mode === 'source',
);
const { updateLibraryState, isInLibrary } = useManageMangaLibraryState(manga, mode === 'source');
const mangaLinkTo = getMangaLinkTo(mode, manga.id, manga.sourceId, manga.title);
@@ -158,7 +155,6 @@ export const MangaCard = memo((props: MangaCardProps) => {
)}
</Menu>
)}
{CategorySelectComponent}
</>
)}
</PopupState>

103
src/features/manga/components/details/MangaDetails.tsx
View File

@@ -227,7 +227,7 @@ export const MangaDetails = ({
}
}, [manga.source]);
const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(manga);
const { updateLibraryState } = useManageMangaLibraryState(manga);
const copyTitle = async () => {
try {
@@ -239,59 +239,56 @@ export const MangaDetails = ({
};
return (
<>
<DetailsWrapper>
<TopContentWrapper url={Mangas.getThumbnailUrl(manga)} mangaThumbnailBackdrop={mangaThumbnailBackdrop}>
<ThumbnailMetadataWrapper>
<Thumbnail manga={manga} mangaDynamicColorSchemes={mangaDynamicColorSchemes} />
<MetadataContainer>
<Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'flex-start', mb: 1 }}>
<SearchLink query={manga.title} sourceId={manga.sourceId} mode="source.global-search">
<Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
{manga.title}
</Typography>
</SearchLink>
<CustomTooltip title={t('global.button.copy')}>
<IconButton onClick={copyTitle} color="inherit">
<ContentCopyIcon fontSize="small" />
</IconButton>
</CustomTooltip>
</Stack>
{manga.author && (
<Metadata
title={t('manga.label.author')}
value={valuesToJoinedSearchLinks(Mangas.getAuthors(manga), manga.source?.id, mode)}
/>
)}
{manga.artist && (
<Metadata
title={t('manga.label.artist')}
value={valuesToJoinedSearchLinks(Mangas.getArtists(manga), manga.source?.id, mode)}
/>
)}
<DetailsWrapper>
<TopContentWrapper url={Mangas.getThumbnailUrl(manga)} mangaThumbnailBackdrop={mangaThumbnailBackdrop}>
<ThumbnailMetadataWrapper>
<Thumbnail manga={manga} mangaDynamicColorSchemes={mangaDynamicColorSchemes} />
<MetadataContainer>
<Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'flex-start', mb: 1 }}>
<SearchLink query={manga.title} sourceId={manga.sourceId} mode="source.global-search">
<Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
{manga.title}
</Typography>
</SearchLink>
<CustomTooltip title={t('global.button.copy')}>
<IconButton onClick={copyTitle} color="inherit">
<ContentCopyIcon fontSize="small" />
</IconButton>
</CustomTooltip>
</Stack>
{manga.author && (
<Metadata
title={t('manga.label.status')}
value={t(MANGA_STATUS_TO_TRANSLATION[manga.status])}
title={t('manga.label.author')}
value={valuesToJoinedSearchLinks(Mangas.getAuthors(manga), manga.source?.id, mode)}
/>
<Metadata title={t('source.title_one')} value={getSourceName(manga.source)} />
</MetadataContainer>
</ThumbnailMetadataWrapper>
<MangaButtonsContainer>
<CustomButton
size="medium"
onClick={updateLibraryState}
variant={manga.inLibrary ? 'contained' : 'outlined'}
>
{manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
{manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
</CustomButton>
<TrackMangaButton manga={manga} />
<OpenSourceButton url={manga.realUrl} />
</MangaButtonsContainer>
</TopContentWrapper>
<DescriptionGenre manga={manga} mode={mode} />
</DetailsWrapper>
{CategorySelectComponent}
</>
)}
{manga.artist && (
<Metadata
title={t('manga.label.artist')}
value={valuesToJoinedSearchLinks(Mangas.getArtists(manga), manga.source?.id, mode)}
/>
)}
<Metadata
title={t('manga.label.status')}
value={t(MANGA_STATUS_TO_TRANSLATION[manga.status])}
/>
<Metadata title={t('source.title_one')} value={getSourceName(manga.source)} />
</MetadataContainer>
</ThumbnailMetadataWrapper>
<MangaButtonsContainer>
<CustomButton
size="medium"
onClick={updateLibraryState}
variant={manga.inLibrary ? 'contained' : 'outlined'}
>
{manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
{manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
</CustomButton>
<TrackMangaButton manga={manga} />
<OpenSourceButton url={manga.realUrl} />
</MangaButtonsContainer>
</TopContentWrapper>
<DescriptionGenre manga={manga} mode={mode} />
</DetailsWrapper>
);
};

28
src/features/manga/hooks/useManageMangaLibraryState.tsx
View File

@@ -10,7 +10,6 @@ import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import gql from 'graphql-tag';
import { useCategorySelect } from '@/features/category/hooks/useCategorySelect.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/base/utils/Toast.ts';
import { getMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
@@ -22,6 +21,7 @@ import { GET_CATEGORIES_BASE } from '@/lib/graphql/queries/CategoryQuery.ts';
import { AppRoutes } from '@/base/AppRoute.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { CategorySelect } from '@/features/category/components/CategorySelect';
export const useManageMangaLibraryState = (
manga: Pick<MangaType, 'id' | 'title'> & Partial<Pick<MangaType, 'inLibrary'>>,
@@ -33,11 +33,7 @@ export const useManageMangaLibraryState = (
const [isInLibrary, setIsInLibrary] = useState(!!manga.inLibrary);
const addToLibrary = useCallback(
(didSubmit: boolean, addToCategories: number[] = [], removeFromCategories: number[] = []) => {
if (!didSubmit) {
return;
}
(addToCategories: number[] = [], removeFromCategories: number[] = []) => {
requestManager
.updateManga(manga.id, {
updateManga: { inLibrary: true },
@@ -67,12 +63,6 @@ export const useManageMangaLibraryState = (
setIsInLibrary(false);
}, [manga.id, confirmRemoval]);
const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
mangaId: manga.id,
addToLibrary: true,
onClose: addToLibrary,
});
const updateLibraryState = useCallback(() => {
const update = async () => {
if (isInLibrary) {
@@ -144,18 +134,26 @@ export const useManageMangaLibraryState = (
const showCategorySelectDialog = showAddToLibraryCategorySelectDialog && !!userCreatedCategories.length;
if (!showCategorySelectDialog) {
addToLibrary(true, Categories.getIds(Categories.getDefaults(userCreatedCategories!)));
addToLibrary(Categories.getIds(Categories.getDefaults(userCreatedCategories!)));
return;
}
openCategorySelect(true);
const { addToCategories, removeFromCategories } = await GlobalDialogManager.show(
`manga-library-state-add-categories-${manga.id}`,
CategorySelect,
{
mangaId: manga.id,
addToLibrary: true,
},
);
addToLibrary(addToCategories, removeFromCategories);
};
update().catch(defaultPromiseErrorHandler('useManageMangaLibraryState::updateLibraryState'));
}, [isInLibrary, removeFromLibrary, addToLibrary]);
return {
CategorySelectComponent,
updateLibraryState,
/**
* In case of browsing the source, the data has to be fetched via a mutation.

23
src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx
View File

@@ -28,22 +28,15 @@ export const ReaderLibraryButton = memo(() => {
const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA;
const { t } = useTranslation();
const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(
manga ?? ACTION_FALLBACK_MANGA,
true,
);
const { updateLibraryState } = useManageMangaLibraryState(manga ?? ACTION_FALLBACK_MANGA, true);
return (
<>
<CustomTooltip
title={inLibrary ? t('manga.action.library.remove.label.action') : t('manga.button.add_to_library')}
>
<IconButton onClick={updateLibraryState} color="inherit">
{inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
</IconButton>
</CustomTooltip>
{CategorySelectComponent}
</>
<CustomTooltip
title={inLibrary ? t('manga.action.library.remove.label.action') : t('manga.button.add_to_library')}
>
<IconButton onClick={updateLibraryState} color="inherit">
{inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
</IconButton>
</CustomTooltip>
);
});