diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index bd3204ed..33a3c05a 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -23,13 +23,15 @@ import { HOUSE_LIQUIDITY_PROVIDER_ID, } from 'common/antes' import { buildArray } from 'common/util/array' +import { ContractComment } from 'common/comment' export function ContractTabs(props: { contract: Contract bets: Bet[] userBets: Bet[] + comments: ContractComment[] }) { - const { contract, bets, userBets } = props + const { contract, bets, userBets, comments } = props const yourTrades = (
@@ -42,7 +44,7 @@ export function ContractTabs(props: { const tabs = buildArray( { title: 'Comments', - content: , + content: , }, { title: capitalize(PAST_BETS), @@ -61,10 +63,11 @@ export function ContractTabs(props: { const CommentsTabContent = memo(function CommentsTabContent(props: { contract: Contract + comments: ContractComment[] }) { const { contract } = props const tips = useTipTxns({ contractId: contract.id }) - const comments = useComments(contract.id) + const comments = useComments(contract.id) ?? props.comments if (comments == null) { return } diff --git a/web/lib/firebase/comments.ts b/web/lib/firebase/comments.ts index db4e8ede..733a1e06 100644 --- a/web/lib/firebase/comments.ts +++ b/web/lib/firebase/comments.ts @@ -131,7 +131,7 @@ function getCommentsOnPostCollection(postId: string) { } export async function listAllComments(contractId: string) { - return await getValues( + return await getValues( query(getCommentsCollection(contractId), orderBy('createdTime', 'desc')) ) } diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 1dde2f95..93b53447 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -46,6 +46,8 @@ import { BetSignUpPrompt } from 'web/components/sign-up-prompt' import { PlayMoneyDisclaimer } from 'web/components/play-money-disclaimer' import BetButton from 'web/components/bet-button' import { BetsSummary } from 'web/components/bet-summary' +import { listAllComments } from 'web/lib/firebase/comments' +import { ContractComment } from 'common/comment' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz(props: { @@ -55,10 +57,15 @@ export async function getStaticPropz(props: { const contract = (await getContractFromSlug(contractSlug)) || null const contractId = contract?.id const bets = contractId ? await listAllBets(contractId) : [] + const comments = contractId ? await listAllComments(contractId) : [] return { - // Limit the data sent to the client. Client will still load all bets directly. - props: { contract, bets: bets.slice(0, 5000) }, + props: { + contract, + // Limit the data sent to the client. Client will still load all bets/comments directly. + bets: bets.slice(0, 5000), + comments: comments.slice(0, 1000), + }, revalidate: 5, // regenerate after five seconds } } @@ -70,9 +77,14 @@ export async function getStaticPaths() { export default function ContractPage(props: { contract: Contract | null bets: Bet[] + comments: ContractComment[] backToHome?: () => void }) { - props = usePropz(props, getStaticPropz) ?? { contract: null, bets: [] } + props = usePropz(props, getStaticPropz) ?? { + contract: null, + bets: [], + comments: [], + } const inIframe = useIsIframe() if (inIframe) { @@ -147,7 +159,7 @@ export function ContractPageContent( contract: Contract } ) { - const { backToHome } = props + const { backToHome, comments } = props const contract = useContractWithPreload(props.contract) ?? props.contract const user = useUser() usePrefetch(user?.id) @@ -258,7 +270,12 @@ export function ContractPageContent( userBets={userBets} /> - + {!user ? (