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

Feature/manga migration (#536)

Browse Source 
* Add "migration" tab to "Browse" screen

* Add missing useEffect cleanup for navbar title and actions

* Make "SourceGridLayout" reusable

* Add migration tab to "Browse"

* Add migration logic
This commit is contained in:
schroda
2024-01-26 20:50:51 +01:00
committed by GitHub
parent 5224ad1391
commit e0c5e0521d
39 changed files with 1329 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/screens/Browse.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import Tab from '@mui/material/Tab';
import { useTranslation } from 'react-i18next';
import { Sources } from '@/screens/Sources';
@@ -14,17 +14,25 @@ import { Extensions } from '@/screens/Extensions';
import { TabPanel } from '@/components/tabs/TabPanel.tsx';
import { TabsWrapper } from '@/components/tabs/TabsWrapper.tsx';
import { TabsMenu } from '@/components/tabs/TabsMenu.tsx';
import { Migration } from '@/screens/Migration.tsx';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
export function Browse() {
const { t } = useTranslation();
const { setTitle } = useContext(NavBarContext);
const [tabNum, setTabNum] = useState<number>(0);
useEffect(() => {
setTitle(t('global.label.browse'));
}, [t]);
return (
<TabsWrapper>
<TabsMenu value={tabNum} tabsCount={2} onChange={(e, newTab) => setTabNum(newTab)}>
<Tab sx={{ textTransform: 'none' }} label={t('source.title')} />
<Tab sx={{ textTransform: 'none' }} label={t('extension.title')} />
<Tab sx={{ textTransform: 'none' }} label={t('migrate.title')} />
</TabsMenu>
<TabPanel index={0} currentIndex={tabNum}>
<Sources />
@@ -32,6 +40,9 @@ export function Browse() {
<TabPanel index={1} currentIndex={tabNum}>
<Extensions />
</TabPanel>
<TabPanel index={2} currentIndex={tabNum}>
<Migration />
</TabPanel>
</TabsWrapper>
);
}

5
src/screens/DownloadQueue.tsx
View File

@@ -142,6 +142,11 @@ export const DownloadQueue: React.FC = () => {
</Tooltip>
</>,
);
return () => {
setTitle('');
setAction(null);
};
}, [t, status, isQueueEmpty]);
useEffect(() => {

7
src/screens/Extensions.tsx
View File

@@ -95,6 +95,7 @@ function getExtensionsInfo(extensions: PartialExtension[]): {
export function Extensions() {
const { t } = useTranslation();
const { setAction } = useContext(NavBarContext);
const theme = useTheme();
const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
@@ -104,7 +105,6 @@ export function Extensions() {
const areMultipleReposInUse = (serverSettingsData?.settings.extensionRepos.length ?? 0) > 1;
const inputRef = useRef<HTMLInputElement>(null);
const { setTitle, setAction } = useContext(NavBarContext);
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', extensionDefaultLangs());
const [showNsfw] = useLocalStorage<boolean>('showNsfw', true);
const [query] = useQueryParam('query', StringParam);
@@ -169,7 +169,6 @@ export function Extensions() {
};
useEffect(() => {
setTitle(t('extension.title'));
setAction(
<>
<AppbarSearch />
@@ -182,6 +181,10 @@ export function Extensions() {
<LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} />
</>,
);
return () => {
setAction(null);
};
}, [t, shownLangs, allLangs]);
useEffect(() => {

9
src/screens/Manga.tsx
View File

@@ -58,6 +58,11 @@ export const Manga: React.FC = () => {
useEffect(() => {
setTitle(manga?.title ?? t('manga.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t, manga?.title]);
useEffect(() => {
@@ -86,6 +91,10 @@ export const Manga: React.FC = () => {
{manga && <MangaToolbarMenu manga={manga} onRefresh={refresh} refreshing={refreshing} />}
</Stack>,
);
return () => {
setAction(null);
};
}, [t, error, isValidating, refreshing, manga, refresh]);
if (error && !manga) {

110
src/screens/Migrate.tsx Normal file
View File

@@ -0,0 +1,110 @@
/*
* 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, useState } from 'react';
import { useParams } from 'react-router-dom';
import gql from 'graphql-tag';
import { useTranslation } from 'react-i18next';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { TMigratableSource } from '@/components/MigrationCard.tsx';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { EmptyView } from '@/components/util/EmptyView.tsx';
import { MangaGrid } from '@/components/MangaGrid.tsx';
import { TPartialManga } from '@/typings.ts';
import { GridLayouts } from '@/components/source/GridLayouts.tsx';
import { useLocalStorage } from '@/util/useLocalStorage.tsx';
import { GridLayout } from '@/components/context/LibraryOptionsContext.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: gql`
fragment MigratableSource on SourceType {
id
name
}
`,
});
const [isKnownSource, setIsKnownSource] = useState(fragmentSource !== null ? true : undefined);
const {
data: migratableSourceData,
loading: isSourceLoading,
error: sourceError,
} = requestManager.useGetSource(paramSourceId, { skip: !!isKnownSource });
const { sourceId, name } = {
sourceId: paramSourceId,
name: paramSourceId,
...fragmentSource,
...migratableSourceData?.source,
};
const {
data: migratableSourceMangasData,
loading: areMangasLoading,
error: mangasError,
} = requestManager.useGetMigratableSourceMangas(sourceId, {
skip: !isKnownSource,
});
useEffect(() => {
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 <EmptyView message={t('global.error.label.failed_to_load_data')} messageExtra={error.message} />;
}
return (
<MangaGrid
hasNextPage={false}
loadMore={() => {}}
isLoading={areMangasLoading}
mangas={(migratableSourceMangasData?.mangas.nodes ?? []) as TPartialManga[]}
gridLayout={gridLayout}
mode="migrate.search"
/>
);
};

69
src/screens/Migration.tsx Normal file
View File

@@ -0,0 +1,69 @@
/*
* 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 { requestManager } from '@/lib/requests/RequestManager.ts';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { EmptyView } from '@/components/util/EmptyView.tsx';
import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
import { MigrationCard, TMigratableSource } from '@/components/MigrationCard.tsx';
import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
type TMigratableSourcesResult = GetMigratableSourcesQuery['mangas']['nodes'];
type TMigratableSources = Record<string, TMigratableSource>;
const getMigratableSources = (mangas?: TMigratableSourcesResult): TMigratableSources => {
if (!mangas) {
return {};
}
const uniqueSources: TMigratableSources = {};
mangas.forEach(({ sourceId, source }) => {
const uniqueSource = uniqueSources[sourceId] ?? {
...{ id: sourceId, name: sourceId, lang: 'unknown', iconUrl: null, mangaCount: 0, ...source },
};
uniqueSources[sourceId] = {
...uniqueSource,
mangaCount: uniqueSource.mangaCount + 1,
};
});
return uniqueSources;
};
export const Migration = () => {
const { t } = useTranslation();
const { data, loading, error } = requestManager.useGetMigratableSources();
const migratableSources = useMemo(() => getMigratableSources(data?.mangas.nodes), [data?.mangas.nodes]);
if (loading) {
return <LoadingPlaceholder />;
}
if (error) {
return <EmptyView message={t('global.error.label.failed_to_load_data')} messageExtra={error.message} />;
}
return (
<List>
{Object.values(migratableSources).map((migratableSource, index) => (
<StyledGroupItemWrapper
key={migratableSource.id}
isLastItem={index === Object.values(migratableSources).length - 1}
>
<MigrationCard {...migratableSource} />
</StyledGroupItemWrapper>
))}
</List>
);
};

20
src/screens/SearchAll.tsx
View File

@@ -8,7 +8,7 @@
import { Card, CardActionArea, Typography } from '@mui/material';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import { StringParam, useQueryParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import { ISource } from '@/typings';
@@ -21,6 +21,7 @@ import { LangSelect } from '@/components/navbar/action/LangSelect';
import { MangaGrid } from '@/components/MangaGrid';
import { useDebounce } from '@/util/useDebounce.ts';
import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
import { MangaCardProps } from '@/components/MangaCard.tsx';
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -84,6 +85,7 @@ const SourceSearchPreview = React.memo(
onSearchRequestFinished,
searchString,
emptyQuery,
mode,
}: {
source: ISource;
onSearchRequestFinished: (
@@ -94,7 +96,7 @@ const SourceSearchPreview = React.memo(
) => void;
searchString: string | null | undefined;
emptyQuery: boolean;
}) => {
} & Pick<MangaCardProps, 'mode'>) => {
const { t } = useTranslation();
const { id, displayName, lang } = source;
@@ -150,6 +152,7 @@ const SourceSearchPreview = React.memo(
noFaces
message={errorMessage}
inLibraryIndicator
mode={mode}
/>
</>
);
@@ -163,6 +166,11 @@ export const SearchAll: React.FC = () => {
useSetDefaultBackTo('sources');
const { pathname, state } = useLocation<{ mangaTitle?: string }>();
const isMigrateMode = pathname.startsWith('/migrate/source');
const mangaTitle = state?.mangaTitle;
const [query] = useQueryParam('query', StringParam);
const searchString = useDebounce(query, TRIGGER_SEARCH_THRESHOLD);
@@ -203,7 +211,7 @@ export const SearchAll: React.FC = () => {
);
useEffect(() => {
setTitle(t('search.title.global_search'));
setTitle(t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: mangaTitle }));
setAction(
<>
<AppbarSearch autoOpen />
@@ -215,6 +223,11 @@ export const SearchAll: React.FC = () => {
/>
</>,
);
return () => {
setTitle('');
setAction(null);
};
}, [t, shownLangs, setShownLangs, sources]);
useEffect(() => {
@@ -234,6 +247,7 @@ export const SearchAll: React.FC = () => {
onSearchRequestFinished={updateSourceLoadingState}
searchString={searchString}
emptyQuery={!query}
mode={isMigrateMode ? 'migrate.select' : undefined}
/>
))}
</>

7
src/screens/Settings.tsx
View File

@@ -43,6 +43,11 @@ export function Settings() {
useEffect(() => {
setTitle(t('settings.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { darkTheme, setDarkTheme } = useContext(DarkTheme);
@@ -68,7 +73,7 @@ export function Settings() {
<ListItemIcon>
<ListAltIcon />
</ListItemIcon>
<ListItemText primary={t('category.title.categories')} />
<ListItemText primary={t('category.title.category_other')} />
</ListItemLink>
<ListItemLink to="/settings/defaultReaderSettings">
<ListItemIcon>

5
src/screens/SourceConfigure.tsx
View File

@@ -43,6 +43,11 @@ export function SourceConfigure() {
useEffect(() => {
setTitle(t('source.configuration.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { sourceId } = useParams<{ sourceId: string }>();

7
src/screens/SourceMangas.tsx
View File

@@ -25,7 +25,7 @@ import {
} from '@/lib/requests/RequestManager.ts';
import { useDebounce } from '@/util/useDebounce.ts';
import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
import { SourceGridLayout } from '@/components/source/GridLayouts';
import { SourceGridLayout } from '@/components/source/SourceGridLayout';
import { AppbarSearch } from '@/components/util/AppbarSearch';
import { SourceOptions } from '@/components/source/SourceOptions';
import { SourceMangaGrid } from '@/components/source/SourceMangaGrid';
@@ -366,6 +366,11 @@ export function SourceMangas() {
)}
</>,
);
return () => {
setTitle('');
setAction(null);
};
}, [t, source]);
useEffect(() => {

7
src/screens/Sources.tsx
View File

@@ -48,7 +48,7 @@ function groupByLang(sources: ISource[]) {
export function Sources() {
const { t } = useTranslation();
const { setTitle, setAction } = useContext(NavBarContext);
const { setAction } = useContext(NavBarContext);
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());
const [showNsfw] = useLocalStorage<boolean>('showNsfw', true);
@@ -84,7 +84,6 @@ export function Sources() {
}, []);
useEffect(() => {
setTitle(t('source.title'));
setAction(
<>
<Tooltip title={t('search.title.global_search')}>
@@ -100,6 +99,10 @@ export function Sources() {
/>
</>,
);
return () => {
setAction(null);
};
}, [t, shownLangs, sources]);
if (isLoading) return <LoadingPlaceholder />;

6
src/screens/Updates.tsx
View File

@@ -104,8 +104,12 @@ export const Updates: React.FC = () => {
useEffect(() => {
setTitle(t('updates.title'));
setAction(<UpdateChecker />);
return () => {
setTitle('');
setAction(null);
};
}, [t, lastUpdateTimestamp]);
const downloadForChapter = (chapter: TChapter) => {

5
src/screens/settings/About.tsx
View File

@@ -190,6 +190,11 @@ export function About() {
useEffect(() => {
setTitle(t('settings.about.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
useSetDefaultBackTo('settings');

5
src/screens/settings/Backup.tsx
View File

@@ -62,6 +62,11 @@ export function Backup() {
useEffect(() => {
setTitle(t('settings.backup.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
useSetDefaultBackTo('settings');

7
src/screens/settings/Categories.tsx
View File

@@ -48,8 +48,13 @@ export function Categories() {
const { setTitle, setAction } = useContext(NavBarContext);
useEffect(() => {
setTitle(t('category.title.categories'));
setTitle(t('category.title.category_other'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { data } = requestManager.useGetCategories();

5
src/screens/settings/DefaultReaderSettings.tsx
View File

@@ -28,6 +28,11 @@ export function DefaultReaderSettings() {
useEffect(() => {
setTitle(t('reader.settings.title.default_reader_settings'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { metadata, settings, loading } = useDefaultReaderSettings();

5
src/screens/settings/DownloadSettings.tsx
View File

@@ -48,6 +48,11 @@ export const DownloadSettings = () => {
useEffect(() => {
setTitle(t('download.settings.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { data } = requestManager.useGetServerSettings();

5
src/screens/settings/LibrarySettings.tsx
View File

@@ -46,6 +46,11 @@ export function LibrarySettings() {
useEffect(() => {
setTitle(t('library.settings.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
useSetDefaultBackTo('settings');

5
src/screens/settings/ServerSettings.tsx
View File

@@ -55,6 +55,11 @@ export const ServerSettings = () => {
useEffect(() => {
setTitle(t('settings.server.title.settings'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { data } = requestManager.useGetServerSettings();

5
src/screens/settings/WebUISettings.tsx
View File

@@ -107,6 +107,11 @@ export const WebUISettings = () => {
useEffect(() => {
setTitle(t('settings.webui.title.settings'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { data } = requestManager.useGetServerSettings();