Add comment inputs for free response answers

web/components/contract/contract-tabs.tsx

@@ -38,7 +38,11 @@ export function ContractTabs(props: {
       bets={bets}
       comments={comments}
       user={user}
-      mode="comments"
+      mode={
+        contract.outcomeType === 'FREE_RESPONSE'
+          ? 'free-response-comments'
+          : 'comments'
+      }
       betRowClassName="!mt-0 xl:hidden"
     />
   )

web/components/feed/activity-items.ts

@@ -33,6 +33,7 @@ export type CommentInputItem = BaseActivityItem & {
   type: 'commentInput'
   betsByCurrentUser: Bet[]
   comments: Comment[]
+  answerOutcome?: string
 }
 
 export type DescriptionItem = BaseActivityItem & {
@@ -263,6 +264,64 @@ function getAnswerGroups(
   return answerGroups
 }
 
+function getAnswerAndCommentInputGroups(
+  contract: FullContract<DPM, FreeResponse>,
+  bets: Bet[],
+  comments: Comment[],
+  user: User | undefined | null
+) {
+  let outcomes = _.uniq(bets.map((bet) => bet.outcome)).filter(
+    (outcome) => getOutcomeProbability(contract, outcome) > 0.0001
+  )
+  outcomes = _.sortBy(outcomes, (outcome) =>
+    getOutcomeProbability(contract, outcome)
+  )
+  const answerGroups = outcomes
+    .map((outcome) => {
+      const answerBets = bets.filter((bet) => bet.outcome === outcome)
+      const answerComments = comments.filter((comment) =>
+        answerBets.some(
+          (bet) => bet.id === comment.betId || comment.answerOutcome === outcome
+        )
+      )
+      const answer = contract.answers?.find(
+        (answer) => answer.id === outcome
+      ) as Answer
+
+      // Create a list of items for each answer group made up of bets with comments and a comment input
+      let items = []
+      items.push({
+        type: 'commentInput' as const,
+        id: 'commentInputFor' + outcome,
+        contract,
+        betsByCurrentUser: user
+          ? bets.filter((bet) => bet.userId === user.id)
+          : [],
+        comments: comments,
+        answerOutcome: outcome,
+      })
+      items.push(
+        ...getCommentsWithPositions(
+          answerBets,
+          answerComments,
+          contract
+        ).reverse()
+      )
+
+      return {
+        id: outcome,
+        type: 'answergroup' as const,
+        contract,
+        answer,
+        items,
+        user,
+      }
+    })
+    .filter((group) => group.answer)
+
+  return answerGroups
+}
+
 function groupBetsAndComments(
   bets: Bet[],
   comments: Comment[],
@@ -382,7 +441,7 @@ export function getAllContractActivityItems(
       )
     )
     items.push({
-      type: 'commentInput',
+      type: 'commentInput' as const,
       id: 'commentInput',
       contract,
       betsByCurrentUser: [],
@@ -408,7 +467,7 @@ export function getAllContractActivityItems(
 
   if (outcomeType === 'BINARY') {
     items.push({
-      type: 'commentInput',
+      type: 'commentInput' as const,
       id: 'commentInput',
       contract,
       betsByCurrentUser: [],
@@ -479,7 +538,7 @@ export function getSpecificContractActivityItems(
   comments: Comment[],
   user: User | null | undefined,
   options: {
-    mode: 'comments' | 'bets'
+    mode: 'comments' | 'bets' | 'free-response-comments'
   }
 ) {
   const { mode } = options
@@ -513,6 +572,16 @@ export function getSpecificContractActivityItems(
         comments: comments,
       })
       break
+    case 'free-response-comments':
+      items.push(
+        ...getAnswerAndCommentInputGroups(
+          contract as FullContract<DPM, FreeResponse>,
+          bets,
+          comments,
+          user
+        )
+      )
+      break
   }
 
   return items.reverse()

web/components/feed/contract-activity.tsx

@@ -16,7 +16,13 @@ export function ContractActivity(props: {
   bets: Bet[]
   comments: Comment[]
   user: User | null | undefined
-  mode: 'only-recent' | 'abbreviated' | 'all' | 'comments' | 'bets'
+  mode:
+    | 'only-recent'
+    | 'abbreviated'
+    | 'all'
+    | 'comments'
+    | 'bets'
+    | 'free-response-comments'
   contractPath?: string
   className?: string
   betRowClassName?: string
@@ -38,7 +44,9 @@ export function ContractActivity(props: {
       ? getRecentContractActivityItems(contract, bets, comments, user, {
           contractPath,
         })
-      : mode === 'comments' || mode === 'bets'
+      : mode === 'comments' ||
+        mode === 'bets' ||
+        mode === 'free-response-comments'
       ? getSpecificContractActivityItems(contract, bets, comments, user, {
           mode,
         })