From 26683d21b2d003e6132bcffd498fa4915179c53a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lio=20Kr=C3=B6ger?= <hydralauncher@proton.me>
Date: Tue, 16 Apr 2024 10:30:28 +0100
Subject: [PATCH] fix: use search params for search

---
 src/renderer/app.tsx                            |  6 +++++-
 src/renderer/main.tsx                           |  2 +-
 src/renderer/pages/catalogue/search-results.tsx | 12 ++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index f705cf716..0680f506f 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -73,7 +73,11 @@ export function App() {
         return;
       }
 
-      navigate(`/search/${query}`, {
+      const searchParams = new URLSearchParams({
+        query,
+      });
+
+      navigate(`/search?${searchParams.toString()}`, {
         replace: location.pathname.startsWith("/search"),
       });
     },
diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx
index 3bad1a79d..4839740f2 100644
--- a/src/renderer/main.tsx
+++ b/src/renderer/main.tsx
@@ -45,7 +45,7 @@ const router = createHashRouter([
         Component: GameDetails,
       },
       {
-        path: "/search/:query",
+        path: "/search",
         Component: SearchResults,
       },
       {
diff --git a/src/renderer/pages/catalogue/search-results.tsx b/src/renderer/pages/catalogue/search-results.tsx
index d9d868acb..75d3e1d94 100644
--- a/src/renderer/pages/catalogue/search-results.tsx
+++ b/src/renderer/pages/catalogue/search-results.tsx
@@ -12,14 +12,14 @@ import { useAppDispatch } from "@renderer/hooks";
 import { vars } from "@renderer/theme.css";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import * as styles from "./catalogue.css";
 
 export function SearchResults() {
   const dispatch = useAppDispatch();
 
   const { t } = useTranslation("catalogue");
-  const { query } = useParams();
+  const [searchParams] = useSearchParams();
 
   const [searchResults, setSearchResults] = useState<CatalogueEntry[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -39,7 +39,7 @@ export function SearchResults() {
 
     debouncedFunc.current = debounce(() => {
       window.electron
-        .searchGames(query)
+        .searchGames(searchParams.get("query"))
         .then((results) => {
           setSearchResults(results);
         })
@@ -49,11 +49,11 @@ export function SearchResults() {
     }, 300);
 
     debouncedFunc.current();
-  }, [query, dispatch]);
+  }, [searchParams, dispatch]);
 
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
-      <main className={styles.content}>
+      <section className={styles.content}>
         <section className={styles.cards({ searching: false })}>
           {isLoading &&
             Array.from({ length: 12 }).map((_, index) => (
@@ -81,7 +81,7 @@ export function SearchResults() {
             <p>{t("no_results")}</p>
           </div>
         )}
-      </main>
+      </section>
     </SkeletonTheme>
   );
 }