Save last sort to local storage

web/components/contract-search.tsx

@@ -27,6 +27,7 @@ import { debounce, isEqual, sortBy } from 'lodash'
 import { DEFAULT_CATEGORY_GROUPS } from 'common/categories'
 import { Col } from './layout/col'
 import clsx from 'clsx'
+import { safeLocalStorage } from 'web/lib/util/local'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -209,6 +210,7 @@ export function ContractSearch(props: {
         defaultFilter={defaultFilter}
         defaultPill={defaultPill}
         additionalFilter={additionalFilter}
+        persistPrefix={persistPrefix}
         hideOrderSelector={hideOrderSelector}
         useQueryUrlParam={useQueryUrlParam}
         user={user}
@@ -238,6 +240,7 @@ function ContractSearchControls(props: {
   defaultFilter?: filter
   defaultPill?: string
   additionalFilter?: AdditionalFilter
+  persistPrefix?: string
   hideOrderSelector?: boolean
   onSearchParametersChanged: (params: SearchParameters) => void
   useQueryUrlParam?: boolean
@@ -251,6 +254,7 @@ function ContractSearchControls(props: {
     defaultFilter,
     defaultPill,
     additionalFilter,
+    persistPrefix,
     hideOrderSelector,
     onSearchParametersChanged,
     useQueryUrlParam,
@@ -270,8 +274,11 @@ function ContractSearchControls(props: {
         }
   )
 
+  const sortKey = `${persistPrefix}-search-sort`
+  const savedSort = safeLocalStorage()?.getItem(sortKey)
+
   const [sort, setSort] = usePersistentState(
-    defaultSort ?? 'score',
+    savedSort ?? defaultSort ?? 'score',
     !useQueryUrlParam
       ? undefined
       : {
@@ -298,6 +305,12 @@ function ContractSearchControls(props: {
         }
   )
 
+  useEffect(() => {
+    if (persistPrefix && sort) {
+      safeLocalStorage()?.setItem(sortKey, sort as string)
+    }
+  }, [persistPrefix, query, sort, sortKey])
+
   const follows = useFollows(user?.id)
   const memberGroups = (useMemberGroups(user?.id) ?? []).filter(
     (group) => !NEW_USER_GROUP_SLUGS.includes(group.slug)

web/pages/home/index.tsx

@@ -77,7 +77,7 @@ export default function Home() {
       <Col className="pm:mx-10 gap-4 px-4 pb-12 pt-4 sm:pt-0">
         <Row className={'mb-2 w-full items-center gap-8'}>
           <SearchRow />
-          <DailyStats className="" user={user} />
+          <DailyStats user={user} />
         </Row>
 
         {sections.map((section) => renderSection(section, user, groups))}

web/pages/search.tsx

@@ -13,7 +13,8 @@ export default function Search() {
   useTracking('view search')
 
   const { query } = useRouter()
-  const autoFocus = !(query['q'] || query['s'] || query['p'])
+  const { q, s, p } = query
+  const autoFocus = !(q || !s || !p)
 
   return (
     <Page>