Only query when necessary

web/components/contract-search.tsx

@@ -113,7 +113,6 @@ export function ContractSearch(props: {
     track('select search category', { category: pill ?? 'all' })
   }
 
-  const { facetFilters, numericFilters } = useMemo(() => {
   let facetFilters = [
     filter === 'open' ? 'isResolved:false' : '',
     filter === 'closed' ? 'isResolved:false' : '',
@@ -154,28 +153,25 @@ export function ContractSearch(props: {
     filter === 'closed' ? `closeTime <= ${Date.now()}` : '',
   ].filter((f) => f)
 
-    return { facetFilters, numericFilters }
-  }, [
-    filter,
-    Object.values(additionalFilter ?? {}).join(','),
-    memberGroupSlugs.join(','),
-    (follows ?? []).join(','),
-    pillFilter,
-  ])
-
   const indexName = `${indexPrefix}contracts-${sort}`
   const index = useMemo(() => searchClient.initIndex(indexName), [indexName])
 
   const [query, setQuery] = useState('')
   const [page, setPage] = useState(0)
+  const [numPages, setNumPages] = useState(1)
   const [hitsByPage, setHitsByPage] = useState<{ [page: string]: Contract[] }>(
     {}
   )
-  const hits = range(0, page + 1)
-    .map((p) => hitsByPage[p] ?? [])
-    .flat()
 
   useEffect(() => {
+    console.log('search', {
+      query,
+      page,
+      numPages,
+      index,
+      facetFilters,
+      numericFilters,
+    })
     index
       .search(query, {
         facetFilters,
@@ -194,17 +190,31 @@ export function ContractSearch(props: {
             [page]: results.hits,
           }))
         }
+        setNumPages(results.nbPages)
         console.log(results.page, '/', results.nbPages, results.hits)
       })
-  }, [query, page, index, facetFilters, numericFilters])
+    // Note numeric filters are unique based on current time, so can't compare
+    // them by value.
+  }, [query, page, index, JSON.stringify(facetFilters), filter])
 
-  const showTime =
+  const loadMore = () => {
-    sort === 'close-date' || sort === 'resolve-date' ? sort : undefined
+    if (page >= numPages - 1) return
+
+    const haveLoadedCurrentPage = hitsByPage[page]
+    if (haveLoadedCurrentPage) setPage(page + 1)
+  }
+
+  const hits = range(0, page + 1)
+    .map((p) => hitsByPage[p] ?? [])
+    .flat()
 
   const contracts = hits.filter(
     (c) => !additionalFilter?.excludeContractIds?.includes(c.id)
   )
 
+  const showTime =
+    sort === 'close-date' || sort === 'resolve-date' ? sort : undefined
+
   const selectFilter = (filter: filter) => {
     setFilter(filter)
     trackCallback('select search filter', { filter })
@@ -314,7 +324,7 @@ export function ContractSearch(props: {
       ) : (
         <ContractsGrid
           contracts={contracts}
-          loadMore={() => hitsByPage[page] && setPage(page + 1)}
+          loadMore={loadMore}
           hasMore={true}
           showTime={showTime}
           onContractClick={onContractClick}