Move migration files into new folder

src/modules/manga/components/cards/MangaCard.tsx

@@ -12,7 +12,7 @@ import { useLongPress } from 'use-long-press';
 import { GridLayout, useLibraryOptionsContext } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
 import { MangaActionMenuItems, SingleModeProps } from '@/modules/manga/components/MangaActionMenuItems.tsx';
 import { Menu } from '@/modules/core/components/menu/Menu.tsx';
-import { MigrateDialog } from '@/components/MigrateDialog.tsx';
+import { MigrateDialog } from '@/modules/migration/components/MigrateDialog.tsx';
 import { useManageMangaLibraryState } from '@/modules/manga/hooks/useManageMangaLibraryState.tsx';
 import { MangaGridCard } from '@/modules/manga/components/cards/MangaGridCard.tsx';
 import { MangaListCard } from '@/modules/manga/components/cards/MangaListCard.tsx';

src/modules/manga/services/Mangas.ts

@@ -8,7 +8,6 @@
 
 import { t as translate } from 'i18next';
 import { DocumentNode } from '@apollo/client/core';
-import { MetadataMigrationSettings } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
 import {
     ChapterConditionInput,
@@ -30,6 +29,7 @@ import { getMetadataServerSettings } from '@/lib/metadata/metadataServerSettings
 import { GET_MANGAS_BASE } from '@/lib/graphql/queries/MangaQuery.ts';
 import { MANGA_BASE_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
 import { TranslationKey } from '@/Base.types.ts';
+import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';
 
 export type MangaAction =
     | 'download'

src/modules/migration/Migration.constants.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { SortBy, SortOrder } from '@/modules/migration/Migration.types.ts';
+
+import { TranslationKey } from '@/Base.types.ts';
+
+export const sortByToTranslationKey: Record<SortBy, TranslationKey> = {
+    [SortBy.SOURCE_NAME]: 'migrate.sort.by_source_name',
+    [SortBy.MANGA_COUNT]: 'migrate.sort.by_manga_count',
+};
+
+export const sortOrderToTranslationKey: Record<SortBy, TranslationKey> = {
+    [SortOrder.ASC]: 'global.sort.label.asc',
+    [SortOrder.DESC]: 'global.sort.label.desc',
+};
+
+export const DEFAULT_SORT_SETTINGS = {
+    sortBy: SortBy.SOURCE_NAME,
+    sortOrder: SortOrder.ASC,
+};

src/modules/migration/Migration.types.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
+
+export enum SortBy {
+    SOURCE_NAME,
+    MANGA_COUNT,
+}
+
+export enum SortOrder {
+    ASC,
+    DESC,
+}
+
+export interface SortSettings {
+    sortBy: SortBy;
+    sortOrder: SortOrder;
+}
+
+export type TMigratableSourcesResult = GetMigratableSourcesQuery['mangas']['nodes'];
+
+export type MetadataMigrationSettings = {
+    migrateChapters: boolean;
+    migrateCategories: boolean;
+    migrateTracking: boolean;
+    deleteChapters: boolean;
+    migrateSortSettings: SortSettings;
+};

src/modules/migration/components/MigrateDialog.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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 Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import Stack from '@mui/material/Stack';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useState } from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
+import { Mangas, MigrateMode } from '@/modules/manga/services/Mangas.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/lib/metadata/metadataServerSettings.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';
+
+export const MigrateDialog = ({ mangaIdToMigrateTo, onClose }: { mangaIdToMigrateTo: number; onClose: () => void }) => {
+    const { t } = useTranslation();
+
+    const navigate = useNavigate();
+
+    const { mangaId: mangaIdAsString } = useParams<{ mangaId: string }>();
+    const mangaId = Number(mangaIdAsString);
+
+    const {
+        settings: { migrateChapters, migrateCategories, migrateTracking, deleteChapters },
+    } = useMetadataServerSettings();
+
+    const [isMigrationInProcess, setIsMigrationInProcess] = useState(false);
+
+    const setMigrationFlag = createUpdateMetadataServerSettings<keyof MetadataMigrationSettings>(
+        defaultPromiseErrorHandler('MigrateDialog::updateSetting'),
+    );
+
+    const migrate = async (mode: MigrateMode) => {
+        if (mangaId == null) {
+            throw new Error(`MigrateDialog::migrate: unexpected mangaId "${mangaId}"`);
+        }
+
+        makeToast(t('migrate.label.info'), 'info');
+
+        setIsMigrationInProcess(true);
+
+        try {
+            await Mangas.migrate(mangaId, mangaIdToMigrateTo, {
+                mode,
+                migrateChapters,
+                migrateCategories,
+                migrateTracking,
+                deleteChapters,
+            });
+
+            navigate(`/manga/${mangaIdToMigrateTo}`, { replace: true });
+        } catch (e) {
+            setIsMigrationInProcess(false);
+        }
+    };
+
+    return (
+        <Dialog open fullWidth onClose={onClose}>
+            <DialogTitle>{t('migrate.dialog.title')}</DialogTitle>
+            <DialogContent dividers>
+                <FormGroup>
+                    <CheckboxInput
+                        disabled={isMigrationInProcess}
+                        label={t('chapter.title_one')}
+                        checked={migrateChapters}
+                        onChange={(_, checked) => setMigrationFlag('migrateChapters', checked)}
+                    />
+                    <CheckboxInput
+                        disabled={isMigrationInProcess}
+                        label={t('category.title.category_one')}
+                        checked={migrateCategories}
+                        onChange={(_, checked) => setMigrationFlag('migrateCategories', checked)}
+                    />
+                    <CheckboxInput
+                        disabled={isMigrationInProcess}
+                        label={t('tracking.title')}
+                        checked={migrateTracking}
+                        onChange={(_, checked) => setMigrationFlag('migrateTracking', checked)}
+                    />
+                    <CheckboxInput
+                        disabled={isMigrationInProcess}
+                        label={t('migrate.dialog.label.delete_downloaded')}
+                        checked={deleteChapters}
+                        onChange={(_, checked) => setMigrationFlag('deleteChapters', checked)}
+                    />
+                </FormGroup>
+            </DialogContent>
+            <DialogActions>
+                <Stack
+                    direction="row"
+                    sx={{
+                        justifyContent: 'space-between',
+                        width: '100%',
+                    }}
+                >
+                    <Button disabled={isMigrationInProcess} component={Link} to={`/manga/${mangaIdToMigrateTo}`}>
+                        {t('migrate.dialog.action.button.show_entry')}
+                    </Button>
+                    <Stack direction="row">
+                        <Button disabled={isMigrationInProcess} onClick={onClose}>
+                            {t('global.button.cancel')}
+                        </Button>
+                        <Button disabled={isMigrationInProcess} onClick={() => migrate('copy')}>
+                            {t('global.button.copy')}
+                        </Button>
+                        <Button disabled={isMigrationInProcess} onClick={() => migrate('migrate')}>
+                            {t('global.button.migrate')}
+                        </Button>
+                    </Stack>
+                </Stack>
+            </DialogActions>
+        </Dialog>
+    );
+};

src/modules/migration/components/MigrationCard.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Box from '@mui/material/Box';
+import CardActionArea from '@mui/material/CardActionArea';
+import Chip from '@mui/material/Chip';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
+import { translateExtensionLanguage } from '@/modules/extension/services/Extensions.ts';
+import { SpinnerImage } from '@/modules/core/components/SpinnerImage.tsx';
+
+export type TMigratableSource = NonNullable<GetMigratableSourcesQuery['mangas']['nodes'][number]['source']> & {
+    mangaCount: number;
+};
+
+// TODO - cleanup source/extension components
+export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratableSource) => {
+    const { t } = useTranslation();
+
+    const isLocalSource = Number(id) === 0;
+    const sourceName = isLocalSource ? t('source.local_source.title') : name;
+
+    return (
+        <Card>
+            <CardActionArea component={Link} to={`/migrate/source/${id}/`}>
+                <CardContent
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        p: 1.5,
+                    }}
+                >
+                    <Box sx={{ display: 'flex' }}>
+                        <Avatar
+                            variant="rounded"
+                            sx={{
+                                width: 56,
+                                height: 56,
+                                flex: '0 0 auto',
+                                mr: 1,
+                                background: 'transparent',
+                            }}
+                        >
+                            <SpinnerImage
+                                spinnerStyle={{ small: true }}
+                                imgStyle={{ objectFit: 'cover', width: '100%', height: '100%' }}
+                                alt={sourceName}
+                                src={requestManager.getValidImgUrlFor(iconUrl)}
+                            />
+                        </Avatar>
+                        <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                            <Typography variant="h6" component="h3">
+                                {sourceName}
+                            </Typography>
+                            <Typography
+                                variant="caption"
+                                sx={{
+                                    display: 'block',
+                                }}
+                            >
+                                {translateExtensionLanguage(lang)}
+                            </Typography>
+                        </Box>
+                    </Box>
+                    <Chip sx={{ borderRadius: 1 }} size="small" label={mangaCount} />
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    );
+};

src/modules/migration/screens/Migrate.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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 { useContext, useEffect, useLayoutEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { TMigratableSource } from '@/modules/migration/components/MigrationCard.tsx';
+import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
+import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
+import { GridLayouts } from '@/modules/core/components/GridLayouts.tsx';
+import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { GridLayout } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { GetSourceMigratableQuery, GetSourceMigratableQueryVariables } from '@/lib/graphql/generated/graphql.ts';
+import { GET_SOURCE_MIGRATABLE } from '@/lib/graphql/queries/SourceQuery.ts';
+import { SOURCE_BASE_FIELDS } from '@/lib/graphql/fragments/SourceFragments.ts';
+import { BaseMangaGrid } from '@/modules/manga/components/BaseMangaGrid.tsx';
+
+export const Migrate = () => {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useContext(NavBarContext);
+
+    const { sourceId: paramSourceId } = useParams<{ sourceId: string }>();
+
+    const [gridLayout, setGridLayout] = useLocalStorage('migrateGridLayout', GridLayout.List);
+
+    const fragmentSource = requestManager.graphQLClient.client.cache.readFragment<
+        Pick<TMigratableSource, 'id' | 'name'>
+    >({
+        id: requestManager.graphQLClient.client.cache.identify({ __typename: 'SourceType', id: paramSourceId }),
+        fragment: SOURCE_BASE_FIELDS,
+    });
+
+    const [isKnownSource, setIsKnownSource] = useState(fragmentSource !== null ? true : undefined);
+    const {
+        data: migratableSourceData,
+        loading: isSourceLoading,
+        error: sourceError,
+        refetch: refetchSource,
+    } = requestManager.useGetSource<GetSourceMigratableQuery, GetSourceMigratableQueryVariables>(
+        GET_SOURCE_MIGRATABLE,
+        paramSourceId,
+        { skip: !!isKnownSource, notifyOnNetworkStatusChange: true },
+    );
+
+    const { sourceId, name } = {
+        sourceId: paramSourceId,
+        name: paramSourceId,
+        ...fragmentSource,
+        ...migratableSourceData?.source,
+    };
+
+    const {
+        data: migratableSourceMangasData,
+        loading: areMangasLoading,
+        error: mangasError,
+        refetch: refetchMangas,
+    } = requestManager.useGetMigratableSourceMangas(sourceId, {
+        skip: !isKnownSource,
+        notifyOnNetworkStatusChange: true,
+    });
+
+    useLayoutEffect(() => {
+        setTitle(name ?? sourceId ?? t('migrate.title'));
+        setAction(<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t, name, sourceId, gridLayout]);
+
+    useEffect(() => {
+        if (isSourceLoading || isKnownSource) {
+            return;
+        }
+
+        setIsKnownSource(
+            !!migratableSourceData ||
+                !!sourceError?.message.includes("The field at path '/source' was declared as a non null type"),
+        );
+    }, [isSourceLoading, sourceError]);
+
+    const isLoadingSource = isSourceLoading || (!sourceError && !isKnownSource);
+    const isLoading = isLoadingSource || areMangasLoading;
+    if (isLoading) {
+        return <LoadingPlaceholder />;
+    }
+
+    const hasErrorSource = sourceError && isKnownSource === false;
+    const hasError = hasErrorSource || mangasError;
+    if (hasError) {
+        const error = (hasErrorSource ? sourceError : mangasError)!;
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => {
+                    if (hasErrorSource) {
+                        refetchSource().catch(defaultPromiseErrorHandler('Migrate::refetchSource'));
+                    }
+
+                    if (mangasError) {
+                        refetchMangas().catch(defaultPromiseErrorHandler('Migrate::refetchMangas'));
+                    }
+                }}
+            />
+        );
+    }
+
+    return (
+        <BaseMangaGrid
+            hasNextPage={false}
+            loadMore={() => {}}
+            isLoading={areMangasLoading}
+            mangas={migratableSourceMangasData?.mangas.nodes ?? []}
+            gridLayout={gridLayout}
+            mode="migrate.search"
+        />
+    );
+};

src/modules/migration/screens/Migration.tsx

@@ -0,0 +1,160 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+import List from '@mui/material/List';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import SortByAlphaIcon from '@mui/icons-material/SortByAlpha';
+import TagIcon from '@mui/icons-material/Tag';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import Tooltip from '@mui/material/Tooltip';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
+import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
+import { MigrationCard, TMigratableSource } from '@/modules/migration/components/MigrationCard.tsx';
+import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { SortBy, SortOrder, SortSettings, TMigratableSourcesResult } from '@/modules/migration/Migration.types.ts';
+import { sortByToTranslationKey, sortOrderToTranslationKey } from '@/modules/migration/Migration.constants.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/lib/metadata/metadataServerSettings.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
+
+const getMigratableSources = (
+    mangas: TMigratableSourcesResult | undefined,
+    { sortBy, sortOrder }: SortSettings,
+): TMigratableSource[] => {
+    if (!mangas) {
+        return [];
+    }
+
+    const sourceBySourceId: Record<string, TMigratableSource> = {};
+
+    mangas.forEach(({ sourceId, source }) => {
+        const uniqueSource = sourceBySourceId[sourceId] ?? {
+            ...{ id: sourceId, name: sourceId, lang: 'unknown', iconUrl: null, mangaCount: 0, ...source },
+        };
+
+        sourceBySourceId[sourceId] = {
+            ...uniqueSource,
+            mangaCount: uniqueSource.mangaCount + 1,
+        };
+    });
+
+    const sourcesSortedBy = Object.values(sourceBySourceId).toSorted((a, b) => {
+        switch (sortBy) {
+            case SortBy.SOURCE_NAME:
+                return a.name.localeCompare(b.name);
+            case SortBy.MANGA_COUNT:
+                return a.mangaCount - b.mangaCount;
+            default:
+                throw new Error(`Unexpected "sortBy" "${sortBy}"`);
+        }
+    });
+
+    switch (sortOrder) {
+        case SortOrder.ASC:
+            return sourcesSortedBy;
+        case SortOrder.DESC:
+            return sourcesSortedBy.toReversed();
+        default:
+            throw new Error(`Unexpected "sortOrder" "${sortOrder}"`);
+    }
+};
+
+export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
+    const { t } = useTranslation();
+    const { appBarHeight } = useNavBarContext();
+
+    const {
+        settings: { migrateSortSettings },
+    } = useMetadataServerSettings();
+    const updateMetadataServerSettings = createUpdateMetadataServerSettings<'migrateSortSettings'>(() =>
+        makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
+    );
+    const { sortBy, sortOrder } = migrateSortSettings;
+
+    const { data, loading, error, refetch } = requestManager.useGetMigratableSources({
+        notifyOnNetworkStatusChange: true,
+    });
+    const migratableSources = useMemo(
+        () => getMigratableSources(data?.mangas.nodes, migrateSortSettings),
+        [data?.mangas.nodes, migrateSortSettings],
+    );
+
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('Migration::refetch'))}
+            />
+        );
+    }
+
+    return (
+        <>
+            <Stack
+                sx={{
+                    position: 'sticky',
+                    top: `${appBarHeight + tabsMenuHeight}px`,
+                    flexDirection: 'row',
+                    justifyContent: 'end',
+                    alignItems: 'center',
+                    gap: 1,
+                    p: 1,
+                    backgroundColor: 'background.default',
+                    zIndex: 1,
+                }}
+            >
+                <Tooltip title={t(sortByToTranslationKey[sortBy])}>
+                    <IconButton
+                        size="large"
+                        color="inherit"
+                        onClick={() =>
+                            updateMetadataServerSettings('migrateSortSettings', { sortBy: (sortBy + 1) % 2, sortOrder })
+                        }
+                    >
+                        {sortBy ? <TagIcon /> : <SortByAlphaIcon />}
+                    </IconButton>
+                </Tooltip>
+                <Tooltip title={t(sortOrderToTranslationKey[sortOrder])}>
+                    <IconButton
+                        size="large"
+                        color="inherit"
+                        onClick={() =>
+                            updateMetadataServerSettings('migrateSortSettings', {
+                                sortBy,
+                                sortOrder: (sortOrder + 1) % 2,
+                            })
+                        }
+                    >
+                        {sortOrder ? <ArrowDownwardIcon /> : <ArrowUpwardIcon />}
+                    </IconButton>
+                </Tooltip>
+            </Stack>
+            <List sx={{ p: 0 }}>
+                {migratableSources.map((migratableSource) => (
+                    <StyledGroupItemWrapper key={migratableSource.id}>
+                        <MigrationCard {...migratableSource} />
+                    </StyledGroupItemWrapper>
+                ))}
+            </List>
+        </>
+    );
+};