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 = ( !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: { > {tab.tabIcon && {tab.tabIcon}} + {tab.badge ? ( +
{tab.badge}
+ ) : null} {tab.title}