Trim activity feed (#60)

* Trim activity feed: show only items from last 24 hours, remove contract description, shorter width.

* Preserve feed ordering based on initial fetch of bets

* Add see more button, description to explore items

web/components/activity-feed.tsx

@@ -1,9 +1,12 @@
 import _ from 'lodash'
-import { ContractFeed, ContractSummaryFeed } from '../components/contract-feed'
+import {
-import { Page } from '../components/page'
+  ContractActivityFeed,
+  ContractFeed,
+  ContractSummaryFeed,
+} from './contract-feed'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
-import { Col } from '../components/layout/col'
+import { Col } from './layout/col'
 import { Bet } from '../../common/bet'
 
 const MAX_ACTIVE_CONTRACTS = 75
@@ -72,30 +75,44 @@ export function findActiveContracts(
 
 export function ActivityFeed(props: {
   contracts: Contract[]
-  contractBets: Bet[][]
+  recentBets: Bet[]
-  contractComments: Comment[][]
+  recentComments: Comment[]
+  loadBetAndCommentHistory?: boolean
 }) {
-  const { contracts, contractBets, contractComments } = props
+  const { contracts, recentBets, recentComments, loadBetAndCommentHistory } =
+    props
 
-  return contracts.length > 0 ? (
+  const groupedBets = _.groupBy(recentBets, (bet) => bet.contractId)
+  const groupedComments = _.groupBy(
+    recentComments,
+    (comment) => comment.contractId
+  )
+
+  return (
     <Col className="items-center">
-      <Col className="w-full max-w-3xl">
+      <Col className="w-full">
         <Col className="w-full divide-y divide-gray-300 self-center bg-white">
-          {contracts.map((contract, i) => (
+          {contracts.map((contract) => (
             <div key={contract.id} className="py-6 px-2 sm:px-4">
-              <ContractFeed
+              {loadBetAndCommentHistory ? (
-                contract={contract}
+                <ContractFeed
-                bets={contractBets[i]}
+                  contract={contract}
-                comments={contractComments[i]}
+                  bets={groupedBets[contract.id] ?? []}
-                feedType="activity"
+                  comments={groupedComments[contract.id] ?? []}
-              />
+                  feedType="activity"
+                />
+              ) : (
+                <ContractActivityFeed
+                  contract={contract}
+                  bets={groupedBets[contract.id] ?? []}
+                  comments={groupedComments[contract.id] ?? []}
+                />
+              )}
             </div>
           ))}
         </Col>
       </Col>
     </Col>
-  ) : (
-    <></>
   )
 }
 
@@ -116,11 +133,3 @@ export function SummaryActivityFeed(props: { contracts: Contract[] }) {
     </Col>
   )
 }
-
-export default function ActivityPage() {
-  return (
-    <Page>
-      <ActivityFeed contracts={[]} contractBets={[]} contractComments={[]} />
-    </Page>
-  )
-}

web/components/contract-feed.tsx

@@ -290,7 +290,10 @@ function TruncatedComment(props: {
   }
 
   return (
-    <div className="mt-2 whitespace-pre-line break-words text-gray-700">
+    <div
+      className="mt-2 whitespace-pre-line break-words text-gray-700"
+      style={{ fontSize: 15 }}
+    >
       <Linkify text={truncated} />
       {truncated != comment && (
         <SiteLink href={moreHref} className="text-indigo-700">
@@ -301,8 +304,11 @@ function TruncatedComment(props: {
   )
 }
 
-function FeedQuestion(props: { contract: Contract }) {
+function FeedQuestion(props: {
-  const { contract } = props
+  contract: Contract
+  showDescription?: boolean
+}) {
+  const { contract, showDescription } = props
   const { creatorName, creatorUsername, question, resolution, outcomeType } =
     contract
   const { truePool } = contractMetrics(contract)
@@ -337,22 +343,34 @@ function FeedQuestion(props: { contract: Contract }) {
             {closeMessage}
           </span>
         </div>
-        <Col className="mb-4 items-start justify-between gap-2 sm:flex-row sm:gap-4">
+        <Col className="items-start justify-between gap-2 sm:flex-row sm:gap-4">
-          <SiteLink
+          <Col>
-            href={contractPath(contract)}
+            <SiteLink
-            className="text-lg text-indigo-700 sm:text-xl"
+              href={contractPath(contract)}
-          >
+              className="text-lg text-indigo-700 sm:text-xl"
-            {question}
+            >
-          </SiteLink>
+              {question}
+            </SiteLink>
+            {!showDescription && (
+              <SiteLink
+                href={contractPath(contract)}
+                className="text-sm relative top-4"
+              >
+                <div className="text-gray-500 pb-1.5">See more...</div>
+              </SiteLink>
+            )}
+          </Col>
           {(isBinary || resolution) && (
             <ResolutionOrChance className="items-center" contract={contract} />
           )}
         </Col>
-        <TruncatedComment
+        {showDescription && (
-          comment={contract.description}
+          <TruncatedComment
-          moreHref={contractPath(contract)}
+            comment={contract.description}
-          shouldTruncate
+            moreHref={contractPath(contract)}
-        />
+            shouldTruncate
+          />
+        )}
       </div>
     </>
   )
@@ -681,6 +699,7 @@ type ActivityItem = {
     | 'close'
     | 'resolve'
     | 'expand'
+    | undefined
 }
 
 type FeedType =
@@ -691,64 +710,24 @@ type FeedType =
   // Grouped for a multi-category outcome
   | 'multi'
 
-export function ContractFeed(props: {
+function FeedItems(props: {
   contract: Contract
-  bets: Bet[]
+  items: ActivityItem[]
-  comments: Comment[]
   feedType: FeedType
+  setExpanded: (expanded: boolean) => void
   outcome?: string // Which multi-category outcome to filter
   betRowClassName?: string
 }) {
-  const { contract, feedType, outcome, betRowClassName } = props
+  const { contract, items, feedType, outcome, setExpanded, betRowClassName } =
-  const { id, outcomeType } = contract
+    props
+  const { outcomeType } = contract
   const isBinary = outcomeType === 'BINARY'
 
-  const [expanded, setExpanded] = useState(false)
-  const user = useUser()
-
-  let bets = useBets(contract.id) ?? props.bets
-  bets = isBinary
-    ? bets.filter((bet) => !bet.isAnte)
-    : bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
-
-  if (feedType === 'multi') {
-    bets = bets.filter((bet) => bet.outcome === outcome)
-  }
-
-  const comments = useComments(id) ?? props.comments
-
-  const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS
-
-  const allItems = [
-    { type: 'start', id: 0 },
-    ...groupBets(bets, comments, groupWindow, user?.id),
-  ]
-  if (contract.closeTime && contract.closeTime <= Date.now()) {
-    allItems.push({ type: 'close', id: `${contract.closeTime}` })
-  }
-  if (contract.resolution) {
-    allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
-  }
-  if (feedType === 'multi') {
-    // Hack to add some more padding above the 'multi' feedType, by adding a null item
-    allItems.unshift({ type: '', id: -1 })
-  }
-
-  // If there are more than 5 items, only show the first, an expand item, and last 3
-  let items = allItems
-  if (!expanded && allItems.length > 5 && feedType == 'activity') {
-    items = [
-      allItems[0],
-      { type: 'expand', id: 'expand' },
-      ...allItems.slice(-3),
-    ]
-  }
-
   return (
     <div className="flow-root pr-2 md:pr-0">
-      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
+      <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((activityItem, activityItemIdx) => (
-          <div key={activityItem.id} className="relative pb-8">
+          <div key={activityItem.id} className="relative pb-6">
             {activityItemIdx !== items.length - 1 ? (
               <span
                 className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
@@ -792,6 +771,117 @@ export function ContractFeed(props: {
   )
 }
 
+export function ContractFeed(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: Comment[]
+  feedType: FeedType
+  outcome?: string // Which multi-category outcome to filter
+  betRowClassName?: string
+}) {
+  const { contract, feedType, outcome, betRowClassName } = props
+  const { id, outcomeType } = contract
+  const isBinary = outcomeType === 'BINARY'
+
+  const [expanded, setExpanded] = useState(false)
+  const user = useUser()
+
+  let bets = useBets(contract.id) ?? props.bets
+  bets = isBinary
+    ? bets.filter((bet) => !bet.isAnte)
+    : bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
+
+  if (feedType === 'multi') {
+    bets = bets.filter((bet) => bet.outcome === outcome)
+  }
+
+  const comments = useComments(id) ?? props.comments
+
+  const groupWindow = feedType == 'activity' ? 10 * DAY_IN_MS : DAY_IN_MS
+
+  const allItems: ActivityItem[] = [
+    { type: 'start', id: '0' },
+    ...groupBets(bets, comments, groupWindow, user?.id),
+  ]
+  if (contract.closeTime && contract.closeTime <= Date.now()) {
+    allItems.push({ type: 'close', id: `${contract.closeTime}` })
+  }
+  if (contract.resolution) {
+    allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
+  }
+  if (feedType === 'multi') {
+    // Hack to add some more padding above the 'multi' feedType, by adding a null item
+    allItems.unshift({ type: undefined, id: '-1' })
+  }
+
+  // If there are more than 5 items, only show the first, an expand item, and last 3
+  let items = allItems
+  if (!expanded && allItems.length > 5 && feedType == 'activity') {
+    items = [
+      allItems[0],
+      { type: 'expand', id: 'expand' },
+      ...allItems.slice(-3),
+    ]
+  }
+
+  return (
+    <FeedItems
+      contract={contract}
+      items={items}
+      feedType={feedType}
+      setExpanded={setExpanded}
+      betRowClassName={betRowClassName}
+      outcome={outcome}
+    />
+  )
+}
+
+export function ContractActivityFeed(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: Comment[]
+  betRowClassName?: string
+}) {
+  const { contract, betRowClassName, bets, comments } = props
+
+  const user = useUser()
+
+  bets.sort((b1, b2) => b1.createdTime - b2.createdTime)
+  comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
+
+  const allItems: ActivityItem[] = [
+    { type: 'start', id: '0' },
+    ...groupBets(bets, comments, DAY_IN_MS, user?.id),
+  ]
+  if (contract.closeTime && contract.closeTime <= Date.now()) {
+    allItems.push({ type: 'close', id: `${contract.closeTime}` })
+  }
+  if (contract.resolution) {
+    allItems.push({ type: 'resolve', id: `${contract.resolutionTime}` })
+  }
+
+  // Remove all but last bet group.
+  const betGroups = allItems.filter((item) => item.type === 'betgroup')
+  const lastBetGroup = betGroups[betGroups.length - 1]
+  const filtered = allItems.filter(
+    (item) => item.type !== 'betgroup' || item.id === lastBetGroup?.id
+  )
+
+  // Only show the first item plus the last three items.
+  const items =
+    filtered.length > 3 ? [filtered[0], ...filtered.slice(-3)] : filtered
+
+  return (
+    <FeedItems
+      contract={contract}
+      items={items}
+      feedType="activity"
+      setExpanded={() => {}}
+      betRowClassName={betRowClassName}
+    />
+  )
+}
+
 export function ContractSummaryFeed(props: {
   contract: Contract
   betRowClassName?: string
@@ -805,7 +895,7 @@ export function ContractSummaryFeed(props: {
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}>
         <div className="relative pb-8">
           <div className="relative flex items-start space-x-3">
-            <FeedQuestion contract={contract} />
+            <FeedQuestion contract={contract} showDescription />
           </div>
         </div>
       </div>

web/hooks/use-find-active-contracts.ts

@@ -4,11 +4,11 @@ import { useMemo, useRef } from 'react'
 import { Fold } from '../../common/fold'
 import { User } from '../../common/user'
 import { filterDefined } from '../../common/util/array'
-import { Bet, getRecentBets } from '../lib/firebase/bets'
+import { Bet } from '../lib/firebase/bets'
 import { Comment, getRecentComments } from '../lib/firebase/comments'
 import { Contract, getActiveContracts } from '../lib/firebase/contracts'
 import { listAllFolds } from '../lib/firebase/folds'
-import { findActiveContracts } from '../pages/activity'
+import { findActiveContracts } from '../components/activity-feed'
 import { useInactiveContracts } from './use-contracts'
 import { useFollowedFolds } from './use-fold'
 import { useUserBetContracts } from './use-user-bets'
@@ -20,12 +20,9 @@ export const getAllContractInfo = async () => {
     listAllFolds().catch(() => []),
   ])
 
-  const [recentBets, recentComments] = await Promise.all([
+  const recentComments = await getRecentComments()
-    getRecentBets(),
-    getRecentComments(),
-  ])
 
-  return { contracts, recentBets, recentComments, folds }
+  return { contracts, recentComments, folds }
 }
 
 export const useFilterYourContracts = (

web/pages/fold/[...slugs]/index.tsx

@@ -12,7 +12,10 @@ import {
   getFoldBySlug,
   getFoldContracts,
 } from '../../../lib/firebase/folds'
-import { ActivityFeed, findActiveContracts } from '../../activity'
+import {
+  ActivityFeed,
+  findActiveContracts,
+} from '../../../components/activity-feed'
 import { TagsList } from '../../../components/tags-list'
 import { Row } from '../../../components/layout/row'
 import { UserLink } from '../../../components/user-page'
@@ -36,6 +39,9 @@ import { SEO } from '../../../components/SEO'
 import { useTaggedContracts } from '../../../hooks/use-contracts'
 import { Linkify } from '../../../components/linkify'
 import { filterDefined } from '../../../../common/util/array'
+import { useRecentBets } from '../../../hooks/use-bets'
+import { useRecentComments } from '../../../hooks/use-comments'
+import { LoadingIndicator } from '../../../components/loading-indicator'
 
 export async function getStaticProps(props: { params: { slugs: string[] } }) {
   const { slugs } = props.params
@@ -48,7 +54,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
   const bets = await Promise.all(
     contracts.map((contract) => listAllBets(contract.id))
   )
-  const betsByContract = _.fromPairs(contracts.map((c, i) => [c.id, bets[i]]))
 
   let activeContracts = findActiveContracts(contracts, [], _.flatten(bets))
   const [resolved, unresolved] = _.partition(
@@ -57,10 +62,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
   )
   activeContracts = [...unresolved, ...resolved]
 
-  const activeContractBets = activeContracts.map(
-    (contract) => betsByContract[contract.id] ?? []
-  )
-
   const creatorScores = scoreCreators(contracts, bets)
   const traderScores = scoreTraders(contracts, bets)
   const [topCreators, topTraders] = await Promise.all([
@@ -76,8 +77,6 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
       curator,
       contracts,
       activeContracts,
-      activeContractBets,
-      activeContractComments: activeContracts.map(() => []),
       traderScores,
       topTraders,
       creatorScores,
@@ -117,15 +116,8 @@ export default function FoldPage(props: {
   creatorScores: { [userId: string]: number }
   topCreators: User[]
 }) {
-  const {
+  const { curator, traderScores, topTraders, creatorScores, topCreators } =
-    curator,
+    props
-    activeContractBets,
-    activeContractComments,
-    traderScores,
-    topTraders,
-    creatorScores,
-    topCreators,
-  } = props
 
   const router = useRouter()
   const { slugs } = router.query as { slugs: string[] }
@@ -151,6 +143,9 @@ export default function FoldPage(props: {
     props.activeContracts.map((contract) => contractsMap[contract.id])
   )
 
+  const recentBets = useRecentBets()
+  const recentComments = useRecentComments()
+
   if (fold === null || !foldSubpages.includes(page) || slugs[2]) {
     return <Custom404 />
   }
@@ -233,19 +228,24 @@ export default function FoldPage(props: {
               />
             )}
             {page === 'activity' ? (
-              <>
+              recentBets && recentComments ? (
-                <ActivityFeed
+                <>
-                  contracts={activeContracts}
+                  <ActivityFeed
-                  contractBets={activeContractBets}
+                    contracts={activeContracts}
-                  contractComments={activeContractComments}
+                    recentBets={recentBets ?? []}
-                />
+                    recentComments={recentComments ?? []}
-                {activeContracts.length === 0 && (
+                    loadBetAndCommentHistory
-                  <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
+                  />
-                    No activity from matching markets.{' '}
+                  {activeContracts.length === 0 && (
-                    {isCurator && 'Try editing to add more tags!'}
+                    <div className="mx-2 mt-4 text-gray-500 lg:mx-0">
-                  </div>
+                      No activity from matching markets.{' '}
-                )}
+                      {isCurator && 'Try editing to add more tags!'}
-              </>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <LoadingIndicator className="mt-4" />
+              )
             ) : (
               <SearchableGrid
                 contracts={contracts}

web/pages/home.tsx

@@ -6,9 +6,8 @@ import _ from 'lodash'
 
 import { Contract } from '../lib/firebase/contracts'
 import { Page } from '../components/page'
-import { ActivityFeed, SummaryActivityFeed } from './activity'
+import { ActivityFeed, SummaryActivityFeed } from '../components/activity-feed'
 import { Comment } from '../lib/firebase/comments'
-import { Bet } from '../lib/firebase/bets'
 import FeedCreate from '../components/feed-create'
 import { Spacer } from '../components/layout/spacer'
 import { Col } from '../components/layout/col'
@@ -23,8 +22,9 @@ import {
   useFilterYourContracts,
   useFindActiveContracts,
 } from '../hooks/use-find-active-contracts'
-import { useGetRecentBets } from '../hooks/use-bets'
+import { useGetRecentBets, useRecentBets } from '../hooks/use-bets'
 import { useActiveContracts } from '../hooks/use-contracts'
+import { useRecentComments } from '../hooks/use-comments'
 
 export async function getStaticProps() {
   const contractInfo = await getAllContractInfo()
@@ -38,10 +38,9 @@ export async function getStaticProps() {
 const Home = (props: {
   contracts: Contract[]
   folds: Fold[]
-  recentBets: Bet[]
   recentComments: Comment[]
 }) => {
-  const { folds, recentComments } = props
+  const { folds } = props
   const user = useUser()
 
   const contracts = useActiveContracts() ?? props.contracts
@@ -51,13 +50,15 @@ const Home = (props: {
     contracts
   )
 
-  const recentBets = useGetRecentBets()
+  const initialRecentBets = useGetRecentBets()
-  const { activeContracts, activeBets, activeComments } =
+  const recentBets = useRecentBets() ?? initialRecentBets
-    useFindActiveContracts({
+  const recentComments = useRecentComments() ?? props.recentComments
-      contracts: yourContracts,
+
-      recentBets: recentBets ?? [],
+  const { activeContracts } = useFindActiveContracts({
-      recentComments,
+    contracts: yourContracts,
-    })
+    recentBets: initialRecentBets ?? [],
+    recentComments: props.recentComments,
+  })
 
   const exploreContracts = useExploreContracts()
 
@@ -71,7 +72,7 @@ const Home = (props: {
   return (
     <Page assertUser="signed-in">
       <Col className="items-center">
-        <Col className="w-full max-w-3xl">
+        <Col className="w-full max-w-[700px]">
           <FeedCreate user={user ?? undefined} />
           <Spacer h={6} />
 
@@ -116,8 +117,8 @@ const Home = (props: {
             (recentBets ? (
               <ActivityFeed
                 contracts={activeContracts}
-                contractBets={activeBets}
+                recentBets={recentBets}
-                contractComments={activeComments}
+                recentComments={recentComments}
               />
             ) : (
               <LoadingIndicator className="mt-4" />