fix: prevent double encode if we are on /search endpoint (#3238)

Fallenbagel · Jan 13, 2023 · a343f8a · a343f8a
1 parent c2a1a20
commit a343f8a
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 28 deletions.
diff --git a/src/components/Discover/CreateSlider/index.tsx b/src/components/Discover/CreateSlider/index.tsx
@@ -2,7 +2,7 @@ import Button from '@app/components/Common/Button';
 import Tooltip from '@app/components/Common/Tooltip';
 import { sliderTitles } from '@app/components/Discover/constants';
 import MediaSlider from '@app/components/MediaSlider';
-import { encodeURIExtraParams } from '@app/hooks/useSearchInput';
+import { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import type {
   TmdbCompanySearchResponse,
   TmdbGenre,

diff --git a/src/components/Discover/DiscoverMovieKeyword/index.tsx b/src/components/Discover/DiscoverMovieKeyword/index.tsx
@@ -1,8 +1,7 @@
 import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
-import useDiscover from '@app/hooks/useDiscover';
-import { encodeURIExtraParams } from '@app/hooks/useSearchInput';
+import useDiscover, { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import type { TmdbKeyword } from '@server/api/themoviedb/interfaces';

diff --git a/src/components/Discover/DiscoverTvKeyword/index.tsx b/src/components/Discover/DiscoverTvKeyword/index.tsx
@@ -1,8 +1,7 @@
 import Header from '@app/components/Common/Header';
 import ListView from '@app/components/Common/ListView';
 import PageTitle from '@app/components/Common/PageTitle';
-import useDiscover from '@app/hooks/useDiscover';
-import { encodeURIExtraParams } from '@app/hooks/useSearchInput';
+import useDiscover, { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import type { TmdbKeyword } from '@server/api/themoviedb/interfaces';

diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
@@ -14,7 +14,7 @@ import RecentRequestsSlider from '@app/components/Discover/RecentRequestsSlider'
 import StudioSlider from '@app/components/Discover/StudioSlider';
 import TvGenreSlider from '@app/components/Discover/TvGenreSlider';
 import MediaSlider from '@app/components/MediaSlider';
-import { encodeURIExtraParams } from '@app/hooks/useSearchInput';
+import { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import { Transition } from '@headlessui/react';

diff --git a/src/components/Selector/index.tsx b/src/components/Selector/index.tsx
@@ -1,4 +1,4 @@
-import { encodeURIExtraParams } from '@app/hooks/useSearchInput';
+import { encodeURIExtraParams } from '@app/hooks/useDiscover';
 import type {
   TmdbCompanySearchResponse,
   TmdbGenre,

diff --git a/src/hooks/useDiscover.ts b/src/hooks/useDiscover.ts
@@ -1,4 +1,3 @@
-import { encodeURIExtraParams } from '@app/hooks/useSearchInput';
 import { MediaStatus } from '@server/constants/media';
 import useSWRInfinite from 'swr/infinite';
 import useSettings from './useSettings';
@@ -28,6 +27,23 @@ interface DiscoverResult<T, S> {
   firstResultData?: BaseSearchResult<T> & S;
 }
 
+const extraEncodes: [RegExp, string][] = [
+  [/\(/g, '%28'],
+  [/\)/g, '%29'],
+  [/!/g, '%21'],
+  [/\*/g, '%2A'],
+];
+
+export const encodeURIExtraParams = (string: string): string => {
+  let finalString = encodeURIComponent(string);
+
+  extraEncodes.forEach((encode) => {
+    finalString = finalString.replace(encode[0], encode[1]);
+  });
+
+  return finalString;
+};
+
 const useDiscover = <
   T extends BaseMedia,
   S = Record<string, never>,

diff --git a/src/hooks/useSearchInput.ts b/src/hooks/useSearchInput.ts
@@ -8,23 +8,6 @@ import useDebouncedState from './useDebouncedState';
 
 type Url = string | UrlObject;
 
-const extraEncodes: [RegExp, string][] = [
-  [/\(/g, '%28'],
-  [/\)/g, '%29'],
-  [/!/g, '%21'],
-  [/\*/g, '%2A'],
-];
-
-export const encodeURIExtraParams = (string: string): string => {
-  let finalString = encodeURIComponent(string);
-
-  extraEncodes.forEach((encode) => {
-    finalString = finalString.replace(encode[0], encode[1]);
-  });
-
-  return finalString;
-};
-
 interface SearchObject {
   searchValue: string;
   searchOpen: boolean;
@@ -55,15 +38,15 @@ const useSearchInput = (): SearchObject => {
           pathname: router.pathname,
           query: {
             ...router.query,
-            query: encodeURIExtraParams(debouncedValue),
+            query: debouncedValue,
           },
         });
       } else {
         setLastRoute(router.asPath);
         router
           .push({
             pathname: '/search',
-            query: { query: encodeURIExtraParams(debouncedValue) },
+            query: { query: debouncedValue },
           })
           .then(() => window.scrollTo(0, 0));
       }
@@ -106,7 +89,7 @@ const useSearchInput = (): SearchObject => {
    * is on /search
    */
   useEffect(() => {
-    if (router.query.query !== encodeURIExtraParams(debouncedValue)) {
+    if (router.query.query !== debouncedValue) {
       setSearchValue(
         router.query.query
           ? decodeURIComponent(router.query.query as string)