From 714c46444aacc16e78b7dc5d7184a81d7b8f8aea Mon Sep 17 00:00:00 2001
From: LASER-Yi <liangyi0007@gmail.com>
Date: Sun, 3 Sep 2023 15:54:23 +0800
Subject: [PATCH] Improve manual search modal. Change cache behavior of manual
 search api to no cache

---
 frontend/src/apis/hooks/providers.ts          |  4 ++--
 .../components/modals/ManualSearchModal.tsx   | 24 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/apis/hooks/providers.ts b/frontend/src/apis/hooks/providers.ts
index f1daf9f37..c804a9a8e 100644
--- a/frontend/src/apis/hooks/providers.ts
+++ b/frontend/src/apis/hooks/providers.ts
@@ -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,
     }
   );
 }
diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx
index 7760fb26e..fa428c1a0 100644
--- a/frontend/src/components/modals/ManualSearchModal.tsx
+++ b/frontend/src/components/modals/ManualSearchModal.tsx
@@ -40,18 +40,18 @@ interface Props<T extends SupportType> {
 function ManualSearchView<T extends SupportType>(props: Props<T>) {
   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(() => {
-    setId(itemId);
+    setSearchStarted(true);
     results.refetch();
-  }, [itemId, results]);
+  }, [results]);
 
   const columns = useMemo<Column<SearchResultType>[]>(
     () => [
@@ -190,6 +190,14 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
   const bSceneNameAvailable =
     isString(item.sceneName) && item.sceneName.length !== 0;
 
+  const searchButtonText = useMemo(() => {
+    if (results.isFetching) {
+      return "Searching";
+    }
+
+    return searchStarted ? "Search Again" : "Search";
+  }, [results.isFetching, searchStarted]);
+
   return (
     <Stack>
       <Alert
@@ -201,7 +209,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
         <Divider hidden={!bSceneNameAvailable} my="xs"></Divider>
         <Code hidden={!bSceneNameAvailable}>{item?.sceneName}</Code>
       </Alert>
-      <Collapse in={!isStale && !results.isFetching}>
+      <Collapse in={haveResult && !results.isFetching}>
         <PageTable
           tableStyles={{ emptyText: "No result", placeholder: 10 }}
           columns={columns}
@@ -210,7 +218,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
       </Collapse>
       <Divider></Divider>
       <Button loading={results.isFetching} fullWidth onClick={search}>
-        {isStale ? "Search" : "Search Again"}
+        {searchButtonText}
       </Button>
     </Stack>
   );