67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { ContractsGrid } from '../components/contracts-list'
|
|
import { Header } from '../components/header'
|
|
import { compute, listAllContracts } from '../lib/firebase/contracts'
|
|
import { Contract } from '../lib/firebase/contracts'
|
|
|
|
export default function Markets() {
|
|
const [contracts, setContracts] = useState<Contract[]>([])
|
|
useEffect(() => {
|
|
listAllContracts().then(setContracts)
|
|
}, [])
|
|
|
|
const [query, setQuery] = useState('')
|
|
type Sort = 'createdTime' | 'volume' | 'resolved' | 'all'
|
|
const [sort, setSort] = useState('volume')
|
|
|
|
function check(corpus: String) {
|
|
return corpus.toLowerCase().includes(query.toLowerCase())
|
|
}
|
|
let matches = contracts.filter(
|
|
(c) => check(c.question) || check(c.description) || check(c.creatorName)
|
|
)
|
|
|
|
if (sort === 'createdTime' || sort === 'resolved' || sort === 'all') {
|
|
matches.sort((a, b) => b.createdTime - a.createdTime)
|
|
} else if (sort === 'volume') {
|
|
matches.sort((a, b) => compute(b).volume - compute(a).volume)
|
|
}
|
|
|
|
if (sort !== 'all') {
|
|
// Filter for (or filter out) resolved contracts
|
|
matches = matches.filter((c) =>
|
|
sort === 'resolved' ? c.resolution : !c.resolution
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Header />
|
|
<div className="max-w-4xl py-8 mx-auto">
|
|
{/* Show a search input next to a sort dropdown */}
|
|
<div className="flex justify-between gap-2 my-8">
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search markets"
|
|
className="input input-bordered w-full"
|
|
/>
|
|
<select
|
|
className="select select-bordered"
|
|
value={sort}
|
|
onChange={(e) => setSort(e.target.value as Sort)}
|
|
>
|
|
<option value="volume">Most traded</option>
|
|
<option value="createdTime">Newest first</option>
|
|
<option value="resolved">Resolved</option>
|
|
<option value="all">All markets</option>
|
|
</select>
|
|
</div>
|
|
|
|
<ContractsGrid contracts={matches} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|