From 6ad43b02c79aca0e188fcbd127630cdd54f90bb8 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Sun, 24 Jul 2022 00:11:33 -0700
Subject: [PATCH] Show the number of comments and bets

---
 web/components/contract/contract-tabs.tsx | 15 ++++++++++++---
 web/components/feed/contract-activity.tsx |  6 +-----
 web/components/layout/tabs.tsx            |  5 +++++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index c7759fb8..fbf056e3 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -9,6 +9,7 @@ import { Tabs } from '../layout/tabs'
 import { Col } from '../layout/col'
 import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { LiquidityProvision } from 'common/liquidity-provision'
+import { useComments } from 'web/hooks/use-comments'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -18,11 +19,15 @@ export function ContractTabs(props: {
   comments: Comment[]
   tips: CommentTipMap
 }) {
-  const { contract, user, bets, comments, tips, liquidityProvisions } = props
+  const { contract, user, bets, tips, liquidityProvisions } = props
   const { outcomeType } = contract
 
   const userBets = user && bets.filter((bet) => bet.userId === user.id)
 
+  // Load comments here, so the badge count will be correct
+  const updatedComments = useComments(contract.id)
+  const comments = updatedComments ?? props.comments
+
   const betActivity = (
     <ContractActivity
       contract={contract}
@@ -89,8 +94,12 @@ export function ContractTabs(props: {
     <Tabs
       currentPageForAnalytics={'contract'}
       tabs={[
-        { title: 'Comments', content: commentActivity },
-        { title: 'Bets', content: betActivity },
+        {
+          title: 'Comments',
+          content: commentActivity,
+          badge: `${comments.length}`,
+        },
+        { title: 'Bets', content: betActivity, badge: `${bets.length}` },
         ...(!user || !userBets?.length
           ? []
           : [{ title: 'Your bets', content: yourTrades }]),
diff --git a/web/components/feed/contract-activity.tsx b/web/components/feed/contract-activity.tsx
index c60afa70..e50eb76b 100644
--- a/web/components/feed/contract-activity.tsx
+++ b/web/components/feed/contract-activity.tsx
@@ -2,7 +2,6 @@ import { Contract } from 'web/lib/firebase/contracts'
 import { Comment } from 'web/lib/firebase/comments'
 import { Bet } from 'common/bet'
 import { useBets } from 'web/hooks/use-bets'
-import { useComments } from 'web/hooks/use-comments'
 import { getSpecificContractActivityItems } from './activity-items'
 import { FeedItems } from './feed-items'
 import { User } from 'common/user'
@@ -26,10 +25,7 @@ export function ContractActivity(props: {
     props
 
   const contract = useContractWithPreload(props.contract) ?? props.contract
-
-  const updatedComments = useComments(contract.id)
-  const comments = updatedComments ?? props.comments
-
+  const comments = props.comments
   const updatedBets = useBets(contract.id)
   const bets = (updatedBets ?? props.bets).filter(
     (bet) => !bet.isRedemption && bet.amount !== 0
diff --git a/web/components/layout/tabs.tsx b/web/components/layout/tabs.tsx
index 8aec39b1..da3593a1 100644
--- a/web/components/layout/tabs.tsx
+++ b/web/components/layout/tabs.tsx
@@ -10,6 +10,8 @@ type Tab = {
   content: ReactNode
   // If set, change the url to this href when the tab is selected
   href?: string
+  // If set, show a badge with this content
+  badge?: string
 }
 
 export function Tabs(props: {
@@ -63,6 +65,9 @@ export function Tabs(props: {
               >
                 <Row className={'items-center justify-center gap-1'}>
                   {tab.tabIcon && <span> {tab.tabIcon}</span>}
+                  {tab.badge ? (
+                    <div className="px-0.5 font-bold">{tab.badge}</div>
+                  ) : null}
                   {tab.title}
                 </Row>
               </a>