Use custom search index for search results. Hide sort options while there's a query.

web/components/contract-search.tsx

@@ -28,6 +28,7 @@ const searchClient = algoliasearch(
 )
 
 const indexPrefix = ENV === 'DEV' ? 'dev-' : ''
+const searchIndexName = ENV === 'DEV' ? 'dev-contracts' : 'contractsIndex'
 
 const sortOptions = [
   { label: 'Newest', value: 'newest' },
@@ -116,12 +117,7 @@ export function ContractSearch(props: {
     track('select search category', { category: pill ?? 'all' })
   }
 
-  let facetFilters = query
+  const additionalFilters = [
-    ? []
-    : [
-        filter === 'open' ? 'isResolved:false' : '',
-        filter === 'closed' ? 'isResolved:false' : '',
-        filter === 'resolved' ? 'isResolved:true' : '',
     additionalFilter?.creatorId
       ? `creatorId:${additionalFilter.creatorId}`
       : '',
@@ -129,6 +125,14 @@ export function ContractSearch(props: {
     additionalFilter?.groupSlug
       ? `groupLinks.slug:${additionalFilter.groupSlug}`
       : '',
+  ]
+  let facetFilters = query
+    ? additionalFilters
+    : [
+        ...additionalFilters,
+        filter === 'open' ? 'isResolved:false' : '',
+        filter === 'closed' ? 'isResolved:false' : '',
+        filter === 'resolved' ? 'isResolved:true' : '',
         pillFilter && pillFilter !== 'personal' && pillFilter !== 'your-bets'
           ? `groupLinks.slug:${pillFilter}`
           : '',
@@ -162,6 +166,10 @@ export function ContractSearch(props: {
 
   const indexName = `${indexPrefix}contracts-${sort}`
   const index = useMemo(() => searchClient.initIndex(indexName), [indexName])
+  const searchIndex = useMemo(
+    () => searchClient.initIndex(searchIndexName),
+    [searchIndexName]
+  )
 
   const [page, setPage] = useState(0)
   const [numPages, setNumPages] = useState(1)
@@ -171,7 +179,9 @@ export function ContractSearch(props: {
 
   useEffect(() => {
     let wasMostRecentQuery = true
-    index
+    const algoliaIndex = query ? searchIndex : index
+
+    algoliaIndex
       .search(query, {
         facetFilters,
         numericFilters,
@@ -198,7 +208,7 @@ export function ContractSearch(props: {
     }
     // Note numeric filters are unique based on current time, so can't compare
     // them by value.
-  }, [query, page, index, JSON.stringify(facetFilters), filter])
+  }, [query, page, index, searchIndex, JSON.stringify(facetFilters), filter])
 
   const loadMore = () => {
     if (page >= numPages - 1) return
@@ -269,7 +279,7 @@ export function ContractSearch(props: {
             <option value="all">All</option>
           </select>
         )}
-        {!hideOrderSelector && (
+        {!hideOrderSelector && !query && (
           <select
             className="select select-bordered"
             value={sort}

web/hooks/use-sort-and-query-params.tsx

@@ -104,7 +104,7 @@ export function useQueryAndSortParams(options?: {
   const pushQuery = useMemo(
     () =>
       debounce((query: string | undefined) => {
-        const queryObj = { ...router.query, q: query || undefined }
+        const queryObj = { ...router.query, q: query }
         if (!query) delete queryObj.q
         router.replace({ query: queryObj }, undefined, {
           shallow: true,