Load all fold comments server-side to serve better feed

web/lib/firebase/comments.ts

@@ -5,7 +5,6 @@ import {
   setDoc,
   query,
   collectionGroup,
-  getDocs,
   where,
   orderBy,
 } from 'firebase/firestore'

web/pages/activity.tsx

@@ -2,8 +2,6 @@ import _ from 'lodash'
 import { ContractFeed } from '../components/contract-feed'
 import { Page } from '../components/page'
 import { Title } from '../components/title'
-import { useRecentComments } from '../hooks/use-comments'
-import { useContracts } from '../hooks/use-contracts'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
 import { Col } from '../components/layout/col'
@@ -68,22 +66,15 @@ export function ActivityFeed(props: {
   contracts: Contract[]
   contractBets: Bet[][]
   contractComments: Comment[][]
-  listenForChanges?: boolean
 }) {
-  const { contractBets, contractComments, listenForChanges } = props
-  const contracts = useContracts() ?? props.contracts
-  const recentComments = useRecentComments()
-  const activeContracts =
-    listenForChanges && recentComments
-      ? findActiveContracts(contracts, recentComments)
-      : props.contracts
+  const { contracts, contractBets, contractComments } = props
 
-  return activeContracts.length > 0 ? (
+  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, i) => (
+          {contracts.map((contract, i) => (
             <div key={contract.id} className="py-6 px-2 sm:px-4">
               <ContractFeed
                 contract={contract}

web/pages/fold/[foldSlug].tsx

@@ -1,9 +1,10 @@
+import _ from 'lodash'
 import { Fold } from '../../../common/fold'
 import { Comment } from '../../../common/comment'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
 import { Bet, listAllBets } from '../../lib/firebase/bets'
-import { getRecentComments, listAllComments } from '../../lib/firebase/comments'
+import { listAllComments } from '../../lib/firebase/comments'
 import { Contract } from '../../lib/firebase/contracts'
 import { getFoldBySlug, getFoldContracts } from '../../lib/firebase/folds'
 import { ActivityFeed, findActiveContracts } from '../activity'
@@ -12,18 +13,22 @@ import { TagsList } from '../../components/tags-list'
 export async function getStaticProps(props: { params: { foldSlug: string } }) {
   const { foldSlug } = props.params
 
-  const recentCommentsPromise = getRecentComments().catch(() => [])
-
   const fold = await getFoldBySlug(foldSlug)
   const contracts = fold ? await getFoldContracts(fold) : []
+  const contractComments = await Promise.all(
+    contracts.map((contract) => listAllComments(contract.id))
+  )
 
-  const recentComments = await recentCommentsPromise
-  const activeContracts = findActiveContracts(contracts, recentComments)
+  const activeContracts = findActiveContracts(
+    contracts,
+    _.flatten(contractComments)
+  )
   const activeContractBets = await Promise.all(
     activeContracts.map((contract) => listAllBets(contract.id))
   )
-  const activeContractComments = await Promise.all(
-    activeContracts.map((contract) => listAllComments(contract.id))
+  const activeContractComments = activeContracts.map(
+    (contract) =>
+      contractComments[contracts.findIndex((c) => c.id === contract.id)]
   )
 
   return {

web/pages/index.tsx

@@ -17,6 +17,8 @@ import {
 } from '../lib/firebase/comments'
 import { Bet, listAllBets } from '../lib/firebase/bets'
 import { ContractsGrid } from '../components/contracts-list'
+import { useContracts } from '../hooks/use-contracts'
+import { useRecentComments } from '../hooks/use-comments'
 
 export async function getStaticProps() {
   const [contracts, hotContracts, closingSoonContracts, recentComments] =
@@ -56,13 +58,18 @@ const Home = (props: {
   closingSoonContracts: Contract[]
 }) => {
   const {
-    activeContracts,
     activeContractBets,
     activeContractComments,
     hotContracts,
     closingSoonContracts,
   } = props
 
+  const contracts = useContracts() ?? props.activeContracts
+  const recentComments = useRecentComments()
+  const activeContracts = recentComments
+    ? findActiveContracts(contracts, recentComments)
+    : props.activeContracts
+
   return (
     <Page>
       <HotMarkets contracts={hotContracts} />
@@ -73,7 +80,6 @@ const Home = (props: {
         contracts={activeContracts}
         contractBets={activeContractBets}
         contractComments={activeContractComments}
-        listenForChanges
       />
     </Page>
   )