400 lines
16 KiB
TypeScript
400 lines
16 KiB
TypeScript
/*
|
|
* 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 CardActionArea from '@mui/material/CardActionArea';
|
|
import Typography from '@mui/material/Typography';
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import { StringParam, useQueryParam } from 'use-query-params';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Box from '@mui/material/Box';
|
|
import Stack from '@mui/material/Stack';
|
|
import Button from '@mui/material/Button';
|
|
import PushPinIcon from '@mui/icons-material/PushPin';
|
|
import DoneAllIcon from '@mui/icons-material/DoneAll';
|
|
import FilterListIcon from '@mui/icons-material/FilterList';
|
|
import { useElementSize } from '@mantine/hooks';
|
|
import IconButton from '@mui/material/IconButton'; // ms
|
|
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
|
|
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
|
import { AppbarSearch } from '@/features/core/components/AppbarSearch.tsx';
|
|
import { useDebounce } from '@/features/core/hooks/useDebounce.ts';
|
|
import { MangaCardProps } from '@/features/manga/Manga.types.ts';
|
|
import { EmptyView } from '@/features/core/components/feedback/EmptyView.tsx';
|
|
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
|
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
|
import { BaseMangaGrid } from '@/features/manga/components/BaseMangaGrid.tsx';
|
|
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
|
import { translateExtensionLanguage } from '@/features/extension/Extensions.utils.ts';
|
|
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
|
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
|
import { Sources } from '@/features/source/services/Sources.ts';
|
|
import {
|
|
SourceDisplayNameInfo,
|
|
SourceIdInfo,
|
|
SourceLanguageInfo,
|
|
SourceMetaInfo,
|
|
SourceNameInfo,
|
|
} from '@/features/source/Source.types.ts';
|
|
import {
|
|
createUpdateMetadataServerSettings,
|
|
useMetadataServerSettings,
|
|
} from '@/features/settings/services/ServerSettingsMetadata.ts';
|
|
import { useAppTitleAndAction } from '@/features/navigation-bar/hooks/useAppTitleAndAction.ts';
|
|
import { getSourceMetadata } from '@/features/source/services/SourceMetadata.ts';
|
|
import { makeToast } from '@/features/core/utils/Toast.ts';
|
|
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
|
import { MUIUtil } from '@/lib/mui/MUI.util.ts';
|
|
import { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
|
|
import { SourceLanguageSelect } from '@/features/source/components/SourceLanguageSelect.tsx';
|
|
import { SearchParam } from '@/features/core/Core.types.ts';
|
|
|
|
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean; error: any };
|
|
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
|
|
|
|
const compareSourceByName = (sourceA: SourceDisplayNameInfo, sourceB: SourceDisplayNameInfo): number =>
|
|
sourceA.displayName.localeCompare(sourceB.displayName);
|
|
|
|
const compareSourcesBySearchResult = (
|
|
sourceA: SourceIdInfo & SourceMetaInfo,
|
|
sourceB: SourceIdInfo & SourceMetaInfo,
|
|
sourceToFetchedStateMap: SourceToLoadingStateMap,
|
|
): -1 | 0 | 1 => {
|
|
const isSourceAPinned = getSourceMetadata(sourceA).isPinned;
|
|
const isSourceBPinned = getSourceMetadata(sourceB).isPinned;
|
|
|
|
const sourceAState = sourceToFetchedStateMap.get(sourceA.id);
|
|
const sourceBState = sourceToFetchedStateMap.get(sourceB.id);
|
|
|
|
const isSourceAFetched = !sourceAState?.isLoading;
|
|
const hasSourceAError = !!sourceAState?.error;
|
|
const isSourceASearchResultEmpty = !sourceAState?.hasResults && !hasSourceAError;
|
|
|
|
const isSourceBFetched = !sourceBState?.isLoading;
|
|
const hasSourceBError = !!sourceBState?.error;
|
|
const isSourceBSearchResultEmpty = !sourceBState?.hasResults && !hasSourceBError;
|
|
|
|
if (isSourceAFetched && !isSourceBFetched) {
|
|
return -1;
|
|
}
|
|
if (!isSourceAFetched && isSourceBFetched) {
|
|
return 1;
|
|
}
|
|
|
|
if (isSourceASearchResultEmpty && !isSourceBSearchResultEmpty) {
|
|
return 1;
|
|
}
|
|
if (isSourceBSearchResultEmpty && !isSourceASearchResultEmpty) {
|
|
return -1;
|
|
}
|
|
|
|
if (!hasSourceAError && hasSourceBError) {
|
|
return -1;
|
|
}
|
|
if (hasSourceAError && !hasSourceBError) {
|
|
return 1;
|
|
}
|
|
|
|
if (isSourceAPinned && !isSourceBPinned) {
|
|
return -1;
|
|
}
|
|
if (!isSourceAPinned && isSourceBPinned) {
|
|
return 1;
|
|
}
|
|
|
|
return 0;
|
|
};
|
|
const TRIGGER_SEARCH_THRESHOLD = 1000; // ms
|
|
|
|
const SourceSearchPreview = React.memo(
|
|
({
|
|
source,
|
|
onSearchRequestFinished,
|
|
searchString,
|
|
emptyQuery,
|
|
mode,
|
|
shouldShowOnlySourcesWithResults,
|
|
}: {
|
|
source: SourceIdInfo & SourceDisplayNameInfo & SourceNameInfo & SourceLanguageInfo;
|
|
onSearchRequestFinished: (source: SourceIdInfo, state: SourceLoadingState) => void;
|
|
searchString: string | null | undefined;
|
|
emptyQuery: boolean;
|
|
} & Pick<MangaCardProps, 'mode'> &
|
|
Pick<MetadataBrowseSettings, 'shouldShowOnlySourcesWithResults'>) => {
|
|
const { t } = useTranslation();
|
|
|
|
const { id, name, lang } = source;
|
|
|
|
const currentSearchString = useRef(searchString);
|
|
const currentAbortRequest = useRef<(reason: any) => void>(() => {});
|
|
|
|
const didSearchChange = currentSearchString.current !== searchString;
|
|
if (didSearchChange) {
|
|
currentSearchString.current = searchString;
|
|
currentAbortRequest.current(new Error(`SourceSearchPreview(${id}, ${name}): search string changed`));
|
|
}
|
|
|
|
const [refetch, results] = requestManager.useSourceSearch(id, searchString ?? '', undefined, 1, {
|
|
skipRequest: !searchString,
|
|
addAbortSignal: true,
|
|
});
|
|
|
|
const { data: searchResult, isLoading, error, abortRequest } = results[0]!;
|
|
currentAbortRequest.current = abortRequest;
|
|
|
|
const mangas = searchResult?.fetchSourceManga?.mangas ?? [];
|
|
const noMangasFound = !error && !isLoading && !mangas.length;
|
|
|
|
useEffect(() => {
|
|
onSearchRequestFinished(source, {
|
|
isLoading,
|
|
hasResults: !noMangasFound,
|
|
emptySearch: !searchString,
|
|
error,
|
|
});
|
|
}, [isLoading, noMangasFound, searchString, error]);
|
|
|
|
let errorMessage: string | undefined;
|
|
if (error) {
|
|
errorMessage = t('search.error.label.source_search_failed');
|
|
} else if (noMangasFound) {
|
|
errorMessage = t('manga.error.label.no_mangas_found');
|
|
}
|
|
|
|
if ((!isLoading && !searchString) || emptyQuery) {
|
|
return null;
|
|
}
|
|
|
|
if (shouldShowOnlySourcesWithResults && (noMangasFound || error)) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ pb: 2 }}>
|
|
<Card sx={{ mb: 1 }}>
|
|
<CardActionArea
|
|
component={Link}
|
|
to={AppRoutes.sources.childRoutes.browse.path(id, searchString)}
|
|
sx={{ p: 1, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
|
|
>
|
|
<Box>
|
|
<Typography variant="h5">{name}</Typography>
|
|
<Typography variant="caption">{translateExtensionLanguage(lang)}</Typography>
|
|
</Box>
|
|
<CustomTooltip title={t('global.button.show_more')}>
|
|
<IconButton {...MUIUtil.preventRippleProp()}>
|
|
<ArrowForwardIcon />
|
|
</IconButton>
|
|
</CustomTooltip>
|
|
</CardActionArea>
|
|
</Card>
|
|
{errorMessage ? (
|
|
<EmptyView
|
|
sx={{ alignItems: 'start', height: undefined }}
|
|
noFaces
|
|
message={errorMessage}
|
|
messageExtra={getErrorMessage(error)}
|
|
retry={
|
|
error
|
|
? () =>
|
|
refetch(1).catch(
|
|
defaultPromiseErrorHandler(`SourceSearchPreview(${source.id})::refetch`),
|
|
)
|
|
: undefined
|
|
}
|
|
/>
|
|
) : (
|
|
<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={searchString}
|
|
gridWrapperProps={{ sx: { px: 0 } }}
|
|
mangas={mangas}
|
|
isLoading={isLoading}
|
|
hasNextPage={false}
|
|
loadMore={() => undefined}
|
|
horizontal
|
|
noFaces
|
|
message={errorMessage}
|
|
inLibraryIndicator
|
|
mode={mode}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
},
|
|
);
|
|
|
|
export const SearchAll: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { pathname, state } = useLocation<{ mangaTitle?: string; shouldShowOnlyPinnedSources?: boolean }>();
|
|
const { ref: filterHeaderRef, height: filterHeaderHeight } = useElementSize();
|
|
|
|
const shouldShowOnlyPinnedSources = state?.shouldShowOnlyPinnedSources ?? true;
|
|
const isMigrateMode = pathname.startsWith('/migrate/source');
|
|
|
|
const [query] = useQueryParam(SearchParam.QUERY, StringParam);
|
|
const searchString = useDebounce(query, TRIGGER_SEARCH_THRESHOLD);
|
|
|
|
const { languages: shownLangs, setLanguages: setShownLangs } = Sources.useLanguages();
|
|
const {
|
|
settings: { showNsfw, shouldShowOnlySourcesWithResults },
|
|
} = useMetadataServerSettings();
|
|
|
|
const { data, loading, error, refetch } = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
|
|
const sources = useMemo(() => data?.sources.nodes ?? [], [data?.sources.nodes]);
|
|
|
|
const [sourceToLoadingStateMap, setSourceToLoadingStateMap] = useState<SourceToLoadingStateMap>(new Map());
|
|
const debouncedSourceToLoadingStateMap = useDebounce(sourceToLoadingStateMap, 500);
|
|
|
|
const sourceLanguages = useMemo(() => Sources.getLanguages(sources), [sources]);
|
|
|
|
const filteredSources = useMemo(
|
|
() =>
|
|
Sources.filter(sources, {
|
|
showNsfw,
|
|
languages: shownLangs,
|
|
keepLocalSource: true,
|
|
pinned: shouldShowOnlyPinnedSources,
|
|
enabled: true,
|
|
}),
|
|
[sources, shownLangs, shouldShowOnlyPinnedSources],
|
|
);
|
|
const sourcesSortedByName = useMemo(() => [...filteredSources].toSorted(compareSourceByName), [filteredSources]);
|
|
const sourcesSortedByResult = useMemo(
|
|
() =>
|
|
[...sourcesSortedByName].sort((sourceA, sourceB) =>
|
|
compareSourcesBySearchResult(sourceA, sourceB, debouncedSourceToLoadingStateMap),
|
|
),
|
|
[sourcesSortedByName, debouncedSourceToLoadingStateMap],
|
|
);
|
|
|
|
const updateSourceLoadingState = useCallback(
|
|
({ id }: SourceIdInfo, loadState: SourceLoadingState) => {
|
|
setSourceToLoadingStateMap((currentMap) => {
|
|
const mapCopy = new Map(currentMap);
|
|
mapCopy.set(id, loadState);
|
|
return mapCopy;
|
|
});
|
|
},
|
|
[setSourceToLoadingStateMap],
|
|
);
|
|
|
|
const updateMetadataSettings = createUpdateMetadataServerSettings<'shouldShowOnlySourcesWithResults'>((e) =>
|
|
makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
|
|
);
|
|
|
|
useAppTitleAndAction(
|
|
t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: state?.mangaTitle }),
|
|
<>
|
|
<AppbarSearch isClosable={false} />
|
|
<SourceLanguageSelect
|
|
selectedLanguages={shownLangs}
|
|
setSelectedLanguages={setShownLangs}
|
|
languages={sourceLanguages}
|
|
sources={sources ?? []}
|
|
/>
|
|
</>,
|
|
[shownLangs, setShownLangs, sourceLanguages, sources],
|
|
);
|
|
|
|
if (loading) {
|
|
return <LoadingPlaceholder />;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<EmptyViewAbsoluteCentered
|
|
message={t('global.error.label.failed_to_load_data')}
|
|
messageExtra={getErrorMessage(error)}
|
|
retry={() => refetch().catch(defaultPromiseErrorHandler('SearchAll::refetch'))}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ position: 'relative', px: 1, pb: 1 }}>
|
|
<Stack
|
|
ref={filterHeaderRef}
|
|
sx={{
|
|
width: '100%',
|
|
position: 'fixed',
|
|
zIndex: 1,
|
|
flexDirection: 'row',
|
|
gap: 2,
|
|
pt: 1,
|
|
pb: 2,
|
|
background: (theme) => theme.palette.background.default,
|
|
}}
|
|
>
|
|
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
|
|
<Button
|
|
startIcon={<PushPinIcon />}
|
|
variant={shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
|
|
onClick={() =>
|
|
navigate(
|
|
{
|
|
pathname: '',
|
|
search: query ? `query=${query}` : '',
|
|
},
|
|
{
|
|
replace: true,
|
|
state: { ...state, shouldShowOnlyPinnedSources: true },
|
|
},
|
|
)
|
|
}
|
|
>
|
|
{t('global.label.pinned')}
|
|
</Button>
|
|
<Button
|
|
startIcon={<DoneAllIcon />}
|
|
variant={!shouldShowOnlyPinnedSources ? 'contained' : 'outlined'}
|
|
onClick={() =>
|
|
navigate(
|
|
{
|
|
pathname: '',
|
|
search: query ? `query=${query}` : '',
|
|
},
|
|
{
|
|
replace: true,
|
|
state: { ...state, shouldShowOnlyPinnedSources: false },
|
|
},
|
|
)
|
|
}
|
|
>
|
|
{t('extension.language.all')}
|
|
</Button>
|
|
</Stack>
|
|
<Button
|
|
startIcon={<FilterListIcon />}
|
|
variant={shouldShowOnlySourcesWithResults ? 'contained' : 'outlined'}
|
|
onClick={() =>
|
|
updateMetadataSettings('shouldShowOnlySourcesWithResults', !shouldShowOnlySourcesWithResults)
|
|
}
|
|
>
|
|
{t('search.filter.has_results')}
|
|
</Button>
|
|
</Stack>
|
|
<Box sx={{ pt: `${filterHeaderHeight}px` }}>
|
|
{sourcesSortedByResult.map((source) => (
|
|
<SourceSearchPreview
|
|
key={source.id}
|
|
source={source}
|
|
onSearchRequestFinished={updateSourceLoadingState}
|
|
searchString={searchString}
|
|
emptyQuery={!query}
|
|
mode={isMigrateMode ? 'migrate.select' : 'source'}
|
|
shouldShowOnlySourcesWithResults={shouldShowOnlySourcesWithResults}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|