diff --git a/src/screens/settings/LibraryDuplicates.tsx b/src/screens/settings/LibraryDuplicates.tsx index 3657ac15..e423c255 100644 --- a/src/screens/settings/LibraryDuplicates.tsx +++ b/src/screens/settings/LibraryDuplicates.tsx @@ -13,28 +13,35 @@ 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 { requestManager } from '@/lib/requests/RequestManager.ts'; import { MangaGrid } from '@/components/MangaGrid.tsx'; -import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts'; import { TManga } from '@/typings'; import { NavBarContext } from '@/components/context/NavbarContext.tsx'; import { useLocalStorage } from '@/util/useStorage.tsx'; import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx'; import { GridLayouts } from '@/components/source/GridLayouts.tsx'; import { CheckboxInput } from '@/components/atoms/CheckboxInput.tsx'; +import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx'; +import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx'; +import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts'; +import { MangaCard } from '@/components/MangaCard.tsx'; +import { StyledGroupedVirtuoso } from '@/components/virtuoso/StyledGroupedVirtuoso.tsx'; +import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx'; -const findDuplicatesByTitle = (libraryMangas: TManga[]): TManga[] => { +const findDuplicatesByTitle = (libraryMangas: TManga[]): Record => { const titleToMangas = Object.groupBy(libraryMangas, ({ title }) => title.toLowerCase().trim()); - return Object.entries(titleToMangas) - .filter(([, mangasWithTitle]) => (mangasWithTitle?.length ?? 0) > 1) - .map(([, mangasWithTitle]) => mangasWithTitle ?? []) - .flat(); + return Object.fromEntries( + Object.entries(titleToMangas) + .filter((titleToMangaMap): titleToMangaMap is [string, TManga[]] => (titleToMangaMap[1]?.length ?? 0) > 1) + .map(([, mangas]) => [mangas[0].title, mangas]), + ); }; -const findDuplicatesByTitleAndAlternativeTitles = (libraryMangas: TManga[]): TManga[] => { +const findDuplicatesByTitleAndAlternativeTitles = (libraryMangas: TManga[]): Record => { const idToDuplicateStatus: Record = {}; - const duplicatedMangas: TManga[] = []; + const titleToMangas: Record = {}; libraryMangas.forEach((mangaToCheck) => libraryMangas.forEach((libraryManga) => { @@ -56,7 +63,7 @@ const findDuplicatesByTitleAndAlternativeTitles = (libraryMangas: TManga[]): TMa const markMangaToCheckAsDuplicate = !idToDuplicateStatus[mangaToCheck.id]; if (markMangaToCheckAsDuplicate) { idToDuplicateStatus[mangaToCheck.id] = true; - duplicatedMangas.push(mangaToCheck); + titleToMangas[mangaToCheck.title] = [...(titleToMangas[mangaToCheck.title] ?? []), mangaToCheck]; } const wasAlreadyDetected = idToDuplicateStatus[libraryManga.id]; @@ -65,11 +72,11 @@ const findDuplicatesByTitleAndAlternativeTitles = (libraryMangas: TManga[]): TMa } idToDuplicateStatus[libraryManga.id] = true; - duplicatedMangas.push(libraryManga); + titleToMangas[mangaToCheck.title] = [...(titleToMangas[mangaToCheck.title] ?? []), libraryManga]; }), ); - return duplicatedMangas; + return titleToMangas; }; export const LibraryDuplicates = () => { @@ -118,7 +125,7 @@ export const LibraryDuplicates = () => { const { data, loading, error, refetch } = requestManager.useGetMangas({ condition: { inLibrary: true } }); - const duplicatedMangas = useMemo(() => { + const mangasByTitle = useMemo(() => { const libraryMangas: TManga[] = data?.mangas.nodes ?? []; if (checkAlternativeTitles) { @@ -128,16 +135,62 @@ export const LibraryDuplicates = () => { return findDuplicatesByTitle(libraryMangas); }, [data?.mangas.nodes, checkAlternativeTitles]); - return ( - {}} - message={error ? t('manga.error.label.request_failure') : t('library.error.label.empty')} - messageExtra={error?.message} - isLoading={loading} - retry={error ? () => refetch().catch(defaultPromiseErrorHandler('LibraryDuplicates::refetch')) : undefined} - gridLayout={gridLayout} - /> + const duplicatedTitles = useMemo(() => Object.keys(mangasByTitle), [mangasByTitle]); + const duplicatedMangas = useMemo(() => Object.values(mangasByTitle).flat(), [mangasByTitle]); + const mangasCountByTitle = useMemo( + () => Object.values(mangasByTitle).map((mangas) => mangas.length), + [mangasByTitle], ); + + if (loading) { + return ; + } + + if (error) { + return ( + refetch().catch(defaultPromiseErrorHandler('LibraryDuplicates::refetch'))} + /> + ); + } + + if (gridLayout === GridLayout.List) { + return ( + ( + + {duplicatedTitles[index]} + + )} + itemContent={(index) => ( + + + + )} + /> + ); + } + + return duplicatedTitles.map((title, index) => ( + + + {title} + + {}} + isLoading={false} + gridLayout={gridLayout} + horizontal + /> + + )); };