Rename folder "modules" to "features"
This commit is contained in:
schroda
324
src/features/library/screens/Library.tsx
Normal file
324
src/features/library/screens/Library.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
/*
|
||||
* 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 Chip, { ChipProps } from '@mui/material/Chip';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useQueryParam, NumberParam, StringParam } from 'use-query-params';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Button from '@mui/material/Button';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Box from '@mui/material/Box';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { TabPanel } from '@/features/core/components/tabs/TabPanel.tsx';
|
||||
import { LibraryToolbarMenu } from '@/features/library/components/LibraryToolbarMenu.tsx';
|
||||
import { LibraryMangaGrid } from '@/features/library/components/LibraryMangaGrid.tsx';
|
||||
import { AppbarSearch } from '@/features/core/components/AppbarSearch.tsx';
|
||||
import { UpdateChecker } from '@/features/core/components/UpdateChecker.tsx';
|
||||
import { useSelectableCollection } from '@/features/collection/hooks/useSelectableCollection.ts';
|
||||
import { SelectableCollectionSelectMode } from '@/features/collection/components/SelectableCollectionSelectMode.tsx';
|
||||
import { useGetVisibleLibraryMangas } from '@/features/library/hooks/useGetVisibleLibraryMangas.ts';
|
||||
import { SelectionFAB } from '@/features/collection/components/SelectionFAB.tsx';
|
||||
import { MangaActionMenuItems } from '@/features/manga/components/MangaActionMenuItems.tsx';
|
||||
import { TabsMenu } from '@/features/core/components/tabs/TabsMenu.tsx';
|
||||
import { TabsWrapper } from '@/features/core/components/tabs/TabsWrapper.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import {
|
||||
GetCategoriesLibraryQuery,
|
||||
GetCategoriesLibraryQueryVariables,
|
||||
GetLibraryMangaCountQuery,
|
||||
GetLibraryMangaCountQueryVariables,
|
||||
MangaChapterStatFieldsFragment,
|
||||
MangaType,
|
||||
} from '@/lib/graphql/generated/graphql.ts';
|
||||
import { GET_CATEGORIES_LIBRARY } from '@/lib/graphql/queries/CategoryQuery.ts';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { MANGA_CHAPTER_STAT_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
|
||||
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { GET_LIBRARY_MANGA_COUNT } from '@/lib/graphql/queries/MangaQuery.ts';
|
||||
import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
|
||||
import { useAppAction } from '@/features/navigation-bar/hooks/useAppAction.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
import { SearchParam } from '@/features/core/Core.types.ts';
|
||||
|
||||
const TitleWithSizeTag = styled('span')({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
const TitleSizeTag = ({ sx, ...props }: ChipProps) => (
|
||||
<Chip {...props} size="small" sx={{ ...sx, marginLeft: '5px' }} />
|
||||
);
|
||||
|
||||
export function Library() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
settings: { showTabSize },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const {
|
||||
data: categoriesResponse,
|
||||
error: tabsError,
|
||||
loading: areCategoriesLoading,
|
||||
refetch: refetchCategories,
|
||||
} = requestManager.useGetCategories<GetCategoriesLibraryQuery, GetCategoriesLibraryQueryVariables>(
|
||||
GET_CATEGORIES_LIBRARY,
|
||||
{
|
||||
notifyOnNetworkStatusChange: true,
|
||||
},
|
||||
);
|
||||
const tabsData = categoriesResponse?.categories.nodes.filter(
|
||||
(category) => category.id !== 0 || (category.id === 0 && category.mangas.totalCount),
|
||||
);
|
||||
const tabs = tabsData ?? [];
|
||||
|
||||
const librarySizeResponse = requestManager.useGetMangas<
|
||||
GetLibraryMangaCountQuery,
|
||||
GetLibraryMangaCountQueryVariables
|
||||
>(GET_LIBRARY_MANGA_COUNT, {});
|
||||
|
||||
const librarySize = librarySizeResponse.data?.mangas.totalCount ?? 0;
|
||||
|
||||
const [tabSearchParam, setTabSearchParam] = useQueryParam(SearchParam.TAB, NumberParam);
|
||||
const [query] = useQueryParam(SearchParam.QUERY, StringParam);
|
||||
|
||||
const activeTab: (typeof tabs)[number] | undefined = tabs.find((tab) => tab.id === tabSearchParam) ?? tabs[0];
|
||||
|
||||
const {
|
||||
data: categoryMangaResponse,
|
||||
error: mangaError,
|
||||
loading: mangaLoading,
|
||||
refetch: refetchCategoryMangas,
|
||||
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, notifyOnNetworkStatusChange: true });
|
||||
const categoryMangas = categoryMangaResponse?.mangas.nodes ?? [];
|
||||
const {
|
||||
visibleMangas: mangas,
|
||||
showFilteredOutMessage,
|
||||
filterKey,
|
||||
} = useGetVisibleLibraryMangas(categoryMangas, activeTab);
|
||||
|
||||
const retryFetchCategoryMangas = useCallback(
|
||||
() => refetchCategoryMangas().catch(defaultPromiseErrorHandler('Library::refetchCategoryMangas')),
|
||||
[refetchCategoryMangas, activeTab],
|
||||
);
|
||||
|
||||
const mangaIds = useMemo(() => mangas.map((manga) => manga.id), [mangas]);
|
||||
|
||||
const [isSelectModeActive, setIsSelectModeActive] = useState(false);
|
||||
const {
|
||||
areNoItemsForKeySelected: areNoItemsSelected,
|
||||
areAllItemsForKeySelected: areAllItemsSelected,
|
||||
selectedItemIds,
|
||||
handleSelectAll,
|
||||
handleSelection,
|
||||
clearSelection,
|
||||
} = useSelectableCollection<MangaType['id'], string>(mangas.length, {
|
||||
itemIds: mangaIds,
|
||||
currentKey: activeTab?.id.toString(),
|
||||
});
|
||||
|
||||
const handleSelect: typeof handleSelection = useCallback(
|
||||
(id, selected, selectOptions) => {
|
||||
setIsSelectModeActive(!!(selectedItemIds.length + (selected ? 1 : -1)));
|
||||
handleSelection(id, selected, selectOptions);
|
||||
},
|
||||
[setIsSelectModeActive, handleSelection],
|
||||
);
|
||||
|
||||
const selectedMangas = useMemo(
|
||||
() =>
|
||||
selectedItemIds
|
||||
.map((id) =>
|
||||
Mangas.getFromCache<MangaChapterStatFieldsFragment>(
|
||||
id,
|
||||
MANGA_CHAPTER_STAT_FIELDS,
|
||||
'MANGA_CHAPTER_STAT_FIELDS',
|
||||
),
|
||||
)
|
||||
.filter((manga) => !!manga),
|
||||
[selectedItemIds.length, mangas],
|
||||
);
|
||||
|
||||
const selectionFab = useMemo(() => {
|
||||
if (!isSelectModeActive) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<SelectionFAB selectedItemsCount={selectedItemIds.length} title="manga.title">
|
||||
{(handleClose, setHideMenu) => (
|
||||
<MangaActionMenuItems
|
||||
selectedMangas={selectedMangas}
|
||||
onClose={() => {
|
||||
handleClose();
|
||||
setIsSelectModeActive(false);
|
||||
clearSelection();
|
||||
}}
|
||||
setHideMenu={setHideMenu}
|
||||
/>
|
||||
)}
|
||||
</SelectionFAB>
|
||||
);
|
||||
}, [isSelectModeActive, selectedMangas]);
|
||||
|
||||
const triggerGlobalSearchButton = useMemo(
|
||||
() =>
|
||||
!!query && (
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Button
|
||||
size="large"
|
||||
component={Link}
|
||||
to={AppRoutes.sources.childRoutes.searchAll.path(query)}
|
||||
sx={{ textTransform: 'none', width: '100%' }}
|
||||
>
|
||||
{t('library.action.label.search_globally', { query })}
|
||||
</Button>
|
||||
</Box>
|
||||
),
|
||||
[query],
|
||||
);
|
||||
|
||||
useAppTitle(
|
||||
<TitleWithSizeTag>
|
||||
{t('library.title')}
|
||||
{showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
|
||||
</TitleWithSizeTag>,
|
||||
t('library.title'),
|
||||
[t, showTabSize, librarySize],
|
||||
);
|
||||
useAppAction(
|
||||
<>
|
||||
{!isSelectModeActive && activeTab && (
|
||||
<>
|
||||
<AppbarSearch />
|
||||
<LibraryToolbarMenu category={activeTab} />
|
||||
<UpdateChecker categoryId={activeTab?.id} />
|
||||
</>
|
||||
)}
|
||||
{!!mangas.length && (
|
||||
<SelectableCollectionSelectMode
|
||||
isActive={isSelectModeActive}
|
||||
areAllItemsSelected={areAllItemsSelected}
|
||||
areNoItemsSelected={areNoItemsSelected}
|
||||
onSelectAll={(selectAll) =>
|
||||
handleSelectAll(selectAll, [...new Set(mangas.map((manga) => manga.id))])
|
||||
}
|
||||
onModeChange={(checked) => {
|
||||
setIsSelectModeActive(checked);
|
||||
|
||||
if (checked) {
|
||||
handleSelectAll(true, [...new Set(mangas.map((manga) => manga.id))]);
|
||||
} else {
|
||||
tabs.forEach((tab) => handleSelectAll(false, [], tab.id.toString()));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>,
|
||||
[isSelectModeActive, areNoItemsSelected, areAllItemsSelected, activeTab, mangas.length],
|
||||
);
|
||||
|
||||
const handleTabChange = (newTab: number) => {
|
||||
setTabSearchParam(newTab);
|
||||
};
|
||||
|
||||
if (tabsError != null || librarySizeResponse.error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={tabsError?.message ?? librarySizeResponse.error?.message}
|
||||
retry={() => {
|
||||
if (tabsError) {
|
||||
refetchCategories().catch(defaultPromiseErrorHandler('Library::refetchCategories'));
|
||||
}
|
||||
|
||||
if (librarySizeResponse.error) {
|
||||
librarySizeResponse.refetch().catch(defaultPromiseErrorHandler('Library::refetchLibrarySize'));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (areCategoriesLoading || librarySizeResponse.loading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
if (tabs.length === 0) {
|
||||
return <EmptyViewAbsoluteCentered message={t('library.error.label.empty')} />;
|
||||
}
|
||||
|
||||
if (tabs.length === 1) {
|
||||
return (
|
||||
<>
|
||||
{triggerGlobalSearchButton}
|
||||
<LibraryMangaGrid
|
||||
// the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
|
||||
key={filterKey}
|
||||
mangas={mangas}
|
||||
message={mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')}
|
||||
messageExtra={mangaError?.message}
|
||||
isLoading={mangaLoading}
|
||||
selectedMangaIds={selectedItemIds}
|
||||
isSelectModeActive={isSelectModeActive}
|
||||
handleSelection={handleSelect}
|
||||
showFilteredOutMessage={!mangaError && showFilteredOutMessage}
|
||||
retry={mangaError && retryFetchCategoryMangas}
|
||||
/>
|
||||
{selectionFab}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TabsWrapper>
|
||||
<TabsMenu value={activeTab.id} onChange={(e, newTab) => handleTabChange(newTab)}>
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
sx={{ flexGrow: 1, maxWidth: 'unset' }}
|
||||
key={tab.id}
|
||||
label={
|
||||
<TitleWithSizeTag>
|
||||
{tab.name}
|
||||
{showTabSize ? <TitleSizeTag label={tab.mangas.totalCount} /> : null}
|
||||
</TitleWithSizeTag>
|
||||
}
|
||||
value={tab.id}
|
||||
/>
|
||||
))}
|
||||
</TabsMenu>
|
||||
{triggerGlobalSearchButton}
|
||||
{tabs.map((tab) => (
|
||||
<TabPanel key={tab.order} index={tab.order} currentIndex={activeTab.order}>
|
||||
{tab === activeTab && (
|
||||
<LibraryMangaGrid
|
||||
// the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
|
||||
key={filterKey}
|
||||
mangas={mangas}
|
||||
message={
|
||||
mangaError ? t('manga.error.label.request_failure') : t('category.error.label.empty')
|
||||
}
|
||||
messageExtra={mangaError?.message}
|
||||
isLoading={mangaLoading}
|
||||
selectedMangaIds={selectedItemIds}
|
||||
isSelectModeActive={isSelectModeActive}
|
||||
handleSelection={handleSelect}
|
||||
showFilteredOutMessage={!mangaError && showFilteredOutMessage}
|
||||
retry={mangaError && retryFetchCategoryMangas}
|
||||
/>
|
||||
)}
|
||||
</TabPanel>
|
||||
))}
|
||||
{selectionFab}
|
||||
</TabsWrapper>
|
||||
);
|
||||
}
|
||||
188
src/features/library/screens/LibraryDuplicates.tsx
Normal file
188
src/features/library/screens/LibraryDuplicates.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
/*
|
||||
* 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 { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { useLocalStorage } from '@/features/core/hooks/useStorage.tsx';
|
||||
import { GridLayouts } from '@/features/core/components/GridLayouts.tsx';
|
||||
import { CheckboxInput } from '@/features/core/components/inputs/CheckboxInput.tsx';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { MangaCard } from '@/features/manga/components/cards/MangaCard.tsx';
|
||||
import { StyledGroupedVirtuoso } from '@/features/core/components/virtuoso/StyledGroupedVirtuoso.tsx';
|
||||
import { StyledGroupHeader } from '@/features/core/components/virtuoso/StyledGroupHeader.tsx';
|
||||
import { GetMangasDuplicatesQuery, GetMangasDuplicatesQueryVariables } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { GET_MANGAS_DUPLICATES } from '@/lib/graphql/queries/MangaQuery.ts';
|
||||
import { BaseMangaGrid } from '@/features/manga/components/BaseMangaGrid.tsx';
|
||||
import { IMangaGridProps } from '@/features/manga/components/MangaGrid.tsx';
|
||||
import { StyledGroupItemWrapper } from '@/features/core/components/virtuoso/StyledGroupItemWrapper.tsx';
|
||||
import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
|
||||
import { LibraryDuplicatesWorkerInput, TMangaDuplicate, TMangaDuplicates } from '@/features/library/Library.types.ts';
|
||||
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 LibraryDuplicates = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [gridLayout, setGridLayout] = useLocalStorage('libraryDuplicatesGridLayout', GridLayout.List);
|
||||
const [checkAlternativeTitles, setCheckAlternativeTitles] = useLocalStorage(
|
||||
'libraryDuplicatesCheckAlternativeTitles',
|
||||
false,
|
||||
);
|
||||
|
||||
useAppTitleAndAction(
|
||||
t('library.settings.advanced.duplicates.label.title'),
|
||||
<>
|
||||
<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />
|
||||
<PopupState variant="popover" popupId="library-dupliactes-settings">
|
||||
{(popupState) => (
|
||||
<>
|
||||
<IconButton {...bindTrigger(popupState)} color="inherit">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<Menu {...bindMenu(popupState)}>
|
||||
<MenuItem>
|
||||
<CheckboxInput
|
||||
label={t('library.settings.advanced.duplicates.settings.label.check_description')}
|
||||
checked={checkAlternativeTitles}
|
||||
onChange={(_, checked) => setCheckAlternativeTitles(checked)}
|
||||
/>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
)}
|
||||
</PopupState>
|
||||
</>,
|
||||
[t, gridLayout, checkAlternativeTitles],
|
||||
);
|
||||
|
||||
const { data, loading, error, refetch } = requestManager.useGetMangas<
|
||||
GetMangasDuplicatesQuery,
|
||||
GetMangasDuplicatesQueryVariables
|
||||
>(GET_MANGAS_DUPLICATES, { condition: { inLibrary: true } });
|
||||
|
||||
const [isCheckingForDuplicates, setIsCheckingForDuplicates] = useState(true);
|
||||
|
||||
const [mangasByTitle, setMangasByTitle] = useState<Record<string, TMangaDuplicate[]>>({});
|
||||
useEffect(() => {
|
||||
setIsCheckingForDuplicates(true);
|
||||
const libraryMangas: TMangaDuplicate[] = data?.mangas.nodes ?? [];
|
||||
|
||||
if (!libraryMangas.length) {
|
||||
setMangasByTitle({});
|
||||
return () => {};
|
||||
}
|
||||
|
||||
const worker = new Worker(new URL('../workers/LibraryDuplicatesWorker.ts', import.meta.url), {
|
||||
type: 'module',
|
||||
});
|
||||
|
||||
worker.onmessage = (event: MessageEvent<TMangaDuplicates<(typeof libraryMangas)[number]>>) => {
|
||||
setMangasByTitle(event.data);
|
||||
setIsCheckingForDuplicates(false);
|
||||
};
|
||||
worker.postMessage({ mangas: libraryMangas, checkAlternativeTitles } satisfies LibraryDuplicatesWorkerInput);
|
||||
|
||||
return () => worker.terminate();
|
||||
}, [data?.mangas.nodes, checkAlternativeTitles]);
|
||||
|
||||
const duplicatedTitles = useMemo(
|
||||
() => Object.keys(mangasByTitle).toSorted((titleA, titleB) => titleA.localeCompare(titleB)),
|
||||
[mangasByTitle],
|
||||
);
|
||||
const duplicatedMangas = useMemo(
|
||||
() => duplicatedTitles.map((title) => mangasByTitle[title]).flat(),
|
||||
[mangasByTitle],
|
||||
);
|
||||
const mangasCountByTitle = useMemo(
|
||||
() => duplicatedTitles.map((title) => mangasByTitle[title]).map((mangas) => mangas.length),
|
||||
[mangasByTitle],
|
||||
);
|
||||
|
||||
const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
|
||||
mangasCountByTitle,
|
||||
useCallback((index) => duplicatedTitles[index], [duplicatedTitles]),
|
||||
useCallback(
|
||||
(index, groupIndex) => `${duplicatedTitles[groupIndex]}-${duplicatedMangas[index].id}}`,
|
||||
[duplicatedTitles, duplicatedMangas],
|
||||
),
|
||||
);
|
||||
|
||||
if (loading || isCheckingForDuplicates) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={getErrorMessage(error)}
|
||||
retry={() => refetch().catch(defaultPromiseErrorHandler('LibraryDuplicates::refetch'))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (gridLayout === GridLayout.List) {
|
||||
return (
|
||||
<StyledGroupedVirtuoso
|
||||
persistKey="library-duplicates"
|
||||
groupCounts={mangasCountByTitle}
|
||||
groupContent={(index) => (
|
||||
<StyledGroupHeader isFirstItem={index === 0}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{duplicatedTitles[index]}
|
||||
</Typography>
|
||||
</StyledGroupHeader>
|
||||
)}
|
||||
computeItemKey={computeItemKey}
|
||||
itemContent={(index) => (
|
||||
<StyledGroupItemWrapper>
|
||||
<MangaCard
|
||||
manga={duplicatedMangas[index] as IMangaGridProps['mangas'][number]}
|
||||
gridLayout={gridLayout}
|
||||
selected={null}
|
||||
mode="duplicate"
|
||||
/>
|
||||
</StyledGroupItemWrapper>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return duplicatedTitles.map((title, index) => (
|
||||
<Box key={title}>
|
||||
<StyledGroupHeader sx={{ pt: index === 0 ? undefined : 0, pb: 0 }} isFirstItem={false}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{title}
|
||||
</Typography>
|
||||
</StyledGroupHeader>
|
||||
<BaseMangaGrid
|
||||
// the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
|
||||
key={checkAlternativeTitles.toString()}
|
||||
mangas={mangasByTitle[title] as IMangaGridProps['mangas']}
|
||||
hasNextPage={false}
|
||||
loadMore={() => {}}
|
||||
isLoading={false}
|
||||
gridLayout={gridLayout}
|
||||
inLibraryIndicator={false}
|
||||
horizontal
|
||||
mode="duplicate"
|
||||
/>
|
||||
</Box>
|
||||
));
|
||||
};
|
||||
204
src/features/library/screens/LibrarySettings.tsx
Normal file
204
src/features/library/screens/LibrarySettings.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
/*
|
||||
* 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 List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import { t as translate } from 'i18next';
|
||||
import { GlobalUpdateSettings } from '@/features/settings/components/globalUpdate/GlobalUpdateSettings.tsx';
|
||||
import { makeToast } from '@/features/core/utils/Toast.ts';
|
||||
import {
|
||||
createUpdateMetadataServerSettings,
|
||||
useMetadataServerSettings,
|
||||
} from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { ListItemLink } from '@/features/core/components/lists/ListItemLink.tsx';
|
||||
import {
|
||||
GetCategoriesSettingsQuery,
|
||||
GetCategoriesSettingsQueryVariables,
|
||||
GetMangasBaseQuery,
|
||||
GetMangasBaseQueryVariables,
|
||||
} from '@/lib/graphql/generated/graphql.ts';
|
||||
import { GET_CATEGORIES_SETTINGS } from '@/lib/graphql/queries/CategoryQuery.ts';
|
||||
import { GET_MANGAS_BASE } from '@/lib/graphql/queries/MangaQuery.ts';
|
||||
import { MetadataLibrarySettings } from '@/features/library/Library.types.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
|
||||
|
||||
const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
|
||||
try {
|
||||
const nonLibraryMangas = await requestManager.getMangas<GetMangasBaseQuery, GetMangasBaseQueryVariables>(
|
||||
GET_MANGAS_BASE,
|
||||
{
|
||||
filter: { inLibrary: { equalTo: false }, categoryId: { isNull: false } },
|
||||
},
|
||||
{ fetchPolicy: 'no-cache' },
|
||||
).response;
|
||||
|
||||
const mangaIdsToRemove = Mangas.getIds(nonLibraryMangas.data.mangas.nodes);
|
||||
|
||||
if (mangaIdsToRemove.length) {
|
||||
await requestManager.updateMangasCategories(mangaIdsToRemove, {
|
||||
clearCategories: true,
|
||||
}).response;
|
||||
}
|
||||
makeToast(translate('library.settings.advanced.database.cleanup.label.success'), 'success');
|
||||
} catch (e) {
|
||||
makeToast(translate('library.settings.advanced.database.cleanup.label.error'), 'error', getErrorMessage(e));
|
||||
}
|
||||
};
|
||||
|
||||
export function LibrarySettings() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
useAppTitle(t('library.title'));
|
||||
|
||||
const categories = requestManager.useGetCategories<GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables>(
|
||||
GET_CATEGORIES_SETTINGS,
|
||||
);
|
||||
const serverSettings = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
|
||||
const {
|
||||
settings,
|
||||
loading: areMetadataServerSettingsLoading,
|
||||
request: { error: metadataServerSettingsError, refetch: refetchMetadataServerSettings },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const setSettingValue = createUpdateMetadataServerSettings<keyof MetadataLibrarySettings>((e) =>
|
||||
makeToast(t('search.error.label.failed_to_save_settings'), 'error', getErrorMessage(e)),
|
||||
);
|
||||
|
||||
// -1 for the DEFAULT category
|
||||
const categoryCount = (categories.data?.categories.nodes.length ?? 1) - 1;
|
||||
|
||||
const loading = serverSettings.loading || areMetadataServerSettingsLoading || categories.loading;
|
||||
if (loading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
|
||||
if (error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={getErrorMessage(error)}
|
||||
retry={() => {
|
||||
if (serverSettings.error) {
|
||||
serverSettings
|
||||
?.refetch()
|
||||
.catch(defaultPromiseErrorHandler('LibrarySettings::refetchServerSettings'));
|
||||
}
|
||||
|
||||
if (metadataServerSettingsError) {
|
||||
refetchMetadataServerSettings().catch(
|
||||
defaultPromiseErrorHandler('LibrarySettings::refetchMetadataServerSettings'),
|
||||
);
|
||||
}
|
||||
|
||||
if (categories.error) {
|
||||
categories.refetch().catch(defaultPromiseErrorHandler('LibrarySettings::refetchCategories'));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<List sx={{ pt: 0 }}>
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="library-category-settings">
|
||||
{t('category.title.category_other')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItemLink to={AppRoutes.settings.childRoutes.categories.path}>
|
||||
<ListItemText
|
||||
primary={t('category.dialog.title.edit_category_other')}
|
||||
secondary={t('category.value', { count: categoryCount })}
|
||||
/>
|
||||
</ListItemLink>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('library.settings.general.add_to_library.category_selection.label.title')}
|
||||
secondary={t('library.settings.general.add_to_library.category_selection.label.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={settings.showAddToLibraryCategorySelectDialog}
|
||||
onChange={(e) => setSettingValue('showAddToLibraryCategorySelectDialog', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('library.settings.general.remove_from_library.remove_from_categories.label.title')}
|
||||
secondary={t(
|
||||
'library.settings.general.remove_from_library.remove_from_categories.label.description',
|
||||
)}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={settings.removeMangaFromCategories}
|
||||
onChange={(e) => setSettingValue('removeMangaFromCategories', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="library-general-settings">
|
||||
{t('global.label.general')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('library.settings.general.search.ignore_filters.label.title')}
|
||||
secondary={t('library.settings.general.search.ignore_filters.label.description')}
|
||||
/>
|
||||
<Switch
|
||||
edge="end"
|
||||
checked={settings.ignoreFilters}
|
||||
onChange={(e) => setSettingValue('ignoreFilters', e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
<GlobalUpdateSettings
|
||||
serverSettings={serverSettings.data!.settings}
|
||||
categories={categories.data!.categories.nodes}
|
||||
/>
|
||||
<List
|
||||
subheader={
|
||||
<ListSubheader component="div" id="library-advanced">
|
||||
{t('global.label.advanced')}
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
<ListItemButton onClick={() => removeNonLibraryMangasFromCategories()}>
|
||||
<ListItemText
|
||||
primary={t('library.settings.advanced.database.cleanup.label.title')}
|
||||
secondary={t('library.settings.advanced.database.cleanup.label.description')}
|
||||
/>
|
||||
</ListItemButton>
|
||||
<ListItemLink to={AppRoutes.settings.childRoutes.library.childRoutes.duplicates.path}>
|
||||
<ListItemText
|
||||
primary={t('library.settings.advanced.duplicates.label.title')}
|
||||
secondary={t('library.settings.advanced.duplicates.label.description')}
|
||||
/>
|
||||
</ListItemLink>
|
||||
</List>
|
||||
</List>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user