Use feed "mode". Clean up cases.

web/components/answers/answer-item.tsx

@@ -90,7 +90,8 @@ export function AnswerItem(props: {
             bets={[]}
             comments={[]}
             user={user}
-            outcome={answer.id}
+            filterToOutcome={answer.id}
+            mode="all"
           />
         )}
       </Col>

web/components/contract-overview.tsx

@@ -124,6 +124,7 @@ export const ContractOverview = (props: {
         bets={bets}
         comments={comments}
         user={user}
+        mode="all"
         betRowClassName="!mt-0"
       />
     </Col>

web/components/feed/activity-feed.tsx

@@ -8,16 +8,15 @@ import { Bet } from '../../../common/bet'
 import { useUser } from '../../hooks/use-user'
 import BetRow from '../bet-row'
 import { FeedQuestion } from './feed-items'
-import { ContractActivity, RecentContractActivity } from './contract-activity'
+import { ContractActivity } from './contract-activity'
 
 export function ActivityFeed(props: {
   contracts: Contract[]
   recentBets: Bet[]
   recentComments: Comment[]
-  loadBetAndCommentHistory?: boolean
+  mode: 'only-recent' | 'abbreviated' | 'all'
 }) {
-  const { contracts, recentBets, recentComments, loadBetAndCommentHistory } =
-    props
+  const { contracts, recentBets, recentComments, mode } = props
 
   const user = useUser()
 
@@ -30,24 +29,15 @@ export function ActivityFeed(props: {
   return (
     <FeedContainer
       contracts={contracts}
-      renderContract={(contract) =>
-        loadBetAndCommentHistory ? (
-          <ContractActivity
-            user={user}
-            contract={contract}
-            bets={groupedBets[contract.id] ?? []}
-            comments={groupedComments[contract.id] ?? []}
-            abbreviated
-          />
-        ) : (
-          <RecentContractActivity
-            user={user}
-            contract={contract}
-            bets={groupedBets[contract.id] ?? []}
-            comments={groupedComments[contract.id] ?? []}
-          />
-        )
-      }
+      renderContract={(contract) => (
+        <ContractActivity
+          user={user}
+          contract={contract}
+          bets={groupedBets[contract.id] ?? []}
+          comments={groupedComments[contract.id] ?? []}
+          mode={mode}
+        />
+      )}
     />
   )
 }

web/components/feed/activity-items.ts

@@ -87,7 +87,8 @@ function groupBets(
   comments: Comment[],
   windowMs: number,
   contract: Contract,
-  userId?: string
+  userId: string | undefined,
+  hideOutcome: boolean
 ) {
   const commentsMap = mapCommentsByBetId(comments)
   const items: ActivityItem[] = []
@@ -103,7 +104,7 @@ function groupBets(
         bets: [...group],
         id: group[0].id,
         contract,
-        hideOutcome: false,
+        hideOutcome,
       })
     }
     group = []
@@ -118,10 +119,10 @@ function groupBets(
           comment,
           bet,
           contract,
-          showOutcomeLabel: true,
+          showOutcomeLabel: !hideOutcome,
           truncate: true,
         }
-      : { type: 'bet' as const, id: bet.id, bet, contract, hideOutcome: false }
+      : { type: 'bet' as const, id: bet.id, bet, contract, hideOutcome }
   }
 
   for (const bet of bets) {
@@ -227,7 +228,9 @@ export function getAllContractActivityItems(
       ? [{ type: 'createanswer', id: answer.id, contract, answer }]
       : [{ type: 'description', id: '0', contract }]
 
-  items.push(...groupBets(bets, comments, DAY_IN_MS, contract, user?.id))
+  items.push(
+    ...groupBets(bets, comments, DAY_IN_MS, contract, user?.id, !!outcome)
+  )
 
   if (contract.closeTime && contract.closeTime <= Date.now()) {
     items.push({ type: 'close', id: `${contract.closeTime}`, contract })
@@ -248,12 +251,10 @@ export function getRecentContractActivityItems(
   bets = bets.sort((b1, b2) => b1.createdTime - b2.createdTime)
   comments = comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
 
-  const items: ActivityItem[] = []
-  items.push(
-    ...(contract.outcomeType === 'FREE_RESPONSE'
+  const items: ActivityItem[] =
+    contract.outcomeType === 'FREE_RESPONSE'
       ? getAnswerGroups(contract, bets, comments, user)
-      : groupBets(bets, comments, DAY_IN_MS, contract, user?.id))
-  )
+      : groupBets(bets, comments, DAY_IN_MS, contract, user?.id, false)
 
   // Remove all but last bet group.
   const betGroups = items.filter((item) => item.type === 'betgroup')

web/components/feed/contract-activity.tsx

@@ -1,4 +1,4 @@
-import _ from 'lodash'
+import _, { update } from 'lodash'
 
 import { Contract } from '../../lib/firebase/contracts'
 import { Comment } from '../../lib/firebase/comments'
@@ -17,24 +17,33 @@ export function ContractActivity(props: {
   bets: Bet[]
   comments: Comment[]
   user: User | null | undefined
-  outcome?: string // Which multi-category outcome to filter
-  abbreviated?: boolean
+  mode: 'only-recent' | 'abbreviated' | 'all'
+  filterToOutcome?: string // Which multi-category outcome to filter
   betRowClassName?: string
 }) {
-  const { contract, user, outcome, abbreviated, betRowClassName } = props
+  const { contract, user, filterToOutcome, mode, betRowClassName } = props
 
-  const comments = useComments(contract.id) ?? props.comments
-  const bets = useBets(contract.id) ?? props.bets
+  const updatedComments =
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    mode === 'only-recent' ? undefined : useComments(contract.id)
+  const comments = updatedComments ?? props.comments
 
-  let items = getAllContractActivityItems(
-    contract,
-    bets,
-    comments,
-    user,
-    outcome
-  )
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const updatedBets = mode === 'only-recent' ? undefined : useBets(contract.id)
+  const bets = updatedBets ?? props.bets
 
-  if (abbreviated) {
+  let items =
+    mode === 'only-recent'
+      ? getRecentContractActivityItems(contract, bets, comments, user)
+      : getAllContractActivityItems(
+          contract,
+          bets,
+          comments,
+          user,
+          filterToOutcome
+        )
+
+  if (mode === 'abbreviated') {
     items = [items[0], ...items.slice(-3)]
   }
 
@@ -42,29 +51,6 @@ export function ContractActivity(props: {
     <FeedItems
       contract={contract}
       items={items}
-      feedType={abbreviated ? 'activity' : 'market'}
-      betRowClassName={betRowClassName}
-      outcome={outcome}
-    />
-  )
-}
-
-export function RecentContractActivity(props: {
-  contract: Contract
-  bets: Bet[]
-  comments: Comment[]
-  user: User | null | undefined
-  betRowClassName?: string
-}) {
-  const { contract, bets, comments, user, betRowClassName } = props
-
-  const items = getRecentContractActivityItems(contract, bets, comments, user)
-
-  return (
-    <FeedItems
-      contract={contract}
-      items={items}
-      feedType="activity"
       betRowClassName={betRowClassName}
     />
   )

web/components/feed/feed-items.tsx

@@ -48,24 +48,13 @@ import { Answer } from '../../../common/answer'
 import { ActivityItem } from './activity-items'
 import { User } from '../../../common/user'
 
-export type FeedType =
-  // Main homepage/fold feed,
-  | 'activity'
-  // Comments feed on a market
-  | 'market'
-  // Grouped for a multi-category outcome
-  | 'multi'
-
 export function FeedItems(props: {
   contract: Contract
   items: ActivityItem[]
-  feedType: FeedType
-  outcome?: string // Which multi-category outcome to filter
   betRowClassName?: string
 }) {
-  const { contract, items, feedType, outcome, betRowClassName } = props
+  const { contract, items, betRowClassName } = props
   const { outcomeType } = contract
-  const isBinary = outcomeType === 'BINARY'
 
   return (
     <div className="flow-root pr-2 md:pr-0">
@@ -102,7 +91,7 @@ export function FeedItems(props: {
           </div>
         ))}
       </div>
-      {isBinary && tradingAllowed(contract) && (
+      {outcomeType === 'BINARY' && tradingAllowed(contract) && (
         <BetRow contract={contract} className={clsx('mb-2', betRowClassName)} />
       )}
     </div>
@@ -529,8 +518,7 @@ function FeedCreateAnswer(props: { contract: Contract; answer: Answer }) {
             name={answer.name}
             username={answer.username}
           />{' '}
-          submitted answer <OutcomeLabel outcome={answer.id} />{' '}
-          <Timestamp time={contract.createdTime} />
+          submitted this answer <Timestamp time={answer.createdTime} />
         </div>
       </div>
     </>
@@ -731,15 +719,3 @@ function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {
     </>
   )
 }
-
-// On 'multi' feeds, the outcome is redundant, so we hide it
-function MaybeOutcomeLabel(props: { outcome: string; feedType: FeedType }) {
-  const { outcome, feedType } = props
-  return feedType === 'multi' ? null : (
-    <span>
-      {' '}
-      of <OutcomeLabel outcome={outcome} />
-      {/* TODO: Link to the correct e.g. #23 */}
-    </span>
-  )
-}

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

@@ -246,7 +246,7 @@ export default function FoldPage(props: {
                     contracts={activeContracts}
                     recentBets={recentBets ?? []}
                     recentComments={recentComments ?? []}
-                    loadBetAndCommentHistory
+                    mode="abbreviated"
                   />
                   {activeContracts.length === 0 && (
                     <div className="mx-2 mt-4 text-gray-500 lg:mx-0">

web/pages/home.tsx

@@ -131,6 +131,7 @@ const Home = (props: {
                 contracts={activeContracts}
                 recentBets={recentBets}
                 recentComments={recentComments}
+                mode="only-recent"
               />
             ) : (
               <LoadingIndicator className="mt-4" />