From 15013d6c5dbff15704c7c30d261d68a265e7f2d7 Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Mon, 14 Dec 2020 09:38:38 +0000
Subject: [PATCH] fix(frontend): encode special characters in search input to
 prevent crashing router

re #252
---
 src/hooks/useSearchInput.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useSearchInput.ts b/src/hooks/useSearchInput.ts
index 61df92e0a..b761928dd 100644
--- a/src/hooks/useSearchInput.ts
+++ b/src/hooks/useSearchInput.ts
@@ -7,6 +7,10 @@ import type { Nullable } from '../utils/typeHelpers';
 
 type Url = string | UrlObject;
 
+const encodeURIExtraParams = (string: string): string => {
+  return encodeURIComponent(string).replace(/!/g, '%21');
+};
+
 interface SearchObject {
   searchValue: string;
   searchOpen: boolean;
@@ -35,14 +39,17 @@ const useSearchInput = (): SearchObject => {
       if (router.pathname.startsWith('/search')) {
         router.replace({
           pathname: router.pathname,
-          query: { ...router.query, query: debouncedValue },
+          query: {
+            ...router.query,
+            query: encodeURIExtraParams(debouncedValue),
+          },
         });
       } else {
         setLastRoute(router.asPath);
         router
           .push({
             pathname: '/search',
-            query: { query: debouncedValue },
+            query: { query: encodeURIExtraParams(debouncedValue) },
           })
           .then(() => window.scrollTo(0, 0));
       }
@@ -85,8 +92,12 @@ const useSearchInput = (): SearchObject => {
    * is on /search
    */
   useEffect(() => {
-    if (router.query.query !== debouncedValue) {
-      setSearchValue((router.query.query as string) ?? '');
+    if (router.query.query !== encodeURIExtraParams(debouncedValue)) {
+      setSearchValue(
+        router.query.query
+          ? decodeURIComponent(router.query.query as string)
+          : ''
+      );
 
       if (!router.pathname.startsWith('/search') && !router.query.query) {
         setIsOpen(false);