diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx index 2902cccd..f098173f 100644 --- a/web/components/contracts-list.tsx +++ b/web/components/contracts-list.tsx @@ -14,6 +14,8 @@ import { formatMoney } from '../lib/util/format' import { User } from '../lib/firebase/users' import { UserLink } from './user-page' import { Linkify } from './linkify' +import { Col } from './layout/col' +import { SiteLink } from './link' export function ContractDetails(props: { contract: Contract }) { const { contract } = props @@ -110,16 +112,63 @@ function ContractsGrid(props: { contracts: Contract[] }) { ) } +export function CreatorContractsGrid(props: { contracts: Contract[] }) { + const { contracts } = props + + const byCreator = _.groupBy(contracts, (contract) => contract.creatorId) + const creatorIds = _.sortBy(Object.keys(byCreator), (creatorId) => + _.sumBy(byCreator[creatorId], (contract) => -1 * compute(contract).truePool) + ) + + return ( + + {creatorIds.map((creatorId) => { + const { creatorUsername, creatorName } = byCreator[creatorId][0] + + return ( + + {creatorName} + + + + {byCreator[creatorId].length > 6 ? ( + + e.stopPropagation()} + > + See all + + + ) : ( +
+ )} + + ) + })} + + ) +} + const MAX_CONTRACTS_DISPLAYED = 99 -type Sort = 'createdTime' | 'pool' | 'resolved' | 'all' +type Sort = 'creator' | 'createdTime' | 'pool' | 'resolved' | 'all' export function SearchableGrid(props: { contracts: Contract[] defaultSort?: Sort + byOneCreator?: boolean }) { - const { contracts, defaultSort } = props + const { contracts, defaultSort, byOneCreator } = props const [query, setQuery] = useState('') - const [sort, setSort] = useState(defaultSort || 'pool') + const [sort, setSort] = useState( + defaultSort || (byOneCreator ? 'pool' : 'creator') + ) function check(corpus: String) { return corpus.toLowerCase().includes(query.toLowerCase()) @@ -134,7 +183,7 @@ export function SearchableGrid(props: { if (sort === 'createdTime' || sort === 'resolved' || sort === 'all') { matches.sort((a, b) => b.createdTime - a.createdTime) - } else if (sort === 'pool') { + } else if (sort === 'pool' || sort === 'creator') { matches.sort((a, b) => compute(b).truePool - compute(a).truePool) } @@ -164,19 +213,27 @@ export function SearchableGrid(props: { value={sort} onChange={(e) => setSort(e.target.value as Sort)} > + {byOneCreator ? ( + + ) : ( + + )} -
- + {!byOneCreator && (sort === 'creator' || sort === 'resolved') ? ( + + ) : ( + + )} ) } -export function ContractsList(props: { creator: User }) { +export function CreatorContractsList(props: { creator: User }) { const { creator } = props const [contracts, setContracts] = useState('loading') @@ -189,5 +246,5 @@ export function ContractsList(props: { creator: User }) { if (contracts === 'loading') return <> - return + return } diff --git a/web/components/link.tsx b/web/components/link.tsx new file mode 100644 index 00000000..c462d611 --- /dev/null +++ b/web/components/link.tsx @@ -0,0 +1,24 @@ +import clsx from 'clsx' +import Link from 'next/link' + +export const SiteLink = (props: { + href: string + children: any + className?: string +}) => { + const { href, children, className } = props + + return ( + + e.stopPropagation()} + > + {children} + + + ) +} diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx index b3a6d058..bc531737 100644 --- a/web/components/user-page.tsx +++ b/web/components/user-page.tsx @@ -1,28 +1,19 @@ import { firebaseLogout, User } from '../lib/firebase/users' -import { ContractsList } from './contracts-list' +import { CreatorContractsList } from './contracts-list' import { Title } from './title' import { Row } from './layout/row' import { formatMoney } from '../lib/util/format' -import Link from 'next/link' -import clsx from 'clsx' import { SEO } from './SEO' import { Page } from './page' +import { SiteLink } from './link' export function UserLink(props: { username: string; className?: string }) { const { username, className } = props return ( - - e.stopPropagation()} - > - @{username} - - + + @{username} + ) } @@ -81,7 +72,7 @@ export function UserPage(props: { user: User; currentUser?: User }) { - <ContractsList creator={user} /> + <CreatorContractsList creator={user} /> </Page> ) } diff --git a/web/pages/create.tsx b/web/pages/create.tsx index 0a66d14d..5806f9ec 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -1,7 +1,7 @@ import router from 'next/router' import { useEffect, useState } from 'react' -import { ContractsList } from '../components/contracts-list' +import { CreatorContractsList } from '../components/contracts-list' import { Spacer } from '../components/layout/spacer' import { Title } from '../components/title' import { useUser } from '../hooks/use-user' @@ -119,7 +119,7 @@ export default function NewContract() { <Title text="Your markets" /> - {creator && <ContractsList creator={creator} />} + {creator && <CreatorContractsList creator={creator} />} </Page> ) }