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

Introduce "awaitable-component"

Browse Source
This commit is contained in:
schroda
2025-11-02 17:18:49 +01:00
parent 7502393f40
commit 02621dec98
19 changed files with 136 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/features/backup/component/BackupFlagInclusionDialog.tsx
View File

@@ -16,8 +16,8 @@ import { useState } from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AwaitableComponentProps } from 'awaitable-component';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { DialogProps } from '@/base/global-dialog/GlobalDialogManager.tsx';
import {
BACKUP_FLAG_GROUP_TO_TRANSLATION,
BACKUP_FLAGS,
@@ -27,10 +27,12 @@ import {
import { BackupFlagGroup, BackupFlagInclusionState } from '@/features/backup/Backup.types.ts';
export const BackupFlagInclusionDialog = ({
onCancel,
onConfirm,
onDismiss,
onSubmit,
isVisible,
onExitComplete,
title,
}: DialogProps<BackupFlagInclusionState> & { title: string }) => {
}: AwaitableComponentProps<BackupFlagInclusionState> & { title: string }) => {
const { t } = useTranslation();
const [includeStateByFlag, setIncludeStateByFlag] = useState(
@@ -38,7 +40,14 @@ export const BackupFlagInclusionDialog = ({
);
return (
<Dialog open onAbort={onCancel} maxWidth="xs" fullWidth onClose={onCancel}>
<Dialog
open={isVisible}
onTransitionExited={onExitComplete}
onAbort={onDismiss}
maxWidth="xs"
fullWidth
onClose={onSubmit}
>
<DialogTitle>{title}</DialogTitle>
<DialogContent>
<FormGroup sx={{ gap: 2 }}>
@@ -63,10 +72,10 @@ export const BackupFlagInclusionDialog = ({
</FormGroup>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={onCancel} color="primary">
<Button autoFocus onClick={onDismiss} color="primary">
{t('global.button.cancel')}
</Button>
<Button onClick={() => onConfirm(includeStateByFlag)} color="primary">
<Button onClick={() => onSubmit(includeStateByFlag)} color="primary">
{t('global.button.ok')}
</Button>
</DialogActions>

20
src/features/backup/component/BackupValidationDialog.tsx
View File

@@ -16,20 +16,22 @@ import Button from '@mui/material/Button';
import ListItem from '@mui/material/ListItem';
import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import { AwaitableComponentProps } from 'awaitable-component';
import { BrowseTab } from '@/features/browse/Browse.types.ts';
import { AppRoutes } from '@/base/AppRoute.constants.ts';
import { DialogProps } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { ValidateBackupResult } from '@/lib/graphql/generated/graphql.ts';
export const BackupValidationDialog = ({
validationResult,
onCancel,
onConfirm,
}: DialogProps & { validationResult: ValidateBackupResult }) => {
onDismiss,
onSubmit,
isVisible,
onExitComplete,
}: AwaitableComponentProps & { validationResult: ValidateBackupResult }) => {
const { t } = useTranslation();
return (
<Dialog open>
<Dialog open={isVisible} onTransitionExited={onExitComplete} onAbort={onDismiss}>
<DialogTitle>{t('settings.backup.action.validate.dialog.title')}</DialogTitle>
<DialogContent dividers>
{!!validationResult?.missingSources.length && (
@@ -67,7 +69,7 @@ export const BackupValidationDialog = ({
>
{!!validationResult?.missingSources.length && (
<Button
onClick={onCancel}
onClick={onDismiss}
component={Link}
to={AppRoutes.browse.path(BrowseTab.EXTENSIONS)}
autoFocus={!!validationResult?.missingSources.length}
@@ -78,7 +80,7 @@ export const BackupValidationDialog = ({
)}
{!!validationResult?.missingTrackers.length && (
<Button
onClick={onCancel}
onClick={onDismiss}
component={Link}
to={AppRoutes.settings.childRoutes.tracking.path}
autoFocus={!!validationResult?.missingTrackers.length}
@@ -88,9 +90,9 @@ export const BackupValidationDialog = ({
</Button>
)}
<Stack direction="row">
<Button onClick={onCancel}>{t('global.button.cancel')}</Button>
<Button onClick={onDismiss}>{t('global.button.cancel')}</Button>
<Button
onClick={onConfirm}
onClick={onSubmit}
autoFocus={
!validationResult?.missingSources.length && !validationResult?.missingTrackers.length
}

16
src/features/backup/screens/Backup.tsx
View File

@@ -16,6 +16,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import ListSubheader from '@mui/material/ListSubheader';
import { t as translate } from 'i18next';
import { useEventListener, useMergedRef, useWindowEvent } from '@mantine/hooks';
import { AwaitableComponent } from 'awaitable-component';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/base/utils/Toast.ts';
import { BackupRestoreState } from '@/lib/graphql/generated/graphql.ts';
@@ -29,7 +30,6 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { ServerSettings } from '@/features/settings/Settings.types.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { BackupFlagInclusionDialog } from '@/features/backup/component/BackupFlagInclusionDialog.tsx';
import { BackupValidationDialog } from '@/features/backup/component/BackupValidationDialog.tsx';
@@ -117,7 +117,7 @@ export function Backup() {
};
const createBackup = async () => {
const flags = await GlobalDialogManager.show(BackupFlagInclusionDialog, {
const flags = await AwaitableComponent.show(BackupFlagInclusionDialog, {
title: t('settings.backup.action.create.label.title'),
});
@@ -155,9 +155,13 @@ export function Backup() {
if (validateBackupData.missingSources.length || validateBackupData.missingTrackers.length) {
try {
await GlobalDialogManager.show(`backup-validate-${file.name}`, BackupValidationDialog, {
validationResult: validateBackupData,
});
await AwaitableComponent.show(
BackupValidationDialog,
{
validationResult: validateBackupData,
},
{ id: `backup-validate-${file.name}` },
);
} catch (_) {
return false;
}
@@ -174,7 +178,7 @@ export function Backup() {
};
const restoreBackup = async (backup: File) => {
const flags = await GlobalDialogManager.show(BackupFlagInclusionDialog, {
const flags = await AwaitableComponent.show(BackupFlagInclusionDialog, {
title: t('settings.backup.action.restore.label.title'),
});

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

@@ -16,6 +16,7 @@ import FormGroup from '@mui/material/FormGroup';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import { AwaitableComponentProps } from 'awaitable-component';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { Mangas } from '@/features/manga/services/Mangas.ts';
import { useSelectableCollection } from '@/base/collection/hooks/useSelectableCollection.ts';
@@ -36,10 +37,7 @@ import { GET_MANGA_CATEGORIES } from '@/lib/graphql/queries/MangaQuery.ts';
import { AppRoutes } from '@/base/AppRoute.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
type BaseProps = {
onCancel: () => void;
onConfirm: (selectedCategories: { addToCategories?: number[]; removeFromCategories?: number[] }) => void;
};
type BaseProps = AwaitableComponentProps<{ addToCategories?: number[]; removeFromCategories?: number[] }>;
type SingleMangaModeProps = {
mangaId: number;
@@ -94,7 +92,15 @@ const getCategoryCheckedState = (
export function CategorySelect(props: CategorySelectProps) {
const { t } = useTranslation();
const { onCancel, onConfirm, mangaId, mangaIds: passedMangaIds, addToLibrary = false } = props;
const {
onDismiss,
onSubmit,
isVisible,
onExitComplete,
mangaId,
mangaIds: passedMangaIds,
addToLibrary = false,
} = props;
const isSingleSelectionMode = mangaId !== undefined;
const mangaIds = passedMangaIds ?? [mangaId];
@@ -137,7 +143,7 @@ export function CategorySelect(props: CategorySelectProps) {
const handleCancel = () => {
setSelectionForKey('categoriesToAdd', mangaCategoryIds);
setSelectionForKey('categoriesToRemove', []);
onCancel();
onDismiss();
};
const handleOk = () => {
@@ -148,7 +154,7 @@ export function CategorySelect(props: CategorySelectProps) {
? mangaCategoryIds.filter((categoryId) => !categoriesToAdd.includes(categoryId))
: categoriesToRemove;
onConfirm({
onSubmit({
addToCategories,
removeFromCategories,
});
@@ -186,7 +192,8 @@ export function CategorySelect(props: CategorySelectProps) {
},
}}
maxWidth="xs"
open
open={isVisible}
onTransitionExited={onExitComplete}
onClose={handleCancel}
>
<DialogTitle>{t('category.title.set_categories')}</DialogTitle>

4
src/features/chapter/services/Chapters.ts
View File

@@ -42,7 +42,7 @@ import {
} from '@/features/chapter/Chapter.types.ts';
import { assertIsDefined } from '@/base/Asserts.ts';
import { DirectionOffset } from '@/base/Base.types.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { Confirmation } from '@/base/AppAwaitableComponent.ts';
export class Chapters {
static getIds(chapters: { id: number }[]): number[] {
@@ -275,7 +275,7 @@ export class Chapters {
assertIsDefined(confirmationMessage);
try {
await GlobalDialogManager.confirm({
await Confirmation.show({
title: translate('global.label.are_you_sure'),
message: translate(confirmationMessage, { count: itemCount }),
actions: {

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

@@ -19,6 +19,7 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
import { Link } from 'react-router-dom';
import SyncIcon from '@mui/icons-material/Sync';
import Dialog from '@mui/material/Dialog';
import { AwaitableComponent } from 'awaitable-component';
import { Mangas } from '@/features/manga/services/Mangas.ts';
import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
import { MenuItem } from '@/base/components/menu/MenuItem.tsx';
@@ -35,7 +36,6 @@ import { MangaChapterStatFieldsFragment, MangaType } from '@/lib/graphql/generat
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';
type BaseProps = { onClose: () => void; setHideMenu: (hide: boolean) => void };
@@ -168,7 +168,7 @@ export const MangaActionMenuItems = ({
)}
<MenuItem
onClick={() => {
GlobalDialogManager.show(CategorySelect, {
AwaitableComponent.show(CategorySelect, {
mangaId: manga?.id,
mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
addToLibrary: false,

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

@@ -20,10 +20,10 @@ import { Link } from 'react-router-dom';
import SyncAltIcon from '@mui/icons-material/SyncAlt';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { AwaitableComponent } from 'awaitable-component';
import { CustomTooltip } from '@/base/components/CustomTooltip.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 {
@@ -45,7 +45,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
};
const openCategorySelection = () => {
GlobalDialogManager.show(CategorySelect, { mangaId: manga.id });
AwaitableComponent.show(CategorySelect, { mangaId: manga.id });
};
return (

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

@@ -10,6 +10,7 @@ import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import gql from 'graphql-tag';
import { AwaitableComponent } from 'awaitable-component';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/base/utils/Toast.ts';
import { getMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
@@ -20,8 +21,8 @@ import { GetCategoriesBaseQuery, GetCategoriesBaseQueryVariables, MangaType } fr
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';
import { Confirmation } from '@/base/AppAwaitableComponent.ts';
export const useManageMangaLibraryState = (
manga: Pick<MangaType, 'id' | 'title'> & Partial<Pick<MangaType, 'inLibrary'>>,
@@ -50,13 +51,16 @@ export const useManageMangaLibraryState = (
const removeFromLibrary = useCallback(async () => {
if (confirmRemoval) {
await GlobalDialogManager.confirm(`manga-library-state-remove-${manga.id}`, {
title: t('global.label.are_you_sure'),
message: t('manga.action.library.remove.dialog.label.message', { title: manga.title }),
actions: {
confirm: { title: t('global.button.remove') },
await Confirmation.show(
{
title: t('global.label.are_you_sure'),
message: t('manga.action.library.remove.dialog.label.message', { title: manga.title }),
actions: {
confirm: { title: t('global.button.remove') },
},
},
});
{ id: `manga-library-state-remove-${manga.id}` },
);
}
await Mangas.removeFromLibrary([manga.id], true);
@@ -103,33 +107,39 @@ export const useManageMangaLibraryState = (
try {
duplicatedLibraryMangas = await Mangas.getDuplicateLibraryMangas(manga.title).response;
} catch (e) {
await GlobalDialogManager.confirm(`manga-library-state-add-${manga.id}`, {
title: t('global.error.label.failed_to_load_data'),
message: t('manga.action.library.add.dialog.duplicate.label.failure', {
error: getErrorMessage(e),
}),
actions: {
extra: { show: true, title: t('global.button.retry'), contain: true },
confirm: { title: t('global.button.add') },
await Confirmation.show(
{
title: t('global.error.label.failed_to_load_data'),
message: t('manga.action.library.add.dialog.duplicate.label.failure', {
error: getErrorMessage(e),
}),
actions: {
extra: { show: true, title: t('global.button.retry'), contain: true },
confirm: { title: t('global.button.add') },
},
onExtra: () =>
update().catch(
defaultPromiseErrorHandler('useManageMangaLibraryState::update: retry duplicate check'),
),
},
onExtra: () =>
update().catch(
defaultPromiseErrorHandler('useManageMangaLibraryState::update: retry duplicate check'),
),
});
{ id: `manga-library-state-add-${manga.id}` },
);
}
const doDuplicatesExist = duplicatedLibraryMangas?.data.mangas.totalCount;
if (doDuplicatesExist) {
await GlobalDialogManager.confirm(`manga-library-state-add-duplicated-${manga.id}`, {
title: t('global.label.are_you_sure'),
message: t('manga.action.library.add.dialog.duplicate.label.info'),
actions: {
extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
confirm: { title: t('global.button.add') },
await Confirmation.show(
{
title: t('global.label.are_you_sure'),
message: t('manga.action.library.add.dialog.duplicate.label.info'),
actions: {
extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
confirm: { title: t('global.button.add') },
},
onExtra: () => navigate(AppRoutes.manga.path(duplicatedLibraryMangas!.data.mangas.nodes[0].id)),
},
onExtra: () => navigate(AppRoutes.manga.path(duplicatedLibraryMangas!.data.mangas.nodes[0].id)),
});
{ id: `manga-library-state-add-duplicated-${manga.id}` },
);
}
const showCategorySelectDialog = showAddToLibraryCategorySelectDialog && !!userCreatedCategories.length;
@@ -138,13 +148,13 @@ export const useManageMangaLibraryState = (
return;
}
const { addToCategories, removeFromCategories } = await GlobalDialogManager.show(
`manga-library-state-add-categories-${manga.id}`,
const { addToCategories, removeFromCategories } = await AwaitableComponent.show(
CategorySelect,
{
mangaId: manga.id,
addToLibrary: true,
},
{ id: `manga-library-state-add-categories-${manga.id}` },
);
addToLibrary(addToCategories, removeFromCategories);

4
src/features/manga/services/Mangas.ts
View File

@@ -50,7 +50,7 @@ import {
} from '@/features/manga/Manga.constants.ts';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { assertIsDefined } from '@/base/Asserts.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { Confirmation } from '@/base/AppAwaitableComponent.ts';
type MangaToMigrate = NonNullable<GetMangaToMigrateQuery['manga']>;
type MangaToMigrateTo = NonNullable<GetMangaToMigrateToFetchMutation['fetchManga']>['manga'];
@@ -553,7 +553,7 @@ export class Mangas {
assertIsDefined(confirmationMessage);
try {
await GlobalDialogManager.confirm({
await Confirmation.show({
title: translate('global.label.are_you_sure'),
message: translate(confirmationMessage, { count: itemCount }),
actions: {

4
src/features/reader/services/ReaderControls.ts
View File

@@ -55,7 +55,7 @@ import {
getReaderSettingsStore,
getReaderTapZoneStore,
} from '@/features/reader/stores/ReaderStore.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { Confirmation } from '@/base/AppAwaitableComponent.ts';
const getScrollDirectionInvert = (
scrollDirection: ScrollDirection,
@@ -305,7 +305,7 @@ export class ReaderControls {
const warningLineBreak = !isSameScanlator && !isContinuousChapter ? '\n\n' : '';
const warning = `${sameScanlator}${warningLineBreak}${continuousChapter}`;
await GlobalDialogManager.confirm({
await Confirmation.show({
title: translate('reader.chapter_transition.warning.title'),
message: warning,
actions: {

4
src/features/source/browse/components/SourceOptions.tsx
View File

@@ -38,7 +38,7 @@ import { SeparatorFilter } from '@/features/source/browse/components/filters/Sep
import { StyledFab } from '@/base/components/buttons/StyledFab.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { ISourceMetadata, SourceFilters } from '@/features/source/Source.types.ts';
import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
import { Confirmation } from '@/base/AppAwaitableComponent.ts';
interface IFilters {
sourceFilter: SourceFilters[];
@@ -256,7 +256,7 @@ export function SourceOptions({
selectSavedSearch(savedSearch);
}}
onDelete={() => {
GlobalDialogManager.confirm({
Confirmation.show({
title: t('global.label.are_you_sure'),
message: t('source.filter.save_search.dialog.label.delete', {
name: savedSearch,