Separate comments and bets via tabs

web/components/contract/contract-tabs.tsx

@@ -21,13 +21,24 @@ export function ContractTabs(props: {
   bets.sort((bet1, bet2) => bet2.createdTime - bet1.createdTime)
   const userBets = user && bets.filter((bet) => bet.userId === user.id)
 
-  const activity = (
+  const betActivity = (
     <ContractActivity
       contract={contract}
       bets={bets}
       comments={comments}
       user={user}
-      mode="all"
+      mode="bets"
+      betRowClassName="!mt-0 xl:hidden"
+    />
+  )
+
+  const commentActivity = (
+    <ContractActivity
+      contract={contract}
+      bets={bets}
+      comments={comments}
+      user={user}
+      mode="comments"
       betRowClassName="!mt-0 xl:hidden"
     />
   )
@@ -48,7 +59,8 @@ export function ContractTabs(props: {
   return (
     <Tabs
       tabs={[
-        { title: 'Timeline', content: activity },
+        { title: 'Comments', content: commentActivity },
+        { title: 'Bets', content: betActivity },
         ...(!user || !userBets?.length
           ? []
           : [{ title: 'Your bets', content: yourTrades }]),

web/components/feed/activity-items.ts

@@ -31,8 +31,6 @@ type BaseActivityItem = {
 
 export type CommentInputItem = BaseActivityItem & {
   type: 'commentInput'
-  bets: Bet[]
-  commentsByBetId: Record<string, Comment>
 }
 
 export type DescriptionItem = BaseActivityItem & {
@@ -268,6 +266,7 @@ function groupBetsAndComments(
     reversed: boolean
   }
 ) {
+  const { reversed, smallAvatar, abbreviated } = options
   const commentsWithoutBets = comments
     .filter((comment) => !comment.betId)
     .map((comment) => ({
@@ -276,9 +275,9 @@ function groupBetsAndComments(
       contract: contract,
       comment,
       bet: undefined,
-      truncate: false,
+      truncate: abbreviated,
       hideOutcome: true,
-      smallAvatar: false,
+      smallAvatar,
     }))
 
   const groupedBets = groupBets(bets, comments, contract, userId, options)
@@ -294,6 +293,8 @@ function groupBetsAndComments(
       return item.bets[0].createdTime
     }
   })
+
+  if (reversed) sortedBetsAndComments.reverse()
   return sortedBetsAndComments
 }
 
@@ -308,8 +309,7 @@ export function getAllContractActivityItems(
 ) {
   const { abbreviated } = options
   const { outcomeType } = contract
-
-  const reversed = !abbreviated
+  const reversed = true
 
   bets =
     outcomeType === 'BINARY'
@@ -347,12 +347,9 @@ export function getAllContractActivityItems(
         }
       )
     )
-    const commentsByBetId = mapCommentsByBetId(comments)
     items.push({
       type: 'commentInput',
       id: 'commentInput',
-      bets,
-      commentsByBetId,
       contract,
     })
   } else {
@@ -374,12 +371,9 @@ export function getAllContractActivityItems(
   }
 
   if (outcomeType === 'BINARY') {
-    const commentsByBetId = mapCommentsByBetId(comments)
     items.push({
       type: 'commentInput',
       id: 'commentInput',
-      bets,
-      commentsByBetId,
       contract,
     })
   }
@@ -434,3 +428,56 @@ export function getRecentContractActivityItems(
 
   return [questionItem, ...items]
 }
+
+export function getSpecificContractActivityItems(
+  contract: Contract,
+  bets: Bet[],
+  comments: Comment[],
+  user: User | null | undefined,
+  options: {
+    mode: 'comments' | 'bets'
+  }
+) {
+  const { mode } = options
+  let items = [] as ActivityItem[]
+
+  switch (mode) {
+    case 'bets':
+      items.push(
+        ...groupBets(bets, comments, contract, user?.id, {
+          hideOutcome: false,
+          abbreviated: false,
+          smallAvatar: false,
+          reversed: false,
+        })
+      )
+      break
+
+    case 'comments':
+      const onlyBetsWithComments = bets.filter((bet) =>
+        comments.some((comment) => comment.betId === bet.id)
+      )
+      items.push(
+        ...groupBetsAndComments(
+          onlyBetsWithComments,
+          comments,
+          contract,
+          user?.id,
+          {
+            hideOutcome: false,
+            abbreviated: false,
+            smallAvatar: false,
+            reversed: false,
+          }
+        )
+      )
+      items.push({
+        type: 'commentInput',
+        id: 'commentInput',
+        contract,
+      })
+      break
+  }
+
+  return items.reverse()
+}

web/components/feed/contract-activity.tsx

@@ -1,5 +1,3 @@
-import _ from 'lodash'
-
 import { Contract } from '../../lib/firebase/contracts'
 import { Comment } from '../../lib/firebase/comments'
 import { Bet } from '../../../common/bet'
@@ -8,6 +6,7 @@ import { useComments } from '../../hooks/use-comments'
 import {
   getAllContractActivityItems,
   getRecentContractActivityItems,
+  getSpecificContractActivityItems,
 } from './activity-items'
 import { FeedItems } from './feed-items'
 import { User } from '../../../common/user'
@@ -17,7 +16,7 @@ export function ContractActivity(props: {
   bets: Bet[]
   comments: Comment[]
   user: User | null | undefined
-  mode: 'only-recent' | 'abbreviated' | 'all'
+  mode: 'only-recent' | 'abbreviated' | 'all' | 'comments' | 'bets'
   contractPath?: string
   className?: string
   betRowClassName?: string
@@ -39,6 +38,10 @@ export function ContractActivity(props: {
       ? getRecentContractActivityItems(contract, bets, comments, user, {
           contractPath,
         })
+      : mode === 'comments' || mode === 'bets'
+      ? getSpecificContractActivityItems(contract, bets, comments, user, {
+          mode,
+        })
       : getAllContractActivityItems(contract, bets, comments, user, {
           abbreviated: mode === 'abbreviated',
         })

web/components/feed/feed-items.tsx

@@ -191,31 +191,12 @@ function RelativeTimestamp(props: { time: number }) {
   )
 }
 
-export function CommentInput(props: {
-  contract: Contract
-  commentsByBetId: Record<string, Comment>
-  bets: Bet[]
-}) {
+export function CommentInput(props: { contract: Contract }) {
   // see if we can comment input on any bet:
-  const { contract, bets, commentsByBetId } = props
-  const { outcomeType } = contract
+  const { contract } = props
   const user = useUser()
   const [comment, setComment] = useState('')
 
-  let canCommentOnABet = false
-  bets.some((bet) => {
-    // make sure there is not already a comment with a matching bet id:
-    const matchingComment = commentsByBetId[bet.id]
-    if (matchingComment) {
-      return false
-    }
-    const { createdTime, userId } = bet
-    canCommentOnABet = canCommentOnBet(userId, createdTime, user)
-    return canCommentOnABet
-  })
-
-  if (canCommentOnABet) return <div />
-
   async function submitComment() {
     if (!comment) return
     if (!user) {