546b0231e7
* un-daisy labels * un-daisy inputs * un-daisy input groups * fixup input * un-daisy selects * un-daisy slider * Uninstall daisy. Migrate colors * un-daisy tables * fix input error styling * lint
112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
import { useRouter } from 'next/router'
|
|
import { Answer } from 'common/answer'
|
|
import { searchInAny } from 'common/util/parse'
|
|
import { sortBy } from 'lodash'
|
|
import { ContractsGrid } from 'web/components/contract/contracts-grid'
|
|
import { useContracts } from 'web/hooks/use-contracts'
|
|
import {
|
|
usePersistentState,
|
|
urlParamStore,
|
|
} from 'web/hooks/use-persistent-state'
|
|
import { PAST_BETS } from 'common/user'
|
|
import { Input } from 'web/components/input'
|
|
import { Select } from 'web/components/select'
|
|
|
|
const MAX_CONTRACTS_RENDERED = 100
|
|
|
|
export default function ContractSearchFirestore(props: {
|
|
additionalFilter?: {
|
|
creatorId?: string
|
|
tag?: string
|
|
excludeContractIds?: string[]
|
|
groupSlug?: string
|
|
}
|
|
}) {
|
|
const { additionalFilter } = props
|
|
const contracts = useContracts()
|
|
const router = useRouter()
|
|
const store = urlParamStore(router)
|
|
const [query, setQuery] = usePersistentState('', { key: 'q', store })
|
|
const [sort, setSort] = usePersistentState('score', { key: 'sort', store })
|
|
|
|
let matches = (contracts ?? []).filter((c) =>
|
|
searchInAny(
|
|
query,
|
|
c.question,
|
|
c.creatorName,
|
|
c.lowercaseTags.map((tag) => `#${tag}`).join(' '),
|
|
((c as any).answers ?? []).map((answer: Answer) => answer.text).join(' ')
|
|
)
|
|
)
|
|
|
|
if (sort === 'newest') {
|
|
matches.sort((a, b) => b.createdTime - a.createdTime)
|
|
} else if (sort === 'resolve-date') {
|
|
matches = sortBy(matches, (contract) => -1 * (contract.resolutionTime ?? 0))
|
|
} else if (sort === 'close-date') {
|
|
matches = sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
|
|
matches = sortBy(matches, (contract) => contract.closeTime ?? Infinity)
|
|
} else if (sort === 'most-traded') {
|
|
matches.sort((a, b) => b.volume - a.volume)
|
|
} else if (sort === 'score') {
|
|
matches.sort((a, b) => (b.popularityScore ?? 0) - (a.popularityScore ?? 0))
|
|
} else if (sort === '24-hour-vol') {
|
|
// Use lodash for stable sort, so previous sort breaks all ties.
|
|
matches = sortBy(matches, ({ volume7Days }) => -1 * volume7Days)
|
|
matches = sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
|
|
}
|
|
|
|
if (additionalFilter) {
|
|
const { creatorId, tag, groupSlug, excludeContractIds } = additionalFilter
|
|
|
|
if (creatorId) {
|
|
matches = matches.filter((c) => c.creatorId === creatorId)
|
|
}
|
|
|
|
if (tag) {
|
|
matches = matches.filter((c) =>
|
|
c.lowercaseTags.includes(tag.toLowerCase())
|
|
)
|
|
}
|
|
|
|
if (groupSlug) {
|
|
matches = matches.filter((c) => c.groupSlugs?.includes(groupSlug))
|
|
}
|
|
|
|
if (excludeContractIds) {
|
|
matches = matches.filter((c) => !excludeContractIds.includes(c.id))
|
|
}
|
|
}
|
|
|
|
matches = matches.slice(0, MAX_CONTRACTS_RENDERED)
|
|
|
|
const showTime = ['close-date', 'closed'].includes(sort)
|
|
? 'close-date'
|
|
: sort === 'resolve-date'
|
|
? 'resolve-date'
|
|
: undefined
|
|
|
|
return (
|
|
<div>
|
|
{/* Show a search input next to a sort dropdown */}
|
|
<div className="mt-2 mb-8 flex justify-between gap-2">
|
|
<Input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search markets"
|
|
className="w-full"
|
|
/>
|
|
<Select value={sort} onChange={(e) => setSort(e.target.value)}>
|
|
<option value="score">Trending</option>
|
|
<option value="newest">Newest</option>
|
|
<option value="most-traded">Most ${PAST_BETS}</option>
|
|
<option value="24-hour-vol">24h volume</option>
|
|
<option value="close-date">Closing soon</option>
|
|
</Select>
|
|
</div>
|
|
<ContractsGrid contracts={matches} showTime={showTime} />
|
|
</div>
|
|
)
|
|
}
|