From f74be9a4919ef255be31d920fa6023439be7bc41 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 10 Aug 2022 15:06:32 -0700
Subject: [PATCH] Fix browser redirect warning

---
 web/components/contract-search.tsx      | 19 ++++++++-----------
 web/components/editor/market-modal.tsx  |  1 +
 web/hooks/use-sort-and-query-params.tsx | 25 ++++++++++++++++++-------
 web/pages/contract-search-firestore.tsx |  6 ++----
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx
index bf929fe6..4de232fc 100644
--- a/web/components/contract-search.tsx
+++ b/web/components/contract-search.tsx
@@ -2,7 +2,11 @@
 import algoliasearch from 'algoliasearch/lite'
 
 import { Contract } from 'common/contract'
-import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
+import {
+  QuerySortOptions,
+  Sort,
+  useQueryAndSortParams,
+} from '../hooks/use-sort-and-query-params'
 import {
   ContractHighlightOptions,
   ContractsGrid,
@@ -45,11 +49,7 @@ export const DEFAULT_SORT = 'score'
 type filter = 'personal' | 'open' | 'closed' | 'resolved' | 'all'
 
 export function ContractSearch(props: {
-  querySortOptions?: {
-    defaultSort: Sort
-    defaultFilter?: filter
-    shouldLoadFromStorage?: boolean
-  }
+  querySortOptions?: { defaultFilter?: filter } & QuerySortOptions
   additionalFilter?: {
     creatorId?: string
     tag?: string
@@ -100,11 +100,8 @@ export function ContractSearch(props: {
 
   const follows = useFollows(user?.id)
 
-  const { shouldLoadFromStorage, defaultSort } = querySortOptions ?? {}
-  const { query, setQuery, sort, setSort } = useQueryAndSortParams({
-    defaultSort,
-    shouldLoadFromStorage,
-  })
+  const { query, setQuery, sort, setSort } =
+    useQueryAndSortParams(querySortOptions)
 
   const [filter, setFilter] = useState<filter>(
     querySortOptions?.defaultFilter ?? 'open'
diff --git a/web/components/editor/market-modal.tsx b/web/components/editor/market-modal.tsx
index 21424c02..6ea9ee6f 100644
--- a/web/components/editor/market-modal.tsx
+++ b/web/components/editor/market-modal.tsx
@@ -76,6 +76,7 @@ export function MarketModal(props: {
             }
             showPlaceHolder
             cardHideOptions={{ hideGroupLink: true, hideQuickBet: true }}
+            querySortOptions={{ disableQueryString: true }}
             highlightOptions={{
               contractIds: contracts.map((c) => c.id),
               highlightClassName:
diff --git a/web/hooks/use-sort-and-query-params.tsx b/web/hooks/use-sort-and-query-params.tsx
index c4bce0c0..e917e4af 100644
--- a/web/hooks/use-sort-and-query-params.tsx
+++ b/web/hooks/use-sort-and-query-params.tsx
@@ -25,12 +25,18 @@ export function getSavedSort() {
   }
 }
 
-export function useQueryAndSortParams(options?: {
+export interface QuerySortOptions {
   defaultSort?: Sort
   shouldLoadFromStorage?: boolean
-}) {
-  const { defaultSort = DEFAULT_SORT, shouldLoadFromStorage = true } =
-    options ?? {}
+  /** Use normal react state instead of url query string */
+  disableQueryString?: boolean
+}
+
+export function useQueryAndSortParams({
+  defaultSort = DEFAULT_SORT,
+  shouldLoadFromStorage = true,
+  disableQueryString,
+}: QuerySortOptions = {}) {
   const router = useRouter()
 
   const { s: sort, q: query } = router.query as {
@@ -68,7 +74,9 @@ export function useQueryAndSortParams(options?: {
 
   const setQuery = (query: string | undefined) => {
     setQueryState(query)
-    pushQuery(query)
+    if (!disableQueryString) {
+      pushQuery(query)
+    }
   }
 
   useEffect(() => {
@@ -86,10 +94,13 @@ export function useQueryAndSortParams(options?: {
     }
   })
 
+  // use normal state if querydisableQueryString
+  const [sortState, setSortState] = useState(defaultSort)
+
   return {
-    sort: sort ?? defaultSort,
+    sort: disableQueryString ? sortState : sort ?? defaultSort,
     query: queryState ?? '',
-    setSort,
+    setSort: disableQueryString ? setSortState : setSort,
     setQuery,
   }
 }
diff --git a/web/pages/contract-search-firestore.tsx b/web/pages/contract-search-firestore.tsx
index e2ca308c..0e8f861b 100644
--- a/web/pages/contract-search-firestore.tsx
+++ b/web/pages/contract-search-firestore.tsx
@@ -4,6 +4,7 @@ import { sortBy } from 'lodash'
 import { ContractsGrid } from 'web/components/contract/contracts-grid'
 import { useContracts } from 'web/hooks/use-contracts'
 import {
+  QuerySortOptions,
   Sort,
   useQueryAndSortParams,
 } from 'web/hooks/use-sort-and-query-params'
@@ -11,10 +12,7 @@ import {
 const MAX_CONTRACTS_RENDERED = 100
 
 export default function ContractSearchFirestore(props: {
-  querySortOptions?: {
-    defaultSort: Sort
-    shouldLoadFromStorage?: boolean
-  }
+  querySortOptions?: QuerySortOptions
   additionalFilter?: {
     creatorId?: string
     tag?: string