Improve manual search modal. Change cache behavior of manual search api to no cache

This commit is contained in:
LASER-Yi 2023-09-03 15:54:23 +08:00
parent 79f5c7d675
commit 714c46444a
No known key found for this signature in database
2 changed files with 18 additions and 10 deletions

View File

@ -18,7 +18,7 @@ export function useMoviesProvider(radarrId?: number) {
} }
}, },
{ {
staleTime: Infinity, staleTime: 0,
} }
); );
} }
@ -32,7 +32,7 @@ export function useEpisodesProvider(episodeId?: number) {
} }
}, },
{ {
staleTime: Infinity, staleTime: 0,
} }
); );
} }

View File

@ -40,18 +40,18 @@ interface Props<T extends SupportType> {
function ManualSearchView<T extends SupportType>(props: Props<T>) { function ManualSearchView<T extends SupportType>(props: Props<T>) {
const { download, query: useSearch, item } = props; const { download, query: useSearch, item } = props;
const itemId = useMemo(() => GetItemId(item ?? {}), [item]); const [searchStarted, setSearchStarted] = useState(false);
const [id, setId] = useState<number | undefined>(undefined); const itemId = useMemo(() => GetItemId(item), [item]);
const results = useSearch(id); const results = useSearch(searchStarted ? itemId : undefined);
const isStale = results.data === undefined; const haveResult = results.data !== undefined;
const search = useCallback(() => { const search = useCallback(() => {
setId(itemId); setSearchStarted(true);
results.refetch(); results.refetch();
}, [itemId, results]); }, [results]);
const columns = useMemo<Column<SearchResultType>[]>( const columns = useMemo<Column<SearchResultType>[]>(
() => [ () => [
@ -190,6 +190,14 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
const bSceneNameAvailable = const bSceneNameAvailable =
isString(item.sceneName) && item.sceneName.length !== 0; isString(item.sceneName) && item.sceneName.length !== 0;
const searchButtonText = useMemo(() => {
if (results.isFetching) {
return "Searching";
}
return searchStarted ? "Search Again" : "Search";
}, [results.isFetching, searchStarted]);
return ( return (
<Stack> <Stack>
<Alert <Alert
@ -201,7 +209,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
<Divider hidden={!bSceneNameAvailable} my="xs"></Divider> <Divider hidden={!bSceneNameAvailable} my="xs"></Divider>
<Code hidden={!bSceneNameAvailable}>{item?.sceneName}</Code> <Code hidden={!bSceneNameAvailable}>{item?.sceneName}</Code>
</Alert> </Alert>
<Collapse in={!isStale && !results.isFetching}> <Collapse in={haveResult && !results.isFetching}>
<PageTable <PageTable
tableStyles={{ emptyText: "No result", placeholder: 10 }} tableStyles={{ emptyText: "No result", placeholder: 10 }}
columns={columns} columns={columns}
@ -210,7 +218,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
</Collapse> </Collapse>
<Divider></Divider> <Divider></Divider>
<Button loading={results.isFetching} fullWidth onClick={search}> <Button loading={results.isFetching} fullWidth onClick={search}>
{isStale ? "Search" : "Search Again"} {searchButtonText}
</Button> </Button>
</Stack> </Stack>
); );