From 5715b0e44afc70bcd62664468d6b0517ea0eb4bf Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Tue, 9 Aug 2022 13:25:42 -0700
Subject: [PATCH] Random contract page fixups (#712)

* Remove some divs and so on

* Correctly align bet avatars and text in feed

* Extract sidebar component on contract page
---
 web/components/avatar.tsx               | 13 +++--
 web/components/feed/feed-bets.tsx       | 64 +++++++++++-----------
 web/pages/[username]/[contractSlug].tsx | 71 ++++++++++++++-----------
 3 files changed, 81 insertions(+), 67 deletions(-)

diff --git a/web/components/avatar.tsx b/web/components/avatar.tsx
index 0436d61c..19b6066e 100644
--- a/web/components/avatar.tsx
+++ b/web/components/avatar.tsx
@@ -47,14 +47,21 @@ export function Avatar(props: {
   )
 }
 
-export function EmptyAvatar(props: { size?: number; multi?: boolean }) {
-  const { size = 8, multi } = props
+export function EmptyAvatar(props: {
+  className?: string
+  size?: number
+  multi?: boolean
+}) {
+  const { className, size = 8, multi } = props
   const insize = size - 3
   const Icon = multi ? UsersIcon : UserIcon
 
   return (
     <div
-      className={`flex flex-shrink-0 h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`}
+      className={clsx(
+        `flex flex-shrink-0 h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`,
+        className
+      )}
     >
       <Icon className={`h-${insize} w-${insize} text-gray-500`} aria-hidden />
     </div>
diff --git a/web/components/feed/feed-bets.tsx b/web/components/feed/feed-bets.tsx
index 29645136..ffa53de3 100644
--- a/web/components/feed/feed-bets.tsx
+++ b/web/components/feed/feed-bets.tsx
@@ -36,38 +36,33 @@ export function FeedBet(props: {
   const isSelf = user?.id === userId
 
   return (
-    <>
-      <Row className={'flex w-full gap-2 pt-3'}>
-        {isSelf ? (
-          <Avatar
-            className={clsx(smallAvatar && 'ml-1')}
-            size={smallAvatar ? 'sm' : undefined}
-            avatarUrl={user.avatarUrl}
-            username={user.username}
-          />
-        ) : bettor ? (
-          <Avatar
-            className={clsx(smallAvatar && 'ml-1')}
-            size={smallAvatar ? 'sm' : undefined}
-            avatarUrl={bettor.avatarUrl}
-            username={bettor.username}
-          />
-        ) : (
-          <div className="relative px-1">
-            <EmptyAvatar />
-          </div>
-        )}
-        <div className={'min-w-0 flex-1 py-1.5'}>
-          <BetStatusText
-            bet={bet}
-            contract={contract}
-            isSelf={isSelf}
-            bettor={bettor}
-            hideOutcome={hideOutcome}
-          />
-        </div>
-      </Row>
-    </>
+    <Row className={'flex w-full items-center gap-2 pt-3'}>
+      {isSelf ? (
+        <Avatar
+          className={clsx(smallAvatar && 'ml-1')}
+          size={smallAvatar ? 'sm' : undefined}
+          avatarUrl={user.avatarUrl}
+          username={user.username}
+        />
+      ) : bettor ? (
+        <Avatar
+          className={clsx(smallAvatar && 'ml-1')}
+          size={smallAvatar ? 'sm' : undefined}
+          avatarUrl={bettor.avatarUrl}
+          username={bettor.username}
+        />
+      ) : (
+        <EmptyAvatar className="mx-1" />
+      )}
+      <BetStatusText
+        bet={bet}
+        contract={contract}
+        isSelf={isSelf}
+        bettor={bettor}
+        hideOutcome={hideOutcome}
+        className="flex-1"
+      />
+    </Row>
   )
 }
 
@@ -77,8 +72,9 @@ export function BetStatusText(props: {
   isSelf: boolean
   bettor?: User
   hideOutcome?: boolean
+  className?: string
 }) {
-  const { bet, contract, bettor, isSelf, hideOutcome } = props
+  const { bet, contract, bettor, isSelf, hideOutcome, className } = props
   const { outcomeType } = contract
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
   const isFreeResponse = outcomeType === 'FREE_RESPONSE'
@@ -123,7 +119,7 @@ export function BetStatusText(props: {
       : formatPercent(bet.limitProb ?? bet.probAfter)
 
   return (
-    <div className="text-sm text-gray-500">
+    <div className={clsx('text-sm text-gray-500', className)}>
       {bettor ? (
         <UserLink name={bettor.name} username={bettor.username} />
       ) : (
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 <ContractPageContent {...{ ...props, contract }} />
 }
 
+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 ? (
+    <Col className="gap-4">
+      {allowTrade &&
+        (isNumeric ? (
+          <NumericBetPanel className="hidden xl:flex" contract={contract} />
+        ) : (
+          <BetPanel
+            className="hidden xl:flex"
+            contract={contract as CPMMBinaryContract}
+          />
+        ))}
+      {allowResolve &&
+        (isNumeric || isPseudoNumeric ? (
+          <NumericResolutionPanel creator={user} contract={contract} />
+        ) : (
+          <ResolutionPanel creator={user} contract={contract} />
+        ))}
+    </Col>
+  ) : null
+}
+
 export function ContractPageContent(
   props: Parameters<typeof ContractPage>[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 ? (
-    <Col className="gap-4">
-      {allowTrade &&
-        (isNumeric ? (
-          <NumericBetPanel className="hidden xl:flex" contract={contract} />
-        ) : (
-          <BetPanel
-            className="hidden xl:flex"
-            contract={contract as CPMMBinaryContract}
-          />
-        ))}
-      {allowResolve &&
-        (isNumeric || isPseudoNumeric ? (
-          <NumericResolutionPanel creator={user} contract={contract} />
-        ) : (
-          <ResolutionPanel creator={user} contract={contract} />
-        ))}
-    </Col>
-  ) : null
-
+  const rightSidebar = <ContractPageSidebar user={user} contract={contract} />
   return (
     <Page rightSidebar={rightSidebar}>
       {showConfetti && (
@@ -216,7 +227,7 @@ export function ContractPageContent(
           bets={bets.filter((b) => !b.challengeSlug)}
         />
 
-        {isNumeric && (
+        {outcomeType === 'NUMERIC' && (
           <AlertBox
             title="Warning"
             text="Distributional numeric markets were introduced as an experimental feature and are now deprecated."
@@ -232,7 +243,7 @@ export function ContractPageContent(
           </>
         )}
 
-        {isNumeric && allowTrade && (
+        {outcomeType === 'NUMERIC' && allowTrade && (
           <NumericBetPanel className="xl:hidden" contract={contract} />
         )}