Fix search page crash when search term contains slash

uses https://reactrouter.com/6.8.1/route/route#splats
stashapp · Jan 7, 2025 · 33078f8 · 33078f8
1 parent a9163b5
commit 33078f8
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/frontend/src/components/searchField/SearchField.tsx b/frontend/src/components/searchField/SearchField.tsx
@@ -212,7 +212,7 @@ const SearchField: FC<SearchFieldProps> = ({
 
   const handleChange = (result: OnChangeValue<SearchResult, false>) => {
     if (result?.type === "ALL")
-      return navigate(createHref(ROUTE_SEARCH, { term: searchTerm.current }));
+      return navigate(createHref(ROUTE_SEARCH, { "*": searchTerm.current }));
 
     if (result?.value) {
       if (valueIsPerformer(result.value)) onClickPerformer?.(result.value);
@@ -225,7 +225,7 @@ const SearchField: FC<SearchFieldProps> = ({
 
   const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {
     if (e.key === "Enter" && searchTerm.current && showAllLink) {
-      navigate(createHref(ROUTE_SEARCH, { term: searchTerm.current }));
+      navigate(createHref(ROUTE_SEARCH, { "*": searchTerm.current }));
       selectRef?.current?.blur();
     }
   };

diff --git a/frontend/src/constants/route.ts b/frontend/src/constants/route.ts
@@ -43,7 +43,7 @@ export const ROUTE_FORGOT_PASSWORD = "/forgot-password";
 export const ROUTE_RESET_PASSWORD = "/reset-password";
 export const ROUTE_CONFIRM_EMAIL = "/users/confirm-email";
 export const ROUTE_CHANGE_EMAIL = "/users/change-email";
-export const ROUTE_SEARCH = "/search/:term";
+export const ROUTE_SEARCH = "/search/*";
 export const ROUTE_SEARCH_INDEX = "/search/";
 export const ROUTE_VERSION = "/version";
 export const ROUTE_SITE = "/sites/:id";

diff --git a/frontend/src/pages/search/Search.tsx b/frontend/src/pages/search/Search.tsx
@@ -127,7 +127,7 @@ const SceneCard: FC<{ scene: Scene }> = ({ scene }) => (
 );
 
 const Search: FC = () => {
-  const { term } = useParams();
+  const { "*": term } = useParams();
   const navigate = useNavigate();
   const { loading, data } = useSearchAll(
     {
@@ -143,7 +143,7 @@ const Search: FC = () => {
         (searchTerm: string) =>
           navigate(
             searchTerm
-              ? createHref(ROUTE_SEARCH, { term: searchTerm })
+              ? createHref(ROUTE_SEARCH, { "*": searchTerm })
               : ROUTE_SEARCH_INDEX,
             { replace: true },
           ),