Just for playing with, bad code

functions/.gitignore

@@ -15,3 +15,4 @@ node_modules/
 package-lock.json
 ui-debug.log
 firebase-debug.log
+firestore_export/

web/components/feed/activity-items.ts

@@ -23,6 +23,7 @@ export type ActivityItem =
   | CloseItem
   | ResolveItem
   | CommentInputItem
+  | AnswerItem
 
 type BaseActivityItem = {
   id: string
@@ -73,6 +74,11 @@ export type AnswerGroupItem = BaseActivityItem & {
   items: ActivityItem[]
 }
 
+export type AnswerItem = BaseActivityItem & {
+  type: 'answer'
+  answer: Answer
+}
+
 export type CloseItem = BaseActivityItem & {
   type: 'close'
 }
@@ -233,13 +239,14 @@ function getAnswerGroups(
         (answer) => answer.id === outcome
       ) as Answer
 
-      let items = groupBets(answerBets, answerComments, contract, user?.id, {
+      // let items = groupBets(answerBets, answerComments, contract, user?.id, {
-        hideOutcome: true,
+      //   hideOutcome: true,
-        abbreviated,
+      //   abbreviated,
-        smallAvatar: true,
+      //   smallAvatar: true,
-        reversed,
+      //   reversed,
-      })
+      // })
-
+      //
+      let items: ActivityItem[] = []
       if (abbreviated) items = items.slice(-2)
 
       return {
@@ -255,6 +262,81 @@ function getAnswerGroups(
 
   return answerGroups
 }
+function getAnswers(
+  contract: FullContract<DPM, FreeResponse>,
+  bets: Bet[],
+  comments: Comment[],
+  user: User | undefined | null,
+  options: {
+    sortByProb: boolean
+    abbreviated: boolean
+    reversed: boolean
+  }
+) {
+  const { sortByProb, abbreviated, reversed } = options
+
+  let outcomes = _.uniq(bets.map((bet) => bet.outcome)).filter(
+    (outcome) => getOutcomeProbability(contract, outcome) > 0.0001
+  )
+  if (abbreviated) {
+    const lastComment = _.last(comments)
+    const lastCommentOutcome = bets.find(
+      (bet) => bet.id === lastComment?.betId
+    )?.outcome
+    const lastBetOutcome = _.last(bets)?.outcome
+    if (lastCommentOutcome && lastBetOutcome) {
+      outcomes = _.uniq([
+        ...outcomes.filter(
+          (outcome) =>
+            outcome !== lastCommentOutcome && outcome !== lastBetOutcome
+        ),
+        lastCommentOutcome,
+        lastBetOutcome,
+      ])
+    }
+    outcomes = outcomes.slice(-2)
+  }
+  if (sortByProb) {
+    outcomes = _.sortBy(outcomes, (outcome) =>
+      getOutcomeProbability(contract, outcome)
+    )
+  } else {
+    // Sort by recent bet.
+    outcomes = _.sortBy(outcomes, (outcome) =>
+      _.findLastIndex(bets, (bet) => bet.outcome === 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)
+      )
+      const answer = contract.answers?.find(
+        (answer) => answer.id === outcome
+      ) as Answer
+
+      // let items = groupBets(answerBets, answerComments, contract, user?.id, {
+      //   hideOutcome: true,
+      //   abbreviated,
+      //   smallAvatar: true,
+      //   reversed,
+      // })
+      //
+
+      return {
+        id: outcome,
+        type: 'answer' as const,
+        contract,
+        answer,
+        user,
+      }
+    })
+    .filter((group) => group.answer)
+
+  return answerGroups
+}
 
 function groupBetsAndComments(
   bets: Bet[],
@@ -329,7 +411,24 @@ export function getAllContractActivityItems(
 
   if (outcomeType === 'FREE_RESPONSE') {
     items.push(
-      ...getAnswerGroups(
+      ...groupBetsAndComments(bets, comments, contract, user?.id, {
+        hideOutcome: false,
+        abbreviated,
+        smallAvatar: false,
+        reversed,
+      })
+    )
+    const commentsByBetId = mapCommentsByBetId(comments)
+    items.push({
+      type: 'commentInput',
+      id: 'commentInput',
+      bets,
+      commentsByBetId,
+      contract,
+    })
+
+    items.push(
+      ...getAnswers(
         contract as FullContract<DPM, FreeResponse>,
         bets,
         comments,
@@ -359,14 +458,16 @@ export function getAllContractActivityItems(
     items.push({ type: 'resolve', id: `${contract.resolutionTime}`, contract })
   }
 
-  const commentsByBetId = mapCommentsByBetId(comments)
+  if (outcomeType === 'BINARY') {
-  items.push({
+    const commentsByBetId = mapCommentsByBetId(comments)
-    type: 'commentInput',
+    items.push({
-    id: 'commentInput',
+      type: 'commentInput',
-    bets,
+      id: 'commentInput',
-    commentsByBetId,
+      bets,
-    contract,
+      commentsByBetId,
-  })
+      contract,
+    })
+  }
 
   if (reversed) items.reverse()
 

web/components/feed/feed-items.tsx

@@ -67,7 +67,12 @@ export function FeedItems(props: {
     <div className={clsx('flow-root pr-2 md:pr-0', className)} ref={ref}>
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((item, activityItemIdx) => (
-          <div key={item.id} className="relative pb-6">
+          <div
+            key={item.id}
+            className={
+              item.type === 'answer' ? 'relative pb-2' : 'relative pb-6'
+            }
+          >
             {activityItemIdx !== items.length - 1 ||
             item.type === 'answergroup' ? (
               <span
@@ -104,6 +109,8 @@ function FeedItem(props: { item: ActivityItem }) {
       return <FeedBetGroup {...item} />
     case 'answergroup':
       return <FeedAnswerGroup {...item} />
+    case 'answer':
+      return <FeedAnswer {...item} />
     case 'close':
       return <FeedClose {...item} />
     case 'resolve':
@@ -195,9 +202,9 @@ export function CommentInput(props: {
   const user = useUser()
   const [comment, setComment] = useState('')
 
-  if (outcomeType === 'FREE_RESPONSE') {
+  // if (outcomeType === 'FREE_RESPONSE') {
-    return <div />
+  //   return <div />
-  }
+  // }
 
   let canCommentOnABet = false
   bets.some((bet) => {
@@ -224,34 +231,36 @@ export function CommentInput(props: {
 
   return (
     <>
-      <div>
+      <Row className={'flex w-full gap-2 pt-5'}>
-        <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
+        <div>
-      </div>
+          <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
-      <div className={'min-w-0 flex-1 py-1.5'}>
+        </div>
-        <div className="text-sm text-gray-500">
+        <div className={'min-w-0 flex-1 py-1.5'}>
-          <div className="mt-2">
+          <div className="text-sm text-gray-500">
-            <Textarea
+            <div className="mt-2">
-              value={comment}
+              <Textarea
-              onChange={(e) => setComment(e.target.value)}
+                value={comment}
-              className="textarea textarea-bordered w-full resize-none"
+                onChange={(e) => setComment(e.target.value)}
-              placeholder="Add a comment..."
+                className="textarea textarea-bordered w-full resize-none"
-              rows={3}
+                placeholder="Add a comment..."
-              maxLength={MAX_COMMENT_LENGTH}
+                rows={3}
-              onKeyDown={(e) => {
+                maxLength={MAX_COMMENT_LENGTH}
-                if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                onKeyDown={(e) => {
-                  submitComment()
+                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                }
+                    submitComment()
-              }}
+                  }
-            />
+                }}
-            <button
+              />
-              className="btn btn-outline btn-sm mt-1"
+              <button
-              onClick={submitComment}
+                className="btn btn-outline btn-sm mt-1"
-            >
+                onClick={submitComment}
-              Comment
+              >
-            </button>
+                Comment
+              </button>
+            </div>
           </div>
         </div>
-      </div>
+      </Row>
     </>
   )
 }
@@ -723,6 +732,71 @@ function FeedAnswerGroup(props: {
     </Col>
   )
 }
+function FeedAnswer(props: {
+  contract: FullContract<any, FreeResponse>
+  answer: Answer
+}) {
+  const { answer, contract } = props
+  const { username, avatarUrl, name, text } = answer
+
+  const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
+  const probPercent = formatPercent(prob)
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Col
+      className="bg-base-200 border-base-300 flex-1 p-3"
+      style={{ borderWidth: 2, borderRadius: 6 }}
+    >
+      <Modal open={open} setOpen={setOpen}>
+        <AnswerBetPanel
+          answer={answer}
+          contract={contract}
+          closePanel={() => setOpen(false)}
+          className="sm:max-w-84 !rounded-md bg-white !px-8 !py-6"
+          isModal={true}
+        />
+      </Modal>
+
+      <Row className="my-4 gap-3">
+        <div className="px-1">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
+            <Avatar username={username} avatarUrl={avatarUrl} />
+          </div>
+        </div>
+        <Col className="min-w-0 flex-1 gap-2">
+          <div className="text-sm text-gray-500">
+            <UserLink username={username} name={name} /> answered
+          </div>
+
+          <Col className="align-items justify-between gap-4 sm:flex-row">
+            <span className="whitespace-pre-line text-lg">
+              <Linkify text={text} />
+            </span>
+
+            <Row className="align-items justify-end gap-4">
+              <span
+                className={clsx(
+                  'text-2xl',
+                  tradingAllowed(contract) ? 'text-green-500' : 'text-gray-500'
+                )}
+              >
+                {probPercent}
+              </span>
+              <BuyButton
+                className={clsx(
+                  'btn-sm flex-initial !px-6 sm:flex',
+                  tradingAllowed(contract) ? '' : '!hidden'
+                )}
+                onClick={() => setOpen(true)}
+              />
+            </Row>
+          </Col>
+        </Col>
+      </Row>
+    </Col>
+  )
+}
 
 // TODO: Should highlight the entire Feed segment
 function FeedExpand(props: { setExpanded: (expanded: boolean) => void }) {