From 21d0eca49f38e8d8b3fc065e56eec23db7f63ed4 Mon Sep 17 00:00:00 2001 From: jahooma Date: Thu, 16 Dec 2021 15:22:00 -0600 Subject: [PATCH] Collapsable bets, with bet table collapsed by default --- web/components/bets-list.tsx | 70 +++++++++++++++++++-------- web/pages/[username]/[contractId].tsx | 16 +++--- 2 files changed, 58 insertions(+), 28 deletions(-) diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index caf01b7b..3f43b293 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -89,17 +89,26 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) { const { bets, contract } = props const { resolution } = contract + const [collapsed, setCollapsed] = useState(true) + return ( -
+
setCollapsed((collapsed) => !collapsed)} + > - - - -
+ + - - + + +
@@ -109,22 +118,31 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) { <>
- Resolved {resolution === 'YES' && } - {resolution === 'NO' && } - {resolution === 'CANCEL' && } + Resolved
)} - {/* Show this at the end of the flex */} - + + + {/* Show carrot for collapsing. Hack the positioning. */} +
- +
+ - + +
) } @@ -183,13 +201,17 @@ export function MyBetsSummary(props: { ) } -export function ContractBetsTable(props: { contract: Contract; bets: Bet[] }) { - const { contract, bets } = props +export function ContractBetsTable(props: { + contract: Contract + bets: Bet[] + className?: string +}) { + const { contract, bets, className } = props const { isResolved } = contract return ( -
+
@@ -219,7 +241,9 @@ function BetRow(props: { bet: Bet; contract: Contract }) { return ( - +
{dayjs(createdTime).format('MMM D, H:mma')}{outcome} + + {formatMoney(amount)} {formatPercent(probBefore)} → {formatPercent(probAfter)} @@ -236,6 +260,14 @@ function BetRow(props: { bet: Bet; contract: Contract }) { ) } +function OutcomeLabel(props: { outcome: 'YES' | 'NO' | 'CANCEL' }) { + const { outcome } = props + + if (outcome === 'YES') return + if (outcome === 'NO') return + return +} + function YesLabel() { return YES } diff --git a/web/pages/[username]/[contractId].tsx b/web/pages/[username]/[contractId].tsx index 0c279499..bd6d67bd 100644 --- a/web/pages/[username]/[contractId].tsx +++ b/web/pages/[username]/[contractId].tsx @@ -101,17 +101,15 @@ function BetsSection(props: { contract: Contract; user: User | null }) { const userBets = user && bets.filter((bet) => bet.userId === user.id) + if (!userBets || userBets.length === 0) return <> + return (
- {userBets && userBets.length > 0 && ( - <> - - <MyBetsSummary contract={contract} bets={userBets} /> - <Spacer h={6} /> - <ContractBetsTable contract={contract} bets={userBets} /> - <Spacer h={6} /> - </> - )} + <Title text="Your bets" /> + <MyBetsSummary contract={contract} bets={userBets} /> + <Spacer h={6} /> + <ContractBetsTable contract={contract} bets={userBets} /> + <Spacer h={6} /> </div> ) }