diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx index 3e431da59..2f56d3b52 100644 --- a/frontend/src/components/modals/ManualSearchModal.tsx +++ b/frontend/src/components/modals/ManualSearchModal.tsx @@ -37,6 +37,12 @@ import { isMovie } from "../../utilites"; type SupportType = Item.Movie | Item.Episode; +enum SearchState { + Ready, + Searching, + Finished, +} + interface Props { onSelect: (item: SupportType, result: SearchResultType) => Promise; onDownload?: () => void; @@ -48,35 +54,29 @@ export const ManualSearchModal: FunctionComponent = ( const { onSelect, onDownload, ...modal } = props; const [result, setResult] = useState([]); - const [searching, setSearch] = useState(false); - const [start, setStart] = useState(false); + const [searchState, setSearchState] = useState(SearchState.Ready); const item = usePayload(modal.modalKey); - const search = useCallback(() => { + const search = useCallback(async () => { if (item) { - setStart(true); - setSearch(true); - let promise: Promise; + setSearchState(SearchState.Searching); + let results: SearchResultType[] = []; if (isMovie(item)) { - promise = ProvidersApi.movies(item.radarrId); + results = await ProvidersApi.movies(item.radarrId); } else { - promise = ProvidersApi.episodes(item.sonarrEpisodeId); + results = await ProvidersApi.episodes(item.sonarrEpisodeId); } - promise.then((data) => setResult(data)).finally(() => setSearch(false)); + setResult(results); + setSearchState(SearchState.Finished); } }, [item]); - const reset = useCallback(() => { - setStart(false); - setSearch(false); - }, []); - useEffect(() => { - if (item) { - reset(); + if (item !== null) { + setSearchState(SearchState.Ready); } - }, [item, reset]); + }, [item]); const columns = useMemo[]>( () => [ @@ -187,7 +187,7 @@ export const ManualSearchModal: FunctionComponent = ( ); const content = useMemo(() => { - if (!start) { + if (searchState === SearchState.Ready) { return (

{item?.path ?? ""}

@@ -196,7 +196,7 @@ export const ManualSearchModal: FunctionComponent = (
); - } else if (searching) { + } else if (searchState === SearchState.Searching) { return ; } else { return ( @@ -211,15 +211,19 @@ export const ManualSearchModal: FunctionComponent = ( ); } - }, [start, searching, columns, result, search, item?.path, onDownload]); + }, [searchState, columns, result, search, item?.path, onDownload]); const footer = useMemo( () => ( - ), - [start, reset] + [searchState, search] ); const title = useMemo(() => { @@ -239,7 +243,7 @@ export const ManualSearchModal: FunctionComponent = ( return (