Move global-search files into new folder
This commit is contained in:
schroda
294
src/modules/global-search/screens/SearchAll.tsx
Normal file
294
src/modules/global-search/screens/SearchAll.tsx
Normal file
@@ -0,0 +1,294 @@
|
||||
/*
|
||||
* 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, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { StringParam, useQueryParam } from 'use-query-params';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Box from '@mui/material/Box';
|
||||
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
|
||||
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
|
||||
import { langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs } from '@/lib/Languages.tsx';
|
||||
import { translateExtensionLanguage } from '@/modules/extension/services/Extensions.ts';
|
||||
import { AppbarSearch } from '@/modules/core/components/AppbarSearch.tsx';
|
||||
import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
|
||||
import { useDebounce } from '@/modules/core/hooks/useDebounce.ts';
|
||||
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { MangaCardProps } from '@/modules/manga/MangaCard.types.tsx';
|
||||
import { EmptyView } from '@/modules/core/components/placeholder/EmptyView.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
|
||||
import { SourceType } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { BaseMangaGrid } from '@/modules/manga/components/BaseMangaGrid.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
|
||||
|
||||
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
|
||||
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
|
||||
|
||||
function sourceToLangList(sources: Pick<SourceType, 'lang'>[]) {
|
||||
const result: string[] = [];
|
||||
|
||||
sources.forEach((source) => {
|
||||
if (result.indexOf(source.lang) === -1) {
|
||||
result.push(source.lang);
|
||||
}
|
||||
});
|
||||
|
||||
result.sort(langSortCmp);
|
||||
return result;
|
||||
}
|
||||
|
||||
const compareSourceByName = (
|
||||
sourceA: Pick<SourceType, 'displayName'>,
|
||||
sourceB: Pick<SourceType, 'displayName'>,
|
||||
): -1 | 0 | 1 => {
|
||||
if (sourceA.displayName < sourceB.displayName) {
|
||||
return -1;
|
||||
}
|
||||
if (sourceA.displayName > sourceB.displayName) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
const compareSourcesBySearchResult = (
|
||||
sourceA: Pick<SourceType, 'id'>,
|
||||
sourceB: Pick<SourceType, 'id'>,
|
||||
sourceToFetchedStateMap: SourceToLoadingStateMap,
|
||||
): -1 | 0 | 1 => {
|
||||
const isSourceAFetched = !sourceToFetchedStateMap.get(sourceA.id)?.isLoading;
|
||||
const isSourceBFetched = !sourceToFetchedStateMap.get(sourceB.id)?.isLoading;
|
||||
if (isSourceAFetched && !isSourceBFetched) {
|
||||
return -1;
|
||||
}
|
||||
if (!isSourceAFetched && isSourceBFetched) {
|
||||
return 1;
|
||||
}
|
||||
if (!isSourceAFetched && !isSourceBFetched) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const isSourceASearchResultEmpty = !sourceToFetchedStateMap.get(sourceA.id)?.hasResults;
|
||||
const isSourceBSearchResultEmpty = !sourceToFetchedStateMap.get(sourceB.id)?.hasResults;
|
||||
if (isSourceASearchResultEmpty && !isSourceBSearchResultEmpty) {
|
||||
return 1;
|
||||
}
|
||||
if (isSourceBSearchResultEmpty && !isSourceASearchResultEmpty) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
};
|
||||
const TRIGGER_SEARCH_THRESHOLD = 1000; // ms
|
||||
|
||||
const SourceSearchPreview = React.memo(
|
||||
({
|
||||
source,
|
||||
onSearchRequestFinished,
|
||||
searchString,
|
||||
emptyQuery,
|
||||
mode,
|
||||
}: {
|
||||
source: Pick<SourceType, 'id' | 'displayName' | 'lang'>;
|
||||
onSearchRequestFinished: (
|
||||
source: Pick<SourceType, 'id'>,
|
||||
isLoading: boolean,
|
||||
hasResults: boolean,
|
||||
emptySearch: boolean,
|
||||
) => void;
|
||||
searchString: string | null | undefined;
|
||||
emptyQuery: boolean;
|
||||
} & Pick<MangaCardProps, 'mode'>) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { id, displayName, lang } = source;
|
||||
const [refetch, results] = requestManager.useSourceSearch(id, searchString ?? '', undefined, 1, {
|
||||
skipRequest: !searchString,
|
||||
addAbortSignal: true,
|
||||
});
|
||||
const { data: searchResult, isLoading, error, abortRequest } = results[0]!;
|
||||
const mangas = searchResult?.fetchSourceManga?.mangas ?? [];
|
||||
const noMangasFound = !isLoading && !mangas.length;
|
||||
|
||||
useEffect(() => {
|
||||
onSearchRequestFinished(source, isLoading, !noMangasFound, !searchString);
|
||||
}, [isLoading, noMangasFound, searchString]);
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
// INFO:
|
||||
// with strict mode + dev mode the first request will be aborted. due to using SWR there won't be an
|
||||
// immediate second request since it's the same key. instead the "second" request will be the error handling of SWR
|
||||
abortRequest(new Error(`SourceSearchPreview(${id}, ${displayName}): search string changed`));
|
||||
},
|
||||
[searchString],
|
||||
);
|
||||
|
||||
if ((!isLoading && !searchString) || emptyQuery) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card sx={{ mb: 1 }}>
|
||||
<CardActionArea component={Link} to={`/sources/${id}?query=${searchString}`} sx={{ p: 3 }}>
|
||||
<Typography variant="h5">{displayName}</Typography>
|
||||
<Typography variant="caption">{translateExtensionLanguage(lang)}</Typography>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
{errorMessage ? (
|
||||
<EmptyView
|
||||
sx={{ alignItems: 'start', height: undefined }}
|
||||
noFaces
|
||||
message={errorMessage}
|
||||
messageExtra={error && error.message}
|
||||
retry={
|
||||
error
|
||||
? () =>
|
||||
refetch(1).catch(
|
||||
defaultPromiseErrorHandler(`SourceSearchPreview(${source.id})::refetch`),
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<BaseMangaGrid
|
||||
gridWrapperProps={{ sx: { px: 0 } }}
|
||||
mangas={mangas}
|
||||
isLoading={isLoading}
|
||||
hasNextPage={false}
|
||||
loadMore={() => undefined}
|
||||
horizontal
|
||||
noFaces
|
||||
message={errorMessage}
|
||||
inLibraryIndicator
|
||||
mode={mode}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export const SearchAll: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { setTitle, setAction } = useContext(NavBarContext);
|
||||
|
||||
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);
|
||||
|
||||
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());
|
||||
const [showNsfw] = useLocalStorage<boolean>('showNsfw', true);
|
||||
|
||||
const { data, loading, error, refetch } = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
|
||||
const sources = data?.sources.nodes ?? [];
|
||||
const [sourceToLoadingStateMap, setSourceToLoadingStateMap] = useState<SourceToLoadingStateMap>(new Map());
|
||||
const debouncedSourceToLoadingStateMap = useDebounce(sourceToLoadingStateMap, 500);
|
||||
|
||||
const sourcesSortedByName = useMemo(() => [...sources].sort(compareSourceByName), [sources]);
|
||||
const sourcesFilteredByLang = useMemo(
|
||||
() => sourcesSortedByName.filter((source) => shownLangs.includes(source.lang)),
|
||||
[sourcesSortedByName, shownLangs],
|
||||
);
|
||||
const sourcesFilteredByNsfw = useMemo(
|
||||
() => sourcesFilteredByLang.filter((source) => showNsfw || !source.isNsfw),
|
||||
[sourcesFilteredByLang, showNsfw],
|
||||
);
|
||||
const sourcesSortedByResult = useMemo(
|
||||
() =>
|
||||
[...sourcesFilteredByNsfw].sort((sourceA, sourceB) =>
|
||||
compareSourcesBySearchResult(sourceA, sourceB, debouncedSourceToLoadingStateMap),
|
||||
),
|
||||
[sourcesFilteredByNsfw, debouncedSourceToLoadingStateMap],
|
||||
);
|
||||
|
||||
const updateSourceLoadingState = useCallback(
|
||||
({ id }: Pick<SourceType, 'id'>, isLoading: boolean, hasResults: boolean, emptySearch: boolean) => {
|
||||
setSourceToLoadingStateMap((currentMap) => {
|
||||
const mapCopy = new Map(currentMap);
|
||||
mapCopy.set(id, { isLoading, hasResults, emptySearch });
|
||||
return mapCopy;
|
||||
});
|
||||
},
|
||||
[setSourceToLoadingStateMap],
|
||||
);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
setTitle(t(isMigrateMode ? 'migrate.search.title' : 'search.title.global_search', { title: mangaTitle }));
|
||||
setAction(
|
||||
<>
|
||||
<AppbarSearch isClosable={false} />
|
||||
<LangSelect
|
||||
shownLangs={shownLangs}
|
||||
setShownLangs={setShownLangs}
|
||||
allLangs={sourceToLangList(sources)}
|
||||
forcedLangs={sourceForcedDefaultLangs()}
|
||||
/>
|
||||
</>,
|
||||
);
|
||||
|
||||
return () => {
|
||||
setTitle('');
|
||||
setAction(null);
|
||||
};
|
||||
}, [t, shownLangs, setShownLangs, sources]);
|
||||
|
||||
useEffect(() => {
|
||||
// make sure all of forcedDefaultLangs() exists in shownLangs
|
||||
const missingDefaultLangs = sourceForcedDefaultLangs().filter(
|
||||
(defaultLang) => !shownLangs.includes(defaultLang),
|
||||
);
|
||||
setShownLangs([...shownLangs, ...missingDefaultLangs]);
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={error.message}
|
||||
retry={() => refetch().catch(defaultPromiseErrorHandler('SearchAll::refetch'))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 1 }}>
|
||||
{sourcesSortedByResult.map((source, index) => (
|
||||
<Box key={source.id} sx={{ pb: index + 1 !== sourcesSortedByResult.length ? 2 : 0 }}>
|
||||
<SourceSearchPreview
|
||||
source={source}
|
||||
onSearchRequestFinished={updateSourceLoadingState}
|
||||
searchString={searchString}
|
||||
emptyQuery={!query}
|
||||
mode={isMigrateMode ? 'migrate.select' : 'source'}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user