Use actual search params for entity search etc. to handle special characters

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,

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,

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,

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());