Get static props of just data for feed: active contracts, their bets & comments.

web/components/contract-feed.tsx

@@ -505,6 +505,8 @@ type ActivityItem = {
 
 export function ContractFeed(props: {
   contract: Contract
+  bets: Bet[]
+  comments: Comment[]
   // Feed types: 'activity' = Activity feed, 'market' = Comments feed on a market
   feedType: 'activity' | 'market'
 }) {
@@ -512,12 +514,10 @@ export function ContractFeed(props: {
   const { id } = contract
   const user = useUser()
 
-  let bets = useBets(id)
-  if (bets === 'loading') bets = []
+  let bets = useBets(id) ?? props.bets
   bets = withoutAnteBets(contract, bets)
 
-  let comments = useComments(id)
-  if (comments === 'loading') comments = []
+  const comments = useComments(id) ?? props.comments
 
   const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS
 

web/components/contract-overview.tsx

@@ -15,12 +15,16 @@ import clsx from 'clsx'
 import { ContractDetails, ResolutionOrChance } from './contract-card'
 import { ContractFeed } from './contract-feed'
 import { TweetButton } from './tweet-button'
+import { Bet } from '../../common/bet'
+import { Comment } from '../../common/comment'
 
 export const ContractOverview = (props: {
   contract: Contract
+  bets: Bet[]
+  comments: Comment[]
   className?: string
 }) => {
-  const { contract, className } = props
+  const { contract, bets, comments, className } = props
   const { resolution, creatorId, creatorName } = contract
   const { probPercent, truePool } = contractMetrics(contract)
 
@@ -91,7 +95,12 @@ export const ContractOverview = (props: {
         </>
       )}
 
-      <ContractFeed contract={contract} feedType="market" />
+      <ContractFeed
+        contract={contract}
+        bets={bets}
+        comments={comments}
+        feedType="market"
+      />
     </Col>
   )
 }

web/components/contract-prob-graph.tsx

@@ -11,8 +11,7 @@ export function ContractProbGraph(props: { contract: Contract }) {
   const { contract } = props
   const { id, phantomShares, resolutionTime } = contract
 
-  let bets = useBets(id)
-  if (bets === 'loading') bets = []
+  let bets = useBets(id) ?? []
   bets = withoutAnteBets(contract, bets)
 
   const startProb = getProbability(phantomShares)

web/hooks/use-bets.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { Bet, listenForBets } from '../lib/firebase/bets'
 
 export const useBets = (contractId: string) => {
-  const [bets, setBets] = useState<Bet[] | 'loading'>('loading')
+  const [bets, setBets] = useState<Bet[] | undefined>()
 
   useEffect(() => {
     if (contractId) return listenForBets(contractId, setBets)

web/hooks/use-comments.ts

@@ -6,7 +6,7 @@ import {
 } from '../lib/firebase/comments'
 
 export const useComments = (contractId: string) => {
-  const [comments, setComments] = useState<Comment[] | 'loading'>('loading')
+  const [comments, setComments] = useState<Comment[] | undefined>()
 
   useEffect(() => {
     if (contractId) return listenForComments(contractId, setComments)

web/lib/firebase/bets.ts

@@ -10,12 +10,19 @@ import _ from 'lodash'
 import { db } from './init'
 import { Bet } from '../../../common/bet'
 import { Contract } from '../../../common/contract'
+import { getValues } from './utils'
 export type { Bet }
 
 function getBetsCollection(contractId: string) {
   return collection(db, 'contracts', contractId, 'bets')
 }
 
+export async function listAllBets(contractId: string) {
+  const bets = await getValues<Bet>(getBetsCollection(contractId))
+  bets.sort((bet1, bet2) => bet1.createdTime - bet2.createdTime)
+  return bets
+}
+
 export function listenForBets(
   contractId: string,
   setBets: (bets: Bet[]) => void

web/lib/firebase/comments.ts

@@ -9,7 +9,7 @@ import {
   where,
   orderBy,
 } from 'firebase/firestore'
-import { listenForValues } from './utils'
+import { getValues, listenForValues } from './utils'
 import { db } from './init'
 import { User } from '../../../common/user'
 import { Comment } from '../../../common/comment'
@@ -37,6 +37,12 @@ function getCommentsCollection(contractId: string) {
   return collection(db, 'contracts', contractId, 'comments')
 }
 
+export async function listAllComments(contractId: string) {
+  const comments = await getValues<Comment>(getCommentsCollection(contractId))
+  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
+  return comments
+}
+
 export function listenForComments(
   contractId: string,
   setComments: (comments: Comment[]) => void

web/pages/[username]/[contractSlug].tsx

@@ -19,16 +19,26 @@ import {
 import { SEO } from '../../components/SEO'
 import { Page } from '../../components/page'
 import { contractTextDetails } from '../../components/contract-card'
+import { Bet, listAllBets } from '../../lib/firebase/bets'
+import { Comment, listAllComments } from '../../lib/firebase/comments'
 
 export async function getStaticProps(props: { params: any }) {
   const { username, contractSlug } = props.params
   const contract = (await getContractFromSlug(contractSlug)) || null
+  const contractId = contract?.id
+
+  const [bets, comments] = await Promise.all([
+    contractId ? listAllBets(contractId) : null,
+    contractId ? listAllComments(contractId) : null,
+  ])
 
   return {
     props: {
       username,
       slug: contractSlug,
       contract,
+      bets,
+      comments,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -41,12 +51,15 @@ export async function getStaticPaths() {
 
 export default function ContractPage(props: {
   contract: Contract | null
+  bets: Bet[] | null
+  comments: Comment[] | null
   slug: string
   username: string
 }) {
   const user = useUser()
 
   const contract = useContractWithPreload(props.slug, props.contract)
+  const { bets, comments } = props
 
   if (!contract) {
     return <div>Contract not found...</div>
@@ -83,7 +96,11 @@ export default function ContractPage(props: {
 
       <Col className="w-full md:flex-row justify-between mt-6">
         <div className="flex-[3]">
-          <ContractOverview contract={contract} />
+          <ContractOverview
+            contract={contract}
+            bets={bets ?? []}
+            comments={comments ?? []}
+          />
           <BetsSection contract={contract} user={user ?? null} />
         </div>
 
@@ -108,7 +125,7 @@ function BetsSection(props: { contract: Contract; user: User | null }) {
   const { contract, user } = props
   const bets = useBets(contract.id)
 
-  if (bets === 'loading' || bets.length === 0) return <></>
+  if (!bets || bets.length === 0) return <></>
 
   // Decending creation time.
   bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime)

web/pages/activity.tsx

@@ -7,10 +7,24 @@ import { useContracts } from '../hooks/use-contracts'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
 import { Col } from '../components/layout/col'
+import { Bet } from '../../common/bet'
 
-function FeedCard(props: { contract: Contract }) {
-  const { contract } = props
-  return <ContractFeed contract={contract} feedType="activity" />
+const MAX_ACTIVE_CONTRACTS = 75
+
+function FeedCard(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: Comment[]
+}) {
+  const { contract, bets, comments } = props
+  return (
+    <ContractFeed
+      contract={contract}
+      bets={bets}
+      comments={comments}
+      feedType="activity"
+    />
+  )
 }
 
 // This does NOT include comment times, since those aren't part of the contract atm.
@@ -28,7 +42,7 @@ function lastActivityTime(contract: Contract) {
 // - Comment on a market
 // - New market created
 // - Market resolved
-function findActiveContracts(
+export function findActiveContracts(
   allContracts: Contract[],
   recentComments: Comment[]
 ) {
@@ -63,26 +77,33 @@ function findActiveContracts(
   contracts = _.uniqBy(contracts, (c) => c.id)
   contracts = contracts.filter((contract) => contract.visibility === 'public')
   contracts = _.sortBy(contracts, (c) => -(idToActivityTime.get(c.id) ?? 0))
-  return contracts
+  return contracts.slice(0, MAX_ACTIVE_CONTRACTS)
 }
 
 export function ActivityFeed(props: {
   contracts: Contract[]
-  recentComments: Comment[]
+  contractBets: Bet[][]
+  contractComments: Comment[][]
 }) {
+  const { contractBets, contractComments } = props
   const contracts = useContracts() ?? props.contracts
-  const recentComments = useRecentComments() ?? props.recentComments
-  // TODO: Handle static props correctly?
-  const activeContracts = findActiveContracts(contracts, recentComments)
+  const recentComments = useRecentComments()
+  const activeContracts = recentComments
+    ? findActiveContracts(contracts, recentComments)
+    : contracts
 
   return contracts.length > 0 ? (
     <Col className="items-center">
       <Col className="w-full max-w-3xl">
         <Title text="Recent Activity" />
         <Col className="w-full bg-white self-center divide-gray-300 divide-y">
-          {activeContracts.map((contract) => (
+          {activeContracts.map((contract, i) => (
             <div className="py-6 px-2 sm:px-4">
-              <FeedCard contract={contract} />
+              <FeedCard
+                contract={contract}
+                bets={contractBets[i]}
+                comments={contractComments[i]}
+              />
             </div>
           ))}
         </Col>
@@ -96,7 +117,7 @@ export function ActivityFeed(props: {
 export default function ActivityPage() {
   return (
     <Page>
-      <ActivityFeed contracts={[]} recentComments={[]} />
+      <ActivityFeed contracts={[]} contractBets={[]} contractComments={[]} />
     </Page>
   )
 }

web/pages/index.tsx

@@ -8,10 +8,15 @@ import {
 import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
 import { Title } from '../components/title'
-import { ActivityFeed } from './activity'
-import { getRecentComments, Comment } from '../lib/firebase/comments'
+import { ActivityFeed, findActiveContracts } from './activity'
+import {
+  getRecentComments,
+  Comment,
+  listAllComments,
+} from '../lib/firebase/comments'
 import { Col } from '../components/layout/col'
 import { ContractCard } from '../components/contract-card'
+import { Bet, listAllBets } from '../lib/firebase/bets'
 
 export async function getStaticProps() {
   const [contracts, hotContracts, recentComments] = await Promise.all([
@@ -20,11 +25,20 @@ export async function getStaticProps() {
     getRecentComments().catch(() => []),
   ])
 
+  const activeContracts = findActiveContracts(contracts, recentComments)
+  const activeContractBets = await Promise.all(
+    activeContracts.map((contract) => listAllBets(contract.id))
+  )
+  const activeContractComments = await Promise.all(
+    activeContracts.map((contract) => listAllComments(contract.id))
+  )
+
   return {
     props: {
-      contracts,
+      activeContracts,
+      activeContractBets,
+      activeContractComments,
       hotContracts,
-      recentComments,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -32,17 +46,27 @@ export async function getStaticProps() {
 }
 
 const Home = (props: {
-  contracts: Contract[]
+  activeContracts: Contract[]
+  activeContractBets: Bet[][]
+  activeContractComments: Comment[][]
   hotContracts: Contract[]
-  recentComments: Comment[]
 }) => {
-  const { contracts, hotContracts, recentComments } = props
+  const {
+    hotContracts,
+    activeContracts,
+    activeContractBets,
+    activeContractComments,
+  } = props
 
   return (
     <Page>
       <HotMarkets hotContracts={hotContracts} />
       <Spacer h={10} />
-      <ActivityFeed contracts={contracts} recentComments={recentComments} />
+      <ActivityFeed
+        contracts={activeContracts}
+        contractBets={activeContractBets}
+        contractComments={activeContractComments}
+      />
     </Page>
   )
 }