open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hide resolved markets by default

Browse Source
This commit is contained in:
Austin Chen 2021-12-14 23:44:41 -08:00
parent f5a8f9de1b
commit 5bad8b2787
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/pages/markets.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { ContractsGrid } from '../components/contracts-list' import { ContractsGrid } from '../components/contracts-list'
import { Header } from '../components/header' import { Header } from '../components/header'
import { Title } from '../components/title'
import { compute, listAllContracts } from '../lib/firebase/contracts' import { compute, listAllContracts } from '../lib/firebase/contracts'
import { Contract } from '../lib/firebase/contracts' import { Contract } from '../lib/firebase/contracts'
@ -12,28 +11,35 @@ export default function Markets() {
}, []) }, [])
const [query, setQuery] = useState('') const [query, setQuery] = useState('')
type Sort = 'createdTime' | 'volume' type Sort = 'createdTime' | 'volume' | 'resolved' | 'all'
const [sort, setSort] = useState('volume') const [sort, setSort] = useState('volume')
function check(corpus: String) { function check(corpus: String) {
return corpus.toLowerCase().includes(query.toLowerCase()) return corpus.toLowerCase().includes(query.toLowerCase())
} }
const matches = contracts.filter( let matches = contracts.filter(
(c) => check(c.question) || check(c.description) || check(c.creatorName) (c) => check(c.question) || check(c.description) || check(c.creatorName)
) )
if (sort === 'createdTime') { if (sort === 'createdTime' || sort === 'resolved' || sort === 'all') {
matches.sort((a, b) => b.createdTime - a.createdTime) matches.sort((a, b) => b.createdTime - a.createdTime)
} else if (sort === 'volume') { } else if (sort === 'volume') {
matches.sort((a, b) => compute(b).volume - compute(a).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 ( return (
<div> <div>
<Header /> <Header />
<div className="max-w-4xl py-8 mx-auto"> <div className="max-w-4xl py-8 mx-auto">
{/* Show a search input next to a sort dropdown */} {/* Show a search input next to a sort dropdown */}
<div className="flex justify-between gap-2"> <div className="flex justify-between gap-2 my-8">
<input <input
type="text" type="text"
value={query} value={query}
@ -48,14 +54,12 @@ export default function Markets() {
> >
<option value="volume">Most traded</option> <option value="volume">Most traded</option>
<option value="createdTime">Newest first</option> <option value="createdTime">Newest first</option>
<option value="resolved">Resolved</option>
<option value="all">All markets</option>
</select> </select>
</div> </div>
<Title text="Open markets" className="mt-16" /> <ContractsGrid contracts={matches} />
<ContractsGrid contracts={matches.filter((c) => !c.resolution)} />
<Title text="Resolved markets" className="mt-16" />
<ContractsGrid contracts={matches.filter((c) => c.resolution)} />
</div> </div>
</div> </div>
) )