import _ from 'lodash' import Link from 'next/link' import clsx from 'clsx' import { useEffect, useState } from 'react' import { Row } from '../components/layout/row' import { compute, Contract, listContracts, path, } from '../lib/firebase/contracts' import { formatMoney } from '../lib/util/format' import { User } from '../lib/firebase/users' import { UserLink } from './user-page' import { Linkify } from './linkify' export function ContractDetails(props: { contract: Contract }) { const { contract } = props const { volume, createdDate, resolvedDate } = compute(contract) return (
{resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
{formatMoney(volume)} volume
) } function ContractCard(props: { contract: Contract }) { const { contract } = props const { probPercent } = compute(contract) const resolutionColor = { YES: 'text-primary', NO: 'text-red-400', CANCEL: 'text-yellow-400', '': '', // Empty if unresolved }[contract.resolution || ''] const resolutionText = { YES: 'YES', NO: 'NO', CANCEL: 'N/A', '': '', }[contract.resolution || ''] return (
  • {resolutionText || (
    {probPercent}
    chance
    )}
  • ) } function ContractsGrid(props: { contracts: Contract[] }) { const [resolvedContracts, activeContracts] = _.partition( props.contracts, (c) => c.isResolved ) const contracts = [...activeContracts, ...resolvedContracts] if (contracts.length === 0) { return (

    No markets found. Would you like to{' '} create one ?

    ) } return ( ) } type Sort = 'createdTime' | 'volume' | 'resolved' | 'all' export function SearchableGrid(props: { contracts: Contract[] defaultSort?: Sort }) { const { contracts, defaultSort } = props const [query, setQuery] = useState('') const [sort, setSort] = useState(defaultSort || '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) || check(c.creatorUsername) ) 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 (
    {/* Show a search input next to a sort dropdown */}
    setQuery(e.target.value)} placeholder="Search markets" className="input input-bordered w-full" />
    ) } export function ContractsList(props: { creator: User }) { const { creator } = props const [contracts, setContracts] = useState('loading') useEffect(() => { if (creator?.id) { // TODO: stream changes from firestore listContracts(creator.id).then(setContracts) } }, [creator]) if (contracts === 'loading') return <> return }