feat: abort controller and i18n

src/locales/en/translation.json

@@ -7,7 +7,8 @@
     "featured": "Featured",
     "trending": "Trending",
     "surprise_me": "Surprise me",
-    "no_results": "No results found"
+    "no_results": "No results found",
+    "start_typing": "Starting typing to search..."
   },
   "sidebar": {
     "catalogue": "Catalogue",

src/locales/pt-BR/translation.json

@@ -7,7 +7,8 @@
     "featured": "Destaques",
     "trending": "Populares",
     "surprise_me": "Surpreenda-me",
-    "no_results": "Nenhum resultado encontrado"
+    "no_results": "Nenhum resultado encontrado",
+    "start_typing": "Comece a digitar para pesquisar…"
   },
   "sidebar": {
     "catalogue": "Catálogo",

src/locales/pt-PT/translation.json

@@ -7,7 +7,8 @@
     "featured": "Destaques",
     "trending": "Populares",
     "surprise_me": "Surpreende-me",
-    "no_results": "Nenhum resultado encontrado"
+    "no_results": "Nenhum resultado encontrado",
+    "start_typing": "Comece a digitar para pesquisar…"
   },
   "sidebar": {
     "catalogue": "Catálogo",

src/renderer/src/pages/home/search-results.tsx

@@ -25,9 +25,10 @@ export function SearchResults() {
 
   const [searchResults, setSearchResults] = useState<CatalogueEntry[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-  const [showMessage, setShowMessage] = useState(false);
+  const [showTypingMessage, setShowTypingMessage] = useState(false);
 
   const debouncedFunc = useRef<DebouncedFunc<() => void> | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   const navigate = useNavigate();
 
@@ -36,40 +37,36 @@ export function SearchResults() {
     navigate(buildGameDetailsPath(game));
   };
 
-  const fetchGames = (query: string) => {
-    window.electron
-      .searchGames(query)
-      .then((results) => {
-        console.log(
-          "original query: ",
-          query,
-          "current value: ",
-          searchParams.get("query")
-        );
-        if (query != searchParams.get("query")) return;
-        setSearchResults(results);
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  };
-
   useEffect(() => {
     setIsLoading(true);
     if (debouncedFunc.current) debouncedFunc.current.cancel();
+    if (abortControllerRef.current) abortControllerRef.current.abort();
+
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
 
     debouncedFunc.current = debounce(() => {
       const query = searchParams.get("query") ?? "";
 
       if (query.length < 3) {
         setIsLoading(false);
-        setShowMessage(true);
+        setShowTypingMessage(true);
         setSearchResults([]);
         return;
       }
 
-      setShowMessage(false);
+      setShowTypingMessage(false);
-      fetchGames(query);
+      window.electron
+        .searchGames(query)
+        .then((results) => {
+          if (abortController.signal.aborted) return;
+
+          setSearchResults(results);
+          setIsLoading(false);
+        })
+        .catch(() => {
+          setIsLoading(false);
+        });
     }, 500);
 
     debouncedFunc.current();
@@ -97,11 +94,11 @@ export function SearchResults() {
           )}
         </section>
 
-        {!isLoading && showMessage && (
+        {!isLoading && showTypingMessage && (
           <div className={styles.noResults}>
             <SearchIcon size={56} />
 
-            <p>{"Comece a digitar para pesquisar…"}</p>
+            <p>{t("start_typing")}</p>
           </div>
         )}