Refactor search to not use Algolia components (#705)

* In progress refactor to not use Algolia components

* Cleanup

* Only query when necessary

* Read and update url params for query and sort

* Don't push router

* Don't update url if using default sort

* Add popstate listener to improve home navigation

* Remove console.logs

web/components/contract-search.tsx

@@ -1,26 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import algoliasearch from 'algoliasearch/lite'
-import {
-  Configure,
-  InstantSearch,
-  SearchBox,
-  SortBy,
-  useInfiniteHits,
-  useSortBy,
-} from 'react-instantsearch-hooks-web'
 
 import { Contract } from 'common/contract'
-import {
+import { Sort, useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
-  Sort,
-  useInitialQueryAndSort,
-  useUpdateQueryAndSort,
-} from '../hooks/use-sort-and-query-params'
 import {
   ContractHighlightOptions,
   ContractsGrid,
 } from './contract/contracts-list'
 import { Row } from './layout/row'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { useUser } from 'web/hooks/use-user'
@@ -30,8 +18,9 @@ import ContractSearchFirestore from 'web/pages/contract-search-firestore'
 import { useMemberGroups } from 'web/hooks/use-group'
 import { Group, NEW_USER_GROUP_SLUGS } from 'common/group'
 import { PillButton } from './buttons/pill-button'
-import { sortBy } from 'lodash'
+import { range, sortBy } from 'lodash'
 import { DEFAULT_CATEGORY_GROUPS } from 'common/categories'
+import { Col } from './layout/col'
 
 const searchClient = algoliasearch(
   'GJQPAYENIF',
@@ -40,16 +29,15 @@ const searchClient = algoliasearch(
 
 const indexPrefix = ENV === 'DEV' ? 'dev-' : ''
 
-const sortIndexes = [
+const sortOptions = [
-  { label: 'Newest', value: indexPrefix + 'contracts-newest' },
+  { label: 'Newest', value: 'newest' },
-  // { label: 'Oldest', value: indexPrefix + 'contracts-oldest' },
+  { label: 'Most popular', value: 'score' },
-  { label: 'Most popular', value: indexPrefix + 'contracts-score' },
+  { label: 'Most traded', value: 'most-traded' },
-  { label: 'Most traded', value: indexPrefix + 'contracts-most-traded' },
+  { label: '24h volume', value: '24-hour-vol' },
-  { label: '24h volume', value: indexPrefix + 'contracts-24-hour-vol' },
+  { label: 'Last updated', value: 'last-updated' },
-  { label: 'Last updated', value: indexPrefix + 'contracts-last-updated' },
+  { label: 'Subsidy', value: 'liquidity' },
-  { label: 'Subsidy', value: indexPrefix + 'contracts-liquidity' },
+  { label: 'Close date', value: 'close-date' },
-  { label: 'Close date', value: indexPrefix + 'contracts-close-date' },
+  { label: 'Resolve date', value: 'resolve-date' },
-  { label: 'Resolve date', value: indexPrefix + 'contracts-resolve-date' },
 ]
 export const DEFAULT_SORT = 'score'
 
@@ -108,13 +96,12 @@ export function ContractSearch(props: {
     memberPillGroups.length > 0 ? memberPillGroups : defaultPillGroups
 
   const follows = useFollows(user?.id)
-  const { initialSort } = useInitialQueryAndSort(querySortOptions)
 
-  const sort = sortIndexes
+  const { shouldLoadFromStorage, defaultSort } = querySortOptions ?? {}
-    .map(({ value }) => value)
+  const { query, setQuery, sort, setSort } = useQueryAndSortParams({
-    .includes(`${indexPrefix}contracts-${initialSort ?? ''}`)
+    defaultSort,
-    ? initialSort
+    shouldLoadFromStorage,
-    : querySortOptions?.defaultSort ?? DEFAULT_SORT
+  })
 
   const [filter, setFilter] = useState<filter>(
     querySortOptions?.defaultFilter ?? 'open'
@@ -123,62 +110,129 @@ export function ContractSearch(props: {
 
   const [pillFilter, setPillFilter] = useState<string | undefined>(undefined)
 
-  const selectFilter = (pill: string | undefined) => () => {
+  const selectPill = (pill: string | undefined) => () => {
     setPillFilter(pill)
+    setPage(0)
     track('select search category', { category: pill ?? 'all' })
   }
 
-  const { filters, numericFilters } = useMemo(() => {
+  let facetFilters = [
-    let filters = [
+    filter === 'open' ? 'isResolved:false' : '',
-      filter === 'open' ? 'isResolved:false' : '',
+    filter === 'closed' ? 'isResolved:false' : '',
-      filter === 'closed' ? 'isResolved:false' : '',
+    filter === 'resolved' ? 'isResolved:true' : '',
-      filter === 'resolved' ? 'isResolved:true' : '',
+    additionalFilter?.creatorId
-      additionalFilter?.creatorId
+      ? `creatorId:${additionalFilter.creatorId}`
-        ? `creatorId:${additionalFilter.creatorId}`
+      : '',
-        : '',
+    additionalFilter?.tag ? `lowercaseTags:${additionalFilter.tag}` : '',
-      additionalFilter?.tag ? `lowercaseTags:${additionalFilter.tag}` : '',
+    additionalFilter?.groupSlug
-      additionalFilter?.groupSlug
+      ? `groupLinks.slug:${additionalFilter.groupSlug}`
-        ? `groupLinks.slug:${additionalFilter.groupSlug}`
+      : '',
-        : '',
+    pillFilter && pillFilter !== 'personal' && pillFilter !== 'your-bets'
-      pillFilter && pillFilter !== 'personal' && pillFilter !== 'your-bets'
+      ? `groupLinks.slug:${pillFilter}`
-        ? `groupLinks.slug:${pillFilter}`
+      : '',
-        : '',
+    pillFilter === 'personal'
-      pillFilter === 'personal'
+      ? // Show contracts in groups that the user is a member of
-        ? // Show contracts in groups that the user is a member of
+        memberGroupSlugs
-          memberGroupSlugs
+          .map((slug) => `groupLinks.slug:${slug}`)
-            .map((slug) => `groupLinks.slug:${slug}`)
+          // Show contracts created by users the user follows
-            // Show contracts created by users the user follows
+          .concat(follows?.map((followId) => `creatorId:${followId}`) ?? [])
-            .concat(follows?.map((followId) => `creatorId:${followId}`) ?? [])
+          // Show contracts bet on by users the user follows
-            // Show contracts bet on by users the user follows
+          .concat(
-            .concat(
+            follows?.map((followId) => `uniqueBettorIds:${followId}`) ?? []
-              follows?.map((followId) => `uniqueBettorIds:${followId}`) ?? []
+          )
-            )
+      : '',
-        : '',
+    // Subtract contracts you bet on from For you.
-      // Subtract contracts you bet on from For you.
+    pillFilter === 'personal' && user ? `uniqueBettorIds:-${user.id}` : '',
-      pillFilter === 'personal' && user ? `uniqueBettorIds:-${user.id}` : '',
+    pillFilter === 'your-bets' && user
-      pillFilter === 'your-bets' && user
+      ? // Show contracts bet on by the user
-        ? // Show contracts bet on by the user
+        `uniqueBettorIds:${user.id}`
-          `uniqueBettorIds:${user.id}`
+      : '',
-        : '',
+  ].filter((f) => f)
-    ].filter((f) => f)
+  // Hack to make Algolia work.
-    // Hack to make Algolia work.
+  facetFilters = ['', ...facetFilters]
-    filters = ['', ...filters]
 
-    const numericFilters = [
+  const numericFilters = [
-      filter === 'open' ? `closeTime > ${Date.now()}` : '',
+    filter === 'open' ? `closeTime > ${Date.now()}` : '',
-      filter === 'closed' ? `closeTime <= ${Date.now()}` : '',
+    filter === 'closed' ? `closeTime <= ${Date.now()}` : '',
-    ].filter((f) => f)
+  ].filter((f) => f)
-
-    return { filters, numericFilters }
-  }, [
-    filter,
-    Object.values(additionalFilter ?? {}).join(','),
-    memberGroupSlugs.join(','),
-    (follows ?? []).join(','),
-    pillFilter,
-  ])
 
   const indexName = `${indexPrefix}contracts-${sort}`
+  const index = useMemo(() => searchClient.initIndex(indexName), [indexName])
+
+  const [page, setPage] = useState(0)
+  const [numPages, setNumPages] = useState(1)
+  const [hitsByPage, setHitsByPage] = useState<{ [page: string]: Contract[] }>(
+    {}
+  )
+
+  useEffect(() => {
+    let wasMostRecentQuery = true
+    index
+      .search(query, {
+        facetFilters,
+        numericFilters,
+        page,
+        hitsPerPage: 20,
+      })
+      .then((results) => {
+        if (!wasMostRecentQuery) return
+
+        if (page === 0) {
+          setHitsByPage({
+            [0]: results.hits as any as Contract[],
+          })
+        } else {
+          setHitsByPage((hitsByPage) => ({
+            ...hitsByPage,
+            [page]: results.hits,
+          }))
+        }
+        setNumPages(results.nbPages)
+      })
+    return () => {
+      wasMostRecentQuery = false
+    }
+    // Note numeric filters are unique based on current time, so can't compare
+    // them by value.
+  }, [query, page, index, JSON.stringify(facetFilters), filter])
+
+  const loadMore = () => {
+    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 updateQuery = (newQuery: string) => {
+    setQuery(newQuery)
+    setPage(0)
+  }
+
+  const selectFilter = (newFilter: filter) => {
+    if (newFilter === filter) return
+    setFilter(newFilter)
+    setPage(0)
+    trackCallback('select search filter', { filter: newFilter })
+  }
+
+  const selectSort = (newSort: Sort) => {
+    if (newSort === sort) return
+
+    setPage(0)
+    setSort(newSort)
+    track('select sort', { sort: newSort })
+  }
 
   if (IS_PRIVATE_MANIFOLD || process.env.NEXT_PUBLIC_FIREBASE_EMULATE) {
     return (
@@ -190,23 +244,19 @@ export function ContractSearch(props: {
   }
 
   return (
-    <InstantSearch searchClient={searchClient} indexName={indexName}>
+    <Col>
       <Row className="gap-1 sm:gap-2">
-        <SearchBox
+        <input
-          className="flex-1"
+          type="text"
-          placeholder={showPlaceHolder ? `Search ${filter} contracts` : ''}
+          value={query}
-          classNames={{
+          onChange={(e) => updateQuery(e.target.value)}
-            form: 'before:top-6',
+          placeholder={showPlaceHolder ? `Search ${filter} markets` : ''}
-            input: '!pl-10 !input !input-bordered shadow-none w-[100px]',
+          className="input input-bordered w-full"
-            resetIcon: 'mt-2 hidden sm:flex',
-          }}
         />
-        {/*// TODO track WHICH filter users are using*/}
         <select
-          className="!select !select-bordered"
+          className="select select-bordered"
           value={filter}
-          onChange={(e) => setFilter(e.target.value as filter)}
+          onChange={(e) => selectFilter(e.target.value as filter)}
-          onBlur={trackCallback('select search filter', { filter })}
         >
           <option value="open">Open</option>
           <option value="closed">Closed</option>
@@ -214,20 +264,18 @@ export function ContractSearch(props: {
           <option value="all">All</option>
         </select>
         {!hideOrderSelector && (
-          <SortBy
+          <select
-            items={sortIndexes}
+            className="select select-bordered"
-            classNames={{
+            value={sort}
-              select: '!select !select-bordered',
+            onChange={(e) => selectSort(e.target.value as Sort)}
-            }}
+          >
-            onBlur={trackCallback('select search sort', { sort })}
+            {sortOptions.map((option) => (
-          />
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
         )}
-        <Configure
-          facetFilters={filters}
-          numericFilters={numericFilters}
-          // Page resets on filters change.
-          page={0}
-        />
       </Row>
 
       <Spacer h={3} />
@@ -237,14 +285,14 @@ export function ContractSearch(props: {
           <PillButton
             key={'all'}
             selected={pillFilter === undefined}
-            onSelect={selectFilter(undefined)}
+            onSelect={selectPill(undefined)}
           >
             All
           </PillButton>
           <PillButton
             key={'personal'}
             selected={pillFilter === 'personal'}
-            onSelect={selectFilter('personal')}
+            onSelect={selectPill('personal')}
           >
             {user ? 'For you' : 'Featured'}
           </PillButton>
@@ -253,7 +301,7 @@ export function ContractSearch(props: {
             <PillButton
               key={'your-bets'}
               selected={pillFilter === 'your-bets'}
-              onSelect={selectFilter('your-bets')}
+              onSelect={selectPill('your-bets')}
             >
               Your bets
             </PillButton>
@@ -264,7 +312,7 @@ export function ContractSearch(props: {
               <PillButton
                 key={slug}
                 selected={pillFilter === slug}
-                onSelect={selectFilter(slug)}
+                onSelect={selectPill(slug)}
               >
                 {name}
               </PillButton>
@@ -280,103 +328,17 @@ export function ContractSearch(props: {
       memberGroupSlugs.length === 0 ? (
         <>You're not following anyone, nor in any of your own groups yet.</>
       ) : (
-        <ContractSearchInner
+        <ContractsGrid
-          querySortOptions={querySortOptions}
+          contracts={contracts}
+          loadMore={loadMore}
+          hasMore={true}
+          showTime={showTime}
           onContractClick={onContractClick}
           overrideGridClassName={overrideGridClassName}
-          excludeContractIds={additionalFilter?.excludeContractIds}
           highlightOptions={highlightOptions}
           cardHideOptions={cardHideOptions}
         />
       )}
-    </InstantSearch>
+    </Col>
-  )
-}
-
-export function ContractSearchInner(props: {
-  querySortOptions?: {
-    defaultSort: Sort
-    shouldLoadFromStorage?: boolean
-  }
-  onContractClick?: (contract: Contract) => void
-  overrideGridClassName?: string
-  hideQuickBet?: boolean
-  excludeContractIds?: string[]
-  highlightOptions?: ContractHighlightOptions
-  cardHideOptions?: {
-    hideQuickBet?: boolean
-    hideGroupLink?: boolean
-  }
-}) {
-  const {
-    querySortOptions,
-    onContractClick,
-    overrideGridClassName,
-    cardHideOptions,
-    excludeContractIds,
-    highlightOptions,
-  } = props
-  const { initialQuery } = useInitialQueryAndSort(querySortOptions)
-
-  const { query, setQuery, setSort } = useUpdateQueryAndSort({
-    shouldLoadFromStorage: true,
-  })
-
-  useEffect(() => {
-    setQuery(initialQuery)
-  }, [initialQuery])
-
-  const { currentRefinement: index } = useSortBy({
-    items: [],
-  })
-
-  useEffect(() => {
-    setQuery(query)
-  }, [query])
-
-  const isFirstRender = useRef(true)
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false
-      return
-    }
-
-    const sort = index.split('contracts-')[1] as Sort
-    if (sort) {
-      setSort(sort)
-    }
-  }, [index])
-
-  const [isInitialLoad, setIsInitialLoad] = useState(true)
-  useEffect(() => {
-    const id = setTimeout(() => setIsInitialLoad(false), 1000)
-    return () => clearTimeout(id)
-  }, [])
-
-  const { showMore, hits, isLastPage } = useInfiniteHits()
-  let contracts = hits as any as Contract[]
-
-  if (isInitialLoad && contracts.length === 0) return <></>
-
-  const showTime = index.endsWith('close-date')
-    ? 'close-date'
-    : index.endsWith('resolve-date')
-    ? 'resolve-date'
-    : undefined
-
-  if (excludeContractIds)
-    contracts = contracts.filter((c) => !excludeContractIds.includes(c.id))
-
-  return (
-    <ContractsGrid
-      contracts={contracts}
-      loadMore={showMore}
-      hasMore={!isLastPage}
-      showTime={showTime}
-      onContractClick={onContractClick}
-      overrideGridClassName={overrideGridClassName}
-      highlightOptions={highlightOptions}
-      cardHideOptions={cardHideOptions}
-    />
   )
 }

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

@@ -1,8 +1,6 @@
 import { defaults, debounce } from 'lodash'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import { useSearchBox } from 'react-instantsearch-hooks-web'
-import { track } from 'web/lib/service/analytics'
 import { DEFAULT_SORT } from 'web/components/contract-search'
 
 const MARKETS_SORT = 'markets_sort'
@@ -74,51 +72,69 @@ export function useInitialQueryAndSort(options?: {
   }
 }
 
-export function useUpdateQueryAndSort(props: {
+export function useQueryAndSortParams(options?: {
-  shouldLoadFromStorage: boolean
+  defaultSort?: Sort
+  shouldLoadFromStorage?: boolean
 }) {
-  const { shouldLoadFromStorage } = props
+  const { defaultSort = DEFAULT_SORT, shouldLoadFromStorage = true } =
+    options ?? {}
   const router = useRouter()
 
+  const { s: sort, q: query } = router.query as {
+    q?: string
+    s?: Sort
+  }
+
   const setSort = (sort: Sort | undefined) => {
-    if (sort !== router.query.s) {
+    router.replace({ query: { ...router.query, s: sort } }, undefined, {
-      router.query.s = sort
+      shallow: true,
-      router.replace({ query: { ...router.query, s: sort } }, undefined, {
+    })
-        shallow: true,
+    if (shouldLoadFromStorage) {
-      })
+      localStorage.setItem(MARKETS_SORT, sort || '')
-      if (shouldLoadFromStorage) {
-        localStorage.setItem(MARKETS_SORT, sort || '')
-      }
     }
   }
 
-  const { query, refine } = useSearchBox()
+  const [queryState, setQueryState] = useState(query)
+
+  useEffect(() => {
+    setQueryState(query)
+  }, [query])
 
   // Debounce router query update.
   const pushQuery = useMemo(
     () =>
       debounce((query: string | undefined) => {
-        if (query) {
+        router.replace({ query: { ...router.query, q: query } }, undefined, {
-          router.query.q = query
-        } else {
-          delete router.query.q
-        }
-        router.replace({ query: router.query }, undefined, {
           shallow: true,
         })
-        track('search', { query })
+      }, 100),
-      }, 500),
     [router]
   )
 
   const setQuery = (query: string | undefined) => {
-    refine(query ?? '')
+    setQueryState(query)
     pushQuery(query)
   }
 
+  useEffect(() => {
+    // If there's no sort option, then set the one from localstorage
+    if (router.isReady && !sort && shouldLoadFromStorage) {
+      const localSort = localStorage.getItem(MARKETS_SORT) as Sort
+      if (localSort && localSort !== defaultSort) {
+        // Use replace to not break navigating back.
+        router.replace(
+          { query: { ...router.query, s: localSort } },
+          undefined,
+          { shallow: true }
+        )
+      }
+    }
+  })
+
   return {
+    sort: sort ?? defaultSort,
+    query: queryState ?? '',
     setSort,
     setQuery,
-    query,
   }
 }

web/pages/home.tsx

@@ -81,11 +81,18 @@ const useContractPage = () => {
         if (!username || !contractSlug) setContract(undefined)
         else {
           // Show contract if route is to a contract: '/[username]/[contractSlug]'.
-          getContractFromSlug(contractSlug).then(setContract)
+          getContractFromSlug(contractSlug).then((contract) => {
+            const path = location.pathname.split('/').slice(1)
+            const [_username, contractSlug] = path
+            // Make sure we're still on the same contract.
+            if (contract?.slug === contractSlug) setContract(contract)
+          })
         }
       }
     }
 
+    addEventListener('popstate', updateContract)
+
     const { pushState, replaceState } = window.history
 
     window.history.pushState = function () {
@@ -101,6 +108,7 @@ const useContractPage = () => {
     }
 
     return () => {
+      removeEventListener('popstate', updateContract)
       window.history.pushState = pushState
       window.history.replaceState = replaceState
     }