From a343f8ad915491a9c81512c7e541a1dac8906025 Mon Sep 17 00:00:00 2001 From: Brandon Cohen Date: Fri, 13 Jan 2023 18:21:54 -0500 Subject: [PATCH] fix: prevent double encode if we are on /search endpoint (#3238) --- .../Discover/CreateSlider/index.tsx | 2 +- .../Discover/DiscoverMovieKeyword/index.tsx | 3 +-- .../Discover/DiscoverTvKeyword/index.tsx | 3 +-- src/components/Discover/index.tsx | 2 +- src/components/Selector/index.tsx | 2 +- src/hooks/useDiscover.ts | 18 ++++++++++++++- src/hooks/useSearchInput.ts | 23 +++---------------- 7 files changed, 25 insertions(+), 28 deletions(-) diff --git a/src/components/Discover/CreateSlider/index.tsx b/src/components/Discover/CreateSlider/index.tsx index 3f70c980e..24b9d3fdc 100644 --- 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 index 9d22ba645..7ae2e989f 100644 --- 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 index ee6186f29..0c0411386 100644 --- 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 index 64ddf80c3..f7f5aeb79 100644 --- 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 index 87634d39b..3a5227793 100644 --- 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 index 163a1cc5e..f9aff8e29 100644 --- 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 { firstResultData?: BaseSearchResult & 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, diff --git a/src/hooks/useSearchInput.ts b/src/hooks/useSearchInput.ts index a27a6d109..a60b28c07 100644 --- 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,7 +38,7 @@ const useSearchInput = (): SearchObject => { pathname: router.pathname, query: { ...router.query, - query: encodeURIExtraParams(debouncedValue), + query: debouncedValue, }, }); } else { @@ -63,7 +46,7 @@ const useSearchInput = (): SearchObject => { 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)