From 42086241d13207e7f6c7b93a0a8f8e006ba78d96 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 26 Jan 2022 13:57:08 -0600
Subject: [PATCH] Hide BetRow when not appropriate

---
 web/components/bet-row.tsx              | 3 +--
 web/components/contract-feed.tsx        | 6 ++++--
 web/lib/firebase/contracts.ts           | 7 +++++++
 web/pages/[username]/[contractSlug].tsx | 4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/components/bet-row.tsx b/web/components/bet-row.tsx
index 14af11d9..4e7ad497 100644
--- a/web/components/bet-row.tsx
+++ b/web/components/bet-row.tsx
@@ -7,7 +7,6 @@ import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
-// TODO: Hide when not appropriate
 export default function BetRow(props: { contract: Contract }) {
   const [open, setOpen] = useState(false)
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
@@ -16,7 +15,7 @@ export default function BetRow(props: { contract: Contract }) {
 
   return (
     <>
-      <div className="-mt-4 text-xl pb-6 -mx-4 -mb-6">
+      <div className="-mt-2 text-xl -mx-4">
         <Row className="items-center gap-2 justify-center">
           Buy
           <YesNoSelector
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index ddb2f208..10580695 100644
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@@ -19,6 +19,7 @@ import {
   Contract,
   contractPath,
   updateContract,
+  tradingAllowed,
 } from '../lib/firebase/contracts'
 import { useUser } from '../hooks/use-user'
 import { Linkify } from './linkify'
@@ -39,6 +40,7 @@ import Textarea from 'react-expanding-textarea'
 import { outcome } from '../../common/contract'
 import { fromNow } from '../lib/util/time'
 import BetRow from './bet-row'
+import clsx from 'clsx'
 
 export function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
   const { username, avatarUrl } = props
@@ -649,7 +651,7 @@ export function ContractFeed(props: {
 
   return (
     <div className="flow-root">
-      <ul role="list" className="">
+      <ul role="list" className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
         {items.map((activityItem, activityItemIdx) => (
           <li key={activityItem.id}>
             <div className="relative pb-8">
@@ -688,7 +690,7 @@ export function ContractFeed(props: {
           </li>
         ))}
       </ul>
-      <BetRow contract={contract} />
+      {tradingAllowed(contract) && <BetRow contract={contract} />}
     </div>
   )
 }
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index f7168e96..08466cd2 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -52,6 +52,13 @@ export function contractMetrics(contract: Contract) {
   return { truePool, probPercent, startProb, createdDate, resolvedDate }
 }
 
+export function tradingAllowed(contract: Contract) {
+  return (
+    !contract.isResolved &&
+    (!contract.closeTime || contract.closeTime > Date.now())
+  )
+}
+
 const db = getFirestore(app)
 export const contractCollection = collection(db, 'contracts')
 
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 87a81bde..93f28746 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -15,6 +15,7 @@ import {
   contractMetrics,
   Contract,
   getContractFromSlug,
+  tradingAllowed,
 } from '../../lib/firebase/contracts'
 import { SEO } from '../../components/SEO'
 import { Page } from '../../components/page'
@@ -70,8 +71,7 @@ export default function ContractPage(props: {
 
   const { creatorId, isResolved, resolution, question } = contract
   const isCreator = user?.id === creatorId
-  const allowTrade =
-    !isResolved && (!contract.closeTime || contract.closeTime > Date.now())
+  const allowTrade = tradingAllowed(contract)
   const allowResolve = !isResolved && isCreator && !!user
 
   const { probPercent } = contractMetrics(contract)