From 2f33517a503a319d9565a85ce49a9f5fa4ded8b9 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 9 Sep 2026 08:05:27 +0300
Subject: [PATCH] Use actual search params for entity search etc. to handle
 special characters

---
 app/components/elements/OrganizationSearch.tsx |  8 +++++++-
 app/components/elements/TeamSearch.tsx         |  8 +++++++-
 app/components/elements/UserSearch.tsx         |  8 +++++++-
 app/modules/twitch/streams.ts                  | 10 +++++++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/app/components/elements/OrganizationSearch.tsx b/app/components/elements/OrganizationSearch.tsx
index c38c9a88a..0cc4b1fb6 100644
--- a/app/components/elements/OrganizationSearch.tsx
+++ b/app/components/elements/OrganizationSearch.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useFetcher } from "react-router";
 import type { SearchLoaderData } from "~/features/search/routes/search";
+import { searchSearchParams } from "~/features/search/search-search-params";
 import {
 	SearchSelect,
 	type SearchSelectFieldProps,
@@ -29,7 +30,12 @@ export function OrganizationSearch({
 	const initialOrganization = useInitialOrganization(initialOrganizationId);
 
 	const search = useEntitySearch<OrganizationSearchResult>({
-		buildUrl: (query) => `/search?q=${query}&type=organizations&limit=6`,
+		buildUrl: (query) =>
+			searchSearchParams.href("/search", {
+				q: query,
+				type: "organizations",
+				limit: 6,
+			}),
 		parseResults: (data, query) =>
 			parseOrganizationResults(data, query, initialOrganization),
 		initialItem: initialOrganization,
diff --git a/app/components/elements/TeamSearch.tsx b/app/components/elements/TeamSearch.tsx
index d998bd4c1..af21d94ca 100644
--- a/app/components/elements/TeamSearch.tsx
+++ b/app/components/elements/TeamSearch.tsx
@@ -1,5 +1,6 @@
 import type * as React from "react";
 import type { SearchLoaderData } from "~/features/search/routes/search";
+import { searchSearchParams } from "~/features/search/search-search-params";
 import {
 	SearchSelect,
 	type SearchSelectFieldProps,
@@ -28,7 +29,12 @@ export function TeamSearch({
 	...rest
 }: TeamSearchProps) {
 	const search = useEntitySearch<TeamSearchResult>({
-		buildUrl: (query) => `/search?q=${query}&type=teams&limit=6`,
+		buildUrl: (query) =>
+			searchSearchParams.href("/search", {
+				q: query,
+				type: "teams",
+				limit: 6,
+			}),
 		parseResults: parseTeamResults,
 		initialItem: initialTeam as TeamSearchResult | undefined,
 		initialSelectedId: initialTeam?.id,
diff --git a/app/components/elements/UserSearch.tsx b/app/components/elements/UserSearch.tsx
index 4e6f9a0ba..9211d57f3 100644
--- a/app/components/elements/UserSearch.tsx
+++ b/app/components/elements/UserSearch.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useFetcher } from "react-router";
 import type { SearchLoaderData } from "~/features/search/routes/search";
+import { searchSearchParams } from "~/features/search/search-search-params";
 import { Avatar } from "../Avatar";
 import {
 	SearchSelect,
@@ -30,7 +31,12 @@ export function UserSearch({
 	const initialUser = useInitialUser(initialUserId);
 
 	const search = useEntitySearch<UserSearchResult>({
-		buildUrl: (query) => `/search?q=${query}&type=users&limit=6`,
+		buildUrl: (query) =>
+			searchSearchParams.href("/search", {
+				q: query,
+				type: "users",
+				limit: 6,
+			}),
 		parseResults: (data, query) => parseUserResults(data, query, initialUser),
 		initialItem: initialUser,
 		initialSelectedId: initialUserId,
diff --git a/app/modules/twitch/streams.ts b/app/modules/twitch/streams.ts
index 0c793a526..839f4b751 100644
--- a/app/modules/twitch/streams.ts
+++ b/app/modules/twitch/streams.ts
@@ -67,10 +67,14 @@ async function getAllStreams() {
 }
 
 async function getStreamsChunk(cursor?: string): Promise<StreamsResponse> {
+	const searchParams = new URLSearchParams({
+		game_id: SPLATOON_3_TWITCH_GAME_ID,
+		first: "100",
+		after: cursor ?? "",
+	});
+
 	const res = await twitchFetch(
-		`https://api.twitch.tv/helix/streams?game_id=${SPLATOON_3_TWITCH_GAME_ID}&first=100&after=${
-			cursor ?? ""
-		}`,
+		`https://api.twitch.tv/helix/streams?${searchParams}`,
 	);
 
 	const parsed = v.safeParse(streamsSchema, await res.json());