From b81cecfd0fb58a8db21ec2cda7c99ad1a6c033f8 Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Wed, 3 Aug 2022 03:14:17 -0700 Subject: [PATCH] Extract sidebar component on contract page --- web/pages/[username]/[contractSlug].tsx | 71 ++++++++++++++----------- 1 file changed, 41 insertions(+), 30 deletions(-) diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 5866f899..8d12e9c0 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -106,6 +106,43 @@ export default function ContractPage(props: { return } +export function ContractPageSidebar(props: { + user: User | null | undefined + contract: Contract +}) { + const { contract, user } = props + const { creatorId, isResolved, outcomeType } = contract + + const isCreator = user?.id === creatorId + const isBinary = outcomeType === 'BINARY' + const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC' + const isNumeric = outcomeType === 'NUMERIC' + const allowTrade = tradingAllowed(contract) + const allowResolve = !isResolved && isCreator && !!user + const hasSidePanel = + (isBinary || isNumeric || isPseudoNumeric) && (allowTrade || allowResolve) + + return hasSidePanel ? ( + + {allowTrade && + (isNumeric ? ( + + ) : ( + + ))} + {allowResolve && + (isNumeric || isPseudoNumeric ? ( + + ) : ( + + ))} + + ) : null +} + export function ContractPageContent( props: Parameters[0] & { contract: Contract } ) { @@ -142,16 +179,9 @@ export function ContractPageContent( setShowConfetti(shouldSeeConfetti) }, [contract, user]) - const { creatorId, isResolved, question, outcomeType } = contract + const { isResolved, question, outcomeType } = contract - const isCreator = user?.id === creatorId - const isBinary = outcomeType === 'BINARY' - const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC' - const isNumeric = outcomeType === 'NUMERIC' const allowTrade = tradingAllowed(contract) - const allowResolve = !isResolved && isCreator && !!user - const hasSidePanel = - (isBinary || isNumeric || isPseudoNumeric) && (allowTrade || allowResolve) const ogCardProps = getOpenGraphProps(contract) @@ -160,26 +190,7 @@ export function ContractPageContent( contractId: contract.id, }) - const rightSidebar = hasSidePanel ? ( - - {allowTrade && - (isNumeric ? ( - - ) : ( - - ))} - {allowResolve && - (isNumeric || isPseudoNumeric ? ( - - ) : ( - - ))} - - ) : null - + const rightSidebar = return ( {showConfetti && ( @@ -216,7 +227,7 @@ export function ContractPageContent( bets={bets.filter((b) => !b.challengeSlug)} /> - {isNumeric && ( + {outcomeType === 'NUMERIC' && ( )} - {isNumeric && allowTrade && ( + {outcomeType === 'NUMERIC' && allowTrade && ( )}