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
This commit is contained in:
James Grugett
GitHub
parent
079a2a3936
commit
be01a15230
|
|
@ -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 {
|
||||
Sort,
|
||||
useInitialQueryAndSort,
|
||||
useUpdateQueryAndSort,
|
||||
} from '../hooks/use-sort-and-query-params'
|
||||
import { Sort, useQueryAndSortParams } 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 = [
|
||||
{ label: 'Newest', value: indexPrefix + 'contracts-newest' },
|
||||
// { label: 'Oldest', value: indexPrefix + 'contracts-oldest' },
|
||||
{ label: 'Most popular', value: indexPrefix + 'contracts-score' },
|
||||
{ label: 'Most traded', value: indexPrefix + 'contracts-most-traded' },
|
||||
{ label: '24h volume', value: indexPrefix + 'contracts-24-hour-vol' },
|
||||
{ label: 'Last updated', value: indexPrefix + 'contracts-last-updated' },
|
||||
{ label: 'Subsidy', value: indexPrefix + 'contracts-liquidity' },
|
||||
{ label: 'Close date', value: indexPrefix + 'contracts-close-date' },
|
||||
{ label: 'Resolve date', value: indexPrefix + 'contracts-resolve-date' },
|
||||
const sortOptions = [
|
||||
{ label: 'Newest', value: 'newest' },
|
||||
{ label: 'Most popular', value: 'score' },
|
||||
{ label: 'Most traded', value: 'most-traded' },
|
||||
{ label: '24h volume', value: '24-hour-vol' },
|
||||
{ label: 'Last updated', value: 'last-updated' },
|
||||
{ label: 'Subsidy', value: 'liquidity' },
|
||||
{ label: 'Close date', value: 'close-date' },
|
||||
{ label: 'Resolve date', value: '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
|
||||
.map(({ value }) => value)
|
||||
.includes(`${indexPrefix}contracts-${initialSort ?? ''}`)
|
||||
? initialSort
|
||||
: querySortOptions?.defaultSort ?? DEFAULT_SORT
|
||||
const { shouldLoadFromStorage, defaultSort } = querySortOptions ?? {}
|
||||
const { query, setQuery, sort, setSort } = useQueryAndSortParams({
|
||||
defaultSort,
|
||||
shouldLoadFromStorage,
|
||||
})
|
||||
|
||||
const [filter, setFilter] = useState<filter>(
|
||||
querySortOptions?.defaultFilter ?? 'open'
|
||||
|
|
@ -123,13 +110,13 @@ 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 filters = [
|
||||
let facetFilters = [
|
||||
filter === 'open' ? 'isResolved:false' : '',
|
||||
filter === 'closed' ? 'isResolved:false' : '',
|
||||
filter === 'resolved' ? 'isResolved:true' : '',
|
||||
|
|
@ -162,23 +149,90 @@ export function ContractSearch(props: {
|
|||
: '',
|
||||
].filter((f) => f)
|
||||
// Hack to make Algolia work.
|
||||
filters = ['', ...filters]
|
||||
facetFilters = ['', ...facetFilters]
|
||||
|
||||
const numericFilters = [
|
||||
filter === 'open' ? `closeTime > ${Date.now()}` : '',
|
||||
filter === 'closed' ? `closeTime <= ${Date.now()}` : '',
|
||||
].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
|
||||
className="flex-1"
|
||||
placeholder={showPlaceHolder ? `Search ${filter} contracts` : ''}
|
||||
classNames={{
|
||||
form: 'before:top-6',
|
||||
input: '!pl-10 !input !input-bordered shadow-none w-[100px]',
|
||||
resetIcon: 'mt-2 hidden sm:flex',
|
||||
}}
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => updateQuery(e.target.value)}
|
||||
placeholder={showPlaceHolder ? `Search ${filter} markets` : ''}
|
||||
className="input input-bordered w-full"
|
||||
/>
|
||||
{/*// 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)}
|
||||
onBlur={trackCallback('select search filter', { filter })}
|
||||
onChange={(e) => selectFilter(e.target.value as 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
|
||||
items={sortIndexes}
|
||||
classNames={{
|
||||
select: '!select !select-bordered',
|
||||
}}
|
||||
onBlur={trackCallback('select search sort', { sort })}
|
||||
/>
|
||||
<select
|
||||
className="select select-bordered"
|
||||
value={sort}
|
||||
onChange={(e) => selectSort(e.target.value as 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
|
||||
querySortOptions={querySortOptions}
|
||||
onContractClick={onContractClick}
|
||||
overrideGridClassName={overrideGridClassName}
|
||||
excludeContractIds={additionalFilter?.excludeContractIds}
|
||||
highlightOptions={highlightOptions}
|
||||
cardHideOptions={cardHideOptions}
|
||||
/>
|
||||
)}
|
||||
</InstantSearch>
|
||||
)
|
||||
}
|
||||
|
||||
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}
|
||||
loadMore={loadMore}
|
||||
hasMore={true}
|
||||
showTime={showTime}
|
||||
onContractClick={onContractClick}
|
||||
overrideGridClassName={overrideGridClassName}
|
||||
highlightOptions={highlightOptions}
|
||||
cardHideOptions={cardHideOptions}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,15 +72,20 @@ export function useInitialQueryAndSort(options?: {
|
|||
}
|
||||
}
|
||||
|
||||
export function useUpdateQueryAndSort(props: {
|
||||
shouldLoadFromStorage: boolean
|
||||
export function useQueryAndSortParams(options?: {
|
||||
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.query.s = sort
|
||||
router.replace({ query: { ...router.query, s: sort } }, undefined, {
|
||||
shallow: true,
|
||||
})
|
||||
|
|
@ -90,35 +93,48 @@ export function useUpdateQueryAndSort(props: {
|
|||
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.query.q = query
|
||||
} else {
|
||||
delete router.query.q
|
||||
}
|
||||
router.replace({ query: router.query }, undefined, {
|
||||
router.replace({ query: { ...router.query, q: query } }, undefined, {
|
||||
shallow: true,
|
||||
})
|
||||
track('search', { query })
|
||||
}, 500),
|
||||
}, 100),
|
||||
[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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user