Rename folder "modules" to "features"
This commit is contained in:
schroda
124
src/features/migration/screens/Migrate.tsx
Normal file
124
src/features/migration/screens/Migrate.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
/*
|
||||
* 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 { useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { TMigratableSource } from '@/features/migration/components/MigrationCard.tsx';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { GridLayouts } from '@/features/core/components/GridLayouts.tsx';
|
||||
import { useLocalStorage } from '@/features/core/hooks/useStorage.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 '@/features/manga/components/BaseMangaGrid.tsx';
|
||||
import { GridLayout } from '@/features/core/Core.types.ts';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
import { useAppTitleAndAction } from '@/features/navigation-bar/hooks/useAppTitleAndAction.ts';
|
||||
|
||||
export const Migrate = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
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,
|
||||
});
|
||||
|
||||
useAppTitleAndAction(
|
||||
name ?? sourceId ?? t('migrate.title'),
|
||||
<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />,
|
||||
[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={getErrorMessage(error)}
|
||||
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"
|
||||
/>
|
||||
);
|
||||
};
|
||||
159
src/features/migration/screens/Migration.tsx
Normal file
159
src/features/migration/screens/Migration.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
/*
|
||||
* 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 { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { MigrationCard, TMigratableSource } from '@/features/migration/components/MigrationCard.tsx';
|
||||
import { StyledGroupItemWrapper } from '@/features/core/components/virtuoso/StyledGroupItemWrapper.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { SortBy, SortOrder, SortSettings, TMigratableSourcesResult } from '@/features/migration/Migration.types.ts';
|
||||
import { sortByToTranslationKey, sortOrderToTranslationKey } from '@/features/migration/Migration.constants.ts';
|
||||
import {
|
||||
createUpdateMetadataServerSettings,
|
||||
useMetadataServerSettings,
|
||||
} from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { makeToast } from '@/features/core/utils/Toast.ts';
|
||||
import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
|
||||
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'>((e) =>
|
||||
makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
|
||||
);
|
||||
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={getErrorMessage(error)}
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<CustomTooltip title={t(sortByToTranslationKey[sortBy])}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={() =>
|
||||
updateMetadataServerSettings('migrateSortSettings', { sortBy: (sortBy + 1) % 2, sortOrder })
|
||||
}
|
||||
>
|
||||
{sortBy ? <TagIcon /> : <SortByAlphaIcon />}
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
<CustomTooltip title={t(sortOrderToTranslationKey[sortOrder])}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={() =>
|
||||
updateMetadataServerSettings('migrateSortSettings', {
|
||||
sortBy,
|
||||
sortOrder: (sortOrder + 1) % 2,
|
||||
})
|
||||
}
|
||||
>
|
||||
{sortOrder ? <ArrowDownwardIcon /> : <ArrowUpwardIcon />}
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
<List sx={{ p: 0 }}>
|
||||
{migratableSources.map((migratableSource) => (
|
||||
<StyledGroupItemWrapper key={migratableSource.id}>
|
||||
<MigrationCard {...migratableSource} />
|
||||
</StyledGroupItemWrapper>
|
||||
))}
|
||||
</List>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user