Respect options for persisting contract search

web/components/contract-search.tsx

@@ -16,10 +16,10 @@ import { useFollows } from 'web/hooks/use-follows'
 import {
   storageStore,
   historyStore,
-  urlParamsStore,
+  urlParamStore,
   usePersistentState,
 } from 'web/hooks/use-persistent-state'
-import { safeSessionStorage } from 'web/lib/util/local'
+import { safeLocalStorage } from 'web/lib/util/local'
 import { track, trackCallback } from 'web/lib/service/analytics'
 import ContractSearchFirestore from 'web/pages/contract-search-firestore'
 import { useMemberGroups } from 'web/hooks/use-group'
@@ -81,8 +81,7 @@ export function ContractSearch(props: {
   }
   headerClassName?: string
   persistPrefix?: string
-  useQuerySortLocalStorage?: boolean
+  useQueryUrlParam?: boolean
-  useQuerySortUrlParams?: boolean
   isWholePage?: boolean
   maxItems?: number
   noControls?: boolean
@@ -98,7 +97,7 @@ export function ContractSearch(props: {
     highlightOptions,
     headerClassName,
     persistPrefix,
-    useQuerySortUrlParams,
+    useQueryUrlParam,
     isWholePage,
     maxItems,
     noControls,
@@ -110,7 +109,9 @@ export function ContractSearch(props: {
       pages: [] as Contract[][],
       showTime: null as ShowTime | null,
     },
-    { key: `${persistPrefix}-search`, store: historyStore() }
+    !persistPrefix
+      ? undefined
+      : { key: `${persistPrefix}-search`, store: historyStore() }
   )
 
   const searchParams = useRef<SearchParameters | null>(null)
@@ -202,7 +203,7 @@ export function ContractSearch(props: {
         additionalFilter={additionalFilter}
         hideOrderSelector={hideOrderSelector}
         persistPrefix={persistPrefix ? `${persistPrefix}-controls` : undefined}
-        useQuerySortUrlParams={useQuerySortUrlParams}
+        useQueryUrlParam={useQueryUrlParam}
         user={user}
         onSearchParametersChanged={onSearchParametersChanged}
         noControls={noControls}
@@ -227,7 +228,7 @@ function ContractSearchControls(props: {
   hideOrderSelector?: boolean
   onSearchParametersChanged: (params: SearchParameters) => void
   persistPrefix?: string
-  useQuerySortUrlParams?: boolean
+  useQueryUrlParam?: boolean
   user?: User | null
   noControls?: boolean
 }) {
@@ -239,26 +240,34 @@ function ContractSearchControls(props: {
     hideOrderSelector,
     onSearchParametersChanged,
     persistPrefix,
-    useQuerySortUrlParams,
+    useQueryUrlParam,
     user,
     noControls,
   } = props
 
   const router = useRouter()
-  const [query, setQuery] = usePersistentState('', {
+  const [query, setQuery] = usePersistentState(
-    key: 'q',
+    '',
-    store: urlParamsStore(router),
+    !useQueryUrlParam
-  })
+      ? undefined
+      : {
+          key: 'q',
+          store: urlParamStore(router),
+        }
+  )
+
   const [state, setState] = usePersistentState(
     {
       sort: defaultSort ?? 'score',
       filter: defaultFilter ?? 'open',
       pillFilter: null as string | null,
     },
-    {
+    !persistPrefix
-      key: `${persistPrefix}-params`,
+      ? undefined
-      store: storageStore(safeSessionStorage()),
+      : {
-    }
+          key: `${persistPrefix}-params`,
+          store: storageStore(safeLocalStorage()),
+        }
   )
 
   const follows = useFollows(user?.id)

web/hooks/use-persistent-state.ts

@@ -48,7 +48,7 @@ export const storageStore = <T>(storage?: Storage): PersistentStore<T> => ({
   },
 })
 
-export const urlParamsStore = (router: NextRouter) => ({
+export const urlParamStore = (router: NextRouter): PersistentStore<string> => ({
   get: (k: string) => {
     const v = router.query[k]
     return typeof v === 'string' ? v : undefined
@@ -93,6 +93,8 @@ export const usePersistentState = <T>(
 ) => {
   const store = persist?.store
   const key = persist?.key
+  // note that it's important in some cases to get the state correct during the
+  // first render, or scroll restoration won't take into account the saved state
   const savedValue = key != null && store != null ? store.get(key) : undefined
   const [state, setState] = useStateCheckEquality(savedValue ?? initial)
   useEffect(() => {

web/pages/contract-search-firestore.tsx

@@ -6,7 +6,7 @@ import { ContractsGrid } from 'web/components/contract/contracts-grid'
 import { useContracts } from 'web/hooks/use-contracts'
 import {
   usePersistentState,
-  urlParamsStore,
+  urlParamStore,
 } from 'web/hooks/use-persistent-state'
 
 const MAX_CONTRACTS_RENDERED = 100
@@ -19,10 +19,10 @@ export default function ContractSearchFirestore(props: {
     groupSlug?: string
   }
 }) {
-  const contracts = useContracts()
   const { additionalFilter } = props
+  const contracts = useContracts()
   const router = useRouter()
-  const store = urlParamsStore(router)
+  const store = urlParamStore(router)
   const [query, setQuery] = usePersistentState('', { key: 'q', store })
   const [sort, setSort] = usePersistentState('score', { key: 'sort', store })
 

web/pages/home.tsx

@@ -34,8 +34,7 @@ const Home = (props: { auth: { user: User } | null }) => {
           <ContractSearch
             user={user}
             persistPrefix="home-search"
-            useQuerySortLocalStorage={true}
+            useQueryUrlParam={true}
-            useQuerySortUrlParams={true}
           />
         </Col>
         <button