From 0306456b5e570cbad03352fd85cb472cfa6e7418 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Wed, 13 Mar 2024 14:46:59 +0100
Subject: [PATCH] fix(search-bar): properly escape and unescape URLs

---
 site/search/Autocomplete.tsx | 11 +++++++----
 site/search/SearchPanel.tsx  |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/site/search/Autocomplete.tsx b/site/search/Autocomplete.tsx
index 3f30becbde1..cb53f62736d 100644
--- a/site/search/Autocomplete.tsx
+++ b/site/search/Autocomplete.tsx
@@ -25,6 +25,7 @@ import {
     getIndexName,
     parseIndexName,
 } from "./searchClient.js"
+import { queryParamsToStr } from "@ourworldindata/utils"
 
 type BaseItem = Record<string, unknown>
 
@@ -35,7 +36,9 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
         return {
             ...source,
             onSelect({ item, navigator }) {
-                navigator.navigate({ itemUrl: `/search?q=${item.id}` } as any)
+                navigator.navigate({
+                    itemUrl: `/search${queryParamsToStr({ q: item.id })}`,
+                } as any)
             },
             templates: {
                 ...source.templates,
@@ -81,7 +84,7 @@ const FeaturedSearchesSource: AutocompleteSource<BaseItem> = {
         return ["CO2", "Energy", "Education", "Poverty", "Democracy"].map(
             (term) => ({
                 title: term,
-                slug: `/search?q=${term}`,
+                slug: `/search${queryParamsToStr({ q: term })}`,
             })
         )
     },
@@ -184,7 +187,7 @@ const AllResultsSource: AutocompleteSource<BaseItem> = {
     getItems({ query }) {
         return [
             {
-                slug: `/search?q=${encodeURI(query)}`,
+                slug: `/search${queryParamsToStr({ q: query })}`,
                 title: `All search results for "${query}"`,
             },
         ]
@@ -242,7 +245,7 @@ export function Autocomplete({
             onSubmit({ state, navigator }) {
                 if (!state.query) return
                 navigator.navigate({
-                    itemUrl: `/search?q=${state.query}`,
+                    itemUrl: `/search${queryParamsToStr({ q: state.query })}`,
                     // this method is incorrectly typed - `item` and `state` are optional
                 } as any)
             },
diff --git a/site/search/SearchPanel.tsx b/site/search/SearchPanel.tsx
index 1056721a26b..fa8f7556297 100644
--- a/site/search/SearchPanel.tsx
+++ b/site/search/SearchPanel.tsx
@@ -426,7 +426,7 @@ export class InstantSearchContainer extends React.Component {
         if (params.q) {
             // Algolia runs the search and fills the searchbox input regardless
             // we just need this class to be aware that a query exists so that it doesn't hide the results
-            this.inputValue = decodeURI(params.q)
+            this.inputValue = params.q
         }
     }