From 790c0b336b5fe22d7455f4a816b522cad02a8135 Mon Sep 17 00:00:00 2001 From: Marshall Polaris Date: Tue, 20 Sep 2022 21:29:07 -0700 Subject: [PATCH] Don't load all comments in contract page static props anymore --- .../contract/contract-leaderboard.tsx | 12 +++---- web/components/contract/contract-tabs.tsx | 19 +++++------ web/pages/[username]/[contractSlug].tsx | 34 ++++--------------- 3 files changed, 20 insertions(+), 45 deletions(-) diff --git a/web/components/contract/contract-leaderboard.tsx b/web/components/contract/contract-leaderboard.tsx index 4d25ffa4..6cd2ae62 100644 --- a/web/components/contract/contract-leaderboard.tsx +++ b/web/components/contract/contract-leaderboard.tsx @@ -1,10 +1,10 @@ import { Bet } from 'common/bet' -import { ContractComment } from 'common/comment' import { resolvedPayout } from 'common/calculate' import { Contract } from 'common/contract' import { formatMoney } from 'common/util/format' import { groupBy, mapValues, sumBy, sortBy, keyBy } from 'lodash' import { useState, useMemo, useEffect } from 'react' +import { useComments } from 'web/hooks/use-comments' import { listUsers, User } from 'web/lib/firebase/users' import { FeedBet } from '../feed/feed-bets' import { FeedComment } from '../feed/feed-comments' @@ -61,12 +61,10 @@ export function ContractLeaderboard(props: { ) : null } -export function ContractTopTrades(props: { - contract: Contract - bets: Bet[] - comments: ContractComment[] -}) { - const { contract, bets, comments } = props +export function ContractTopTrades(props: { contract: Contract; bets: Bet[] }) { + const { contract, bets } = props + // todo: this stuff should be calced in DB at resolve time + const comments = useComments(contract.id) const commentsById = keyBy(comments, 'id') const betsById = keyBy(bets, 'id') diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx index 22c1554c..ae957dc6 100644 --- a/web/components/contract/contract-tabs.tsx +++ b/web/components/contract/contract-tabs.tsx @@ -8,12 +8,12 @@ import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments' import { groupBy, sortBy } from 'lodash' import { Bet } from 'common/bet' import { Contract } from 'common/contract' -import { ContractComment } from 'common/comment' import { PAST_BETS, User } from 'common/user' import { ContractBetsTable, BetsSummary } from '../bets-list' import { Spacer } from '../layout/spacer' import { Tabs } from '../layout/tabs' import { Col } from '../layout/col' +import { LoadingIndicator } from 'web/components/loading-indicator' import { useComments } from 'web/hooks/use-comments' import { useLiquidity } from 'web/hooks/use-liquidity' import { useTipTxns } from 'web/hooks/use-tip-txns' @@ -28,9 +28,8 @@ export function ContractTabs(props: { contract: Contract user: User | null | undefined bets: Bet[] - comments: ContractComment[] }) { - const { contract, user, bets, comments } = props + const { contract, user, bets } = props const isMobile = useIsMobile() @@ -57,9 +56,7 @@ export function ContractTabs(props: { tabs={[ { title: 'Comments', - content: ( - - ), + content: , }, { title: capitalize(PAST_BETS), @@ -80,13 +77,15 @@ export function ContractTabs(props: { const CommentsTabContent = memo(function CommentsTabContent(props: { contract: Contract - comments: ContractComment[] }) { - const { contract, comments } = props + const { contract } = props const tips = useTipTxns({ contractId: contract.id }) - const updatedComments = useComments(contract.id) ?? comments + const comments = useComments(contract.id) + if (comments == null) { + return + } if (contract.outcomeType === 'FREE_RESPONSE') { - const generalComments = updatedComments.filter( + const generalComments = comments.filter( (c) => c.answerOutcome === undefined && c.betId === undefined ) const sortedAnswers = sortBy( diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index a4686fdf..4dada330 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -17,7 +17,6 @@ import { import { SEO } from 'web/components/SEO' import { Page } from 'web/components/page' import { Bet, listAllBets } from 'web/lib/firebase/bets' -import { listAllComments } from 'web/lib/firebase/comments' import Custom404 from '../404' import { AnswersPanel } from 'web/components/answers/answers-panel' import { fromPropz, usePropz } from 'web/hooks/use-propz' @@ -33,7 +32,6 @@ import { AlertBox } from 'web/components/alert-box' import { useTracking } from 'web/hooks/use-tracking' import { useSaveReferral } from 'web/hooks/use-save-referral' import { User } from 'common/user' -import { ContractComment } from 'common/comment' import { getOpenGraphProps } from 'common/contract-details' import { ContractDescription } from 'web/components/contract/contract-description' import { @@ -57,20 +55,11 @@ export async function getStaticPropz(props: { const { contractSlug } = props.params const contract = (await getContractFromSlug(contractSlug)) || null const contractId = contract?.id - - const [bets, comments] = await Promise.all([ - contractId ? listAllBets(contractId) : [], - contractId ? listAllComments(contractId) : [], - ]) + const bets = contractId ? await listAllBets(contractId) : [] return { - props: { - contract, - // Limit the data sent to the client. Client will still load all bets and comments directly. - bets: bets.slice(0, 5000), - comments: comments.slice(0, 1000), - }, - + // Limit the data sent to the client. Client will still load all bets directly. + props: { contract, bets: bets.slice(0, 5000) }, revalidate: 5, // regenerate after five seconds } } @@ -82,12 +71,10 @@ export async function getStaticPaths() { export default function ContractPage(props: { contract: Contract | null bets: Bet[] - comments: ContractComment[] backToHome?: () => void }) { props = usePropz(props, getStaticPropz) ?? { contract: null, - comments: [], bets: [], } @@ -170,7 +157,7 @@ export function ContractPageContent( user?: User | null } ) { - const { backToHome, comments, user } = props + const { backToHome, user } = props const contract = useContractWithPreload(props.contract) ?? props.contract usePrefetch(user?.id) useTracking( @@ -265,22 +252,13 @@ export function ContractPageContent( <>
- +
)} - + {!user ? (