From d0700c1221f59f33808967136ac80e40d61d4c9f Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Fri, 29 Apr 2022 10:39:59 -0600
Subject: [PATCH] Show users position or recent bet with comments

---
 web/components/feed/activity-items.ts   |  66 +++--
 web/components/feed/feed-items.tsx      | 342 +++++++++++++++---------
 web/pages/[username]/[contractSlug].tsx |   2 +-
 3 files changed, 261 insertions(+), 149 deletions(-)

diff --git a/web/components/feed/activity-items.ts b/web/components/feed/activity-items.ts
index 2dc8c564..fa8b15b9 100644
--- a/web/components/feed/activity-items.ts
+++ b/web/components/feed/activity-items.ts
@@ -31,6 +31,8 @@ type BaseActivityItem = {
 
 export type CommentInputItem = BaseActivityItem & {
   type: 'commentInput'
+  bets: Bet[]
+  comments: Comment[]
 }
 
 export type DescriptionItem = BaseActivityItem & {
@@ -48,12 +50,13 @@ export type BetItem = BaseActivityItem & {
   bet: Bet
   hideOutcome: boolean
   smallAvatar: boolean
+  hideComment?: boolean
 }
 
 export type CommentItem = BaseActivityItem & {
   type: 'comment'
   comment: Comment
-  bet: Bet | undefined
+  betsBySameUser: Bet[]
   hideOutcome: boolean
   truncate: boolean
   smallAvatar: boolean
@@ -129,7 +132,7 @@ function groupBets(
           type: 'comment' as const,
           id: bet.id,
           comment,
-          bet,
+          betsBySameUser: [bet],
           contract,
           hideOutcome,
           truncate: abbreviated,
@@ -280,7 +283,7 @@ function groupBetsAndComments(
       id: comment.id,
       contract: contract,
       comment,
-      bet: undefined,
+      betsBySameUser: [],
       truncate: abbreviated,
       hideOutcome: true,
       smallAvatar,
@@ -308,6 +311,37 @@ function groupBetsAndComments(
   return abbrItems
 }
 
+function getCommentsWithPositions(
+  bets: Bet[],
+  comments: Comment[],
+  contract: Contract
+) {
+  function mapBetsByUserId(bets: Bet[]) {
+    return bets.reduce((acc, bet) => {
+      const userId = bet.userId
+      if (!acc[userId]) {
+        acc[userId] = []
+      }
+      acc[userId].push(bet)
+      return acc
+    }, {} as { [userId: string]: Bet[] })
+  }
+  const betsByUserId = mapBetsByUserId(bets)
+
+  const items = comments.map((comment) => ({
+    type: 'comment' as const,
+    id: comment.id,
+    contract: contract,
+    comment,
+    betsBySameUser: bets.length === 0 ? [] : betsByUserId[comment.userId],
+    truncate: true,
+    hideOutcome: false,
+    smallAvatar: false,
+  }))
+
+  return items
+}
+
 export function getAllContractActivityItems(
   contract: Contract,
   bets: Bet[],
@@ -361,6 +395,8 @@ export function getAllContractActivityItems(
       type: 'commentInput',
       id: 'commentInput',
       contract,
+      bets: [],
+      comments: [],
     })
   } else {
     items.push(
@@ -385,6 +421,8 @@ export function getAllContractActivityItems(
       type: 'commentInput',
       id: 'commentInput',
       contract,
+      bets: [],
+      comments: [],
     })
   }
 
@@ -467,32 +505,20 @@ export function getSpecificContractActivityItems(
           contract,
           hideOutcome: false,
           smallAvatar: false,
+          hideComment: true,
         }))
       )
       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(...getCommentsWithPositions(bets, comments, contract))
+
       items.push({
         type: 'commentInput',
         id: 'commentInput',
         contract,
+        bets: bets,
+        comments: comments,
       })
       break
   }
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index eb2cd174..5b224d9d 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -56,8 +56,7 @@ import { trackClick } from '../../lib/firebase/tracking'
 import { firebaseLogin } from '../../lib/firebase/users'
 import { DAY_MS } from '../../../common/util/time'
 import NewContractBadge from '../new-contract-badge'
-import { useUserContractBets } from '../../hooks/use-user-bets'
-import { useSaveShares } from '../use-save-shares'
+import { calculateCpmmSale } from '../../../common/calculate-cpmm'
 
 export function FeedItems(props: {
   contract: Contract
@@ -131,29 +130,38 @@ function FeedItem(props: { item: ActivityItem }) {
 export function FeedComment(props: {
   contract: Contract
   comment: Comment
-  bet: Bet | undefined
+  betsBySameUser: Bet[]
   hideOutcome: boolean
   truncate: boolean
   smallAvatar: boolean
 }) {
-  const { contract, comment, bet, hideOutcome, truncate, smallAvatar } = props
-  let money: string | undefined
-  let outcome: string | undefined
-  let bought: string | undefined
-  if (bet) {
-    outcome = bet.outcome
-    bought = bet.amount >= 0 ? 'bought' : 'sold'
-    money = formatMoney(Math.abs(bet.amount))
-  }
-  const { text, userUsername, userName, userAvatarUrl, createdTime, userId } =
-    comment
+  const {
+    contract,
+    comment,
+    betsBySameUser,
+    hideOutcome,
+    truncate,
+    smallAvatar,
+  } = props
+  const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
+  let outcome: string | undefined,
+    bought: string | undefined,
+    money: string | undefined
 
-  const userBets = useUserContractBets(userId, contract.id)
-  const { yesFloorShares, noFloorShares } = useSaveShares(
-    contract as FullContract<CPMM | DPM, Binary>,
-    userBets
-  )
-  const userPosition = yesFloorShares || noFloorShares
+  const matchedBet = betsBySameUser.find((bet) => bet.id === comment.betId)
+  if (matchedBet) {
+    outcome = matchedBet.outcome
+    bought = matchedBet.amount >= 0 ? 'bought' : 'sold'
+    money = formatMoney(Math.abs(matchedBet.amount))
+  }
+
+  // Only calculated if they don't have a matching bet
+  const [userPosition, userPositionMoney, yesFloorShares, noFloorShares] =
+    getBettorsPosition(
+      contract,
+      comment.createdTime,
+      matchedBet ? [] : betsBySameUser
+    )
 
   return (
     <>
@@ -171,36 +179,33 @@ export function FeedComment(props: {
               username={userUsername}
               name={userName}
             />{' '}
-            {contract.outcomeType === 'BINARY' ? (
-              userPosition > 0 && (
-                <>
-                  {'owns ' + userPosition + ' shares '}
-                  <>
-                    {' of '}
-                    <OutcomeLabel
-                      outcome={yesFloorShares > noFloorShares ? 'YES' : 'NO'}
-                      contract={contract}
-                      truncate="short"
-                    />
-                  </>
-                </>
-              )
-            ) : (
+            {!matchedBet && userPosition > 0 && (
               <>
-                {bought} {money}
-                {!hideOutcome && (
-                  <>
-                    {' '}
-                    of{' '}
-                    <OutcomeLabel
-                      outcome={outcome ? outcome : ''}
-                      contract={contract}
-                      truncate="short"
-                    />
-                  </>
-                )}
+                {'with ' + userPositionMoney + ' '}
+                <>
+                  {' of '}
+                  <OutcomeLabel
+                    outcome={yesFloorShares > noFloorShares ? 'YES' : 'NO'}
+                    contract={contract}
+                    truncate="short"
+                  />
+                </>
               </>
             )}
+            <>
+              {bought} {money}
+              {outcome && !hideOutcome && (
+                <>
+                  {' '}
+                  of{' '}
+                  <OutcomeLabel
+                    outcome={outcome ? outcome : ''}
+                    contract={contract}
+                    truncate="short"
+                  />
+                </>
+              )}
+            </>
             <RelativeTimestamp time={createdTime} />
           </p>
         </div>
@@ -214,20 +219,12 @@ export function FeedComment(props: {
   )
 }
 
-function RelativeTimestamp(props: { time: number }) {
-  const { time } = props
-  return (
-    <DateTimeTooltip time={time}>
-      <span className="ml-1 whitespace-nowrap text-gray-400">
-        {fromNow(time)}
-      </span>
-    </DateTimeTooltip>
-  )
-}
-
-export function CommentInput(props: { contract: Contract }) {
-  // see if we can comment input on any bet:
-  const { contract } = props
+export function CommentInput(props: {
+  contract: Contract
+  bets: Bet[]
+  comments: Comment[]
+}) {
+  const { contract, bets, comments } = props
   const user = useUser()
   const [comment, setComment] = useState('')
 
@@ -240,14 +237,50 @@ export function CommentInput(props: { contract: Contract }) {
     setComment('')
   }
 
+  // Should this be oldest bet or most recent bet?
+  const mostRecentCommentableBet = bets
+    .filter(
+      (bet) =>
+        canCommentOnBet(bet.userId, bet.createdTime, user) &&
+        !comments.some((comment) => comment.betId == bet.id)
+    )
+    .sort((b1, b2) => b1.createdTime - b2.createdTime)
+    .pop()
+
+  if (mostRecentCommentableBet) {
+    return (
+      <FeedBet
+        contract={contract}
+        bet={mostRecentCommentableBet}
+        hideOutcome={false}
+        smallAvatar={false}
+      />
+    )
+  }
+  const [userPosition, userPositionMoney, yesFloorShares, noFloorShares] =
+    getBettorsPosition(contract, Date.now(), bets)
+
   return (
     <>
-      <Row className={'flex w-full gap-2 pt-5'}>
+      <Row className={'flex w-full gap-2 pt-3'}>
         <div>
           <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
         </div>
         <div className={'min-w-0 flex-1 py-1.5'}>
           <div className="text-sm text-gray-500">
+            {user && userPosition > 0 && (
+              <>
+                {'You with ' + userPositionMoney + ' '}
+                <>
+                  {' of '}
+                  <OutcomeLabel
+                    outcome={yesFloorShares > noFloorShares ? 'YES' : 'NO'}
+                    contract={contract}
+                    truncate="short"
+                  />
+                </>
+              </>
+            )}
             <div className="mt-2">
               <Textarea
                 value={comment}
@@ -278,20 +311,68 @@ export function CommentInput(props: { contract: Contract }) {
   )
 }
 
+function RelativeTimestamp(props: { time: number }) {
+  const { time } = props
+  return (
+    <DateTimeTooltip time={time}>
+      <span className="ml-1 whitespace-nowrap text-gray-400">
+        {fromNow(time)}
+      </span>
+    </DateTimeTooltip>
+  )
+}
+
+function getBettorsPosition(
+  contract: Contract,
+  createdTime: number,
+  bets: Bet[]
+) {
+  let yesFloorShares = 0,
+    yesShares = 0,
+    noShares = 0,
+    noFloorShares = 0
+  // TODO: show which of the answers was their majority stake at time of comment for FR?
+  if (contract.outcomeType != 'BINARY') {
+    return [0, 0, 0, 0]
+  }
+  if (bets.length === 0) {
+    return [0, 0, 0, 0]
+  }
+
+  // Calculate the majority shares they had when they made the comment
+  const betsBefore = bets.filter((prevBet) => prevBet.createdTime < createdTime)
+  const [yesBets, noBets] = _.partition(
+    betsBefore ?? [],
+    (bet) => bet.outcome === 'YES'
+  )
+  yesShares = _.sumBy(yesBets, (bet) => bet.shares)
+  noShares = _.sumBy(noBets, (bet) => bet.shares)
+  yesFloorShares = Math.floor(yesShares)
+  noFloorShares = Math.floor(noShares)
+
+  const userPosition = yesFloorShares || noFloorShares
+  const { saleValue } = calculateCpmmSale(
+    contract as FullContract<CPMM, Binary>,
+    yesShares || noShares,
+    yesFloorShares > noFloorShares ? 'YES' : 'NO'
+  )
+  const userPositionMoney = formatMoney(Math.abs(saleValue))
+  return [userPosition, userPositionMoney, yesFloorShares, noFloorShares]
+}
+
 export function FeedBet(props: {
   contract: Contract
   bet: Bet
   hideOutcome: boolean
   smallAvatar: boolean
+  hideComment?: boolean
   bettor?: User // If set: reveal bettor identity
 }) {
-  const { contract, bet, hideOutcome, smallAvatar, bettor } = props
+  const { contract, bet, hideOutcome, smallAvatar, bettor, hideComment } = props
   const { id, amount, outcome, createdTime, userId } = bet
   const user = useUser()
   const isSelf = user?.id === userId
-  const canComment =
-    canCommentOnBet(userId, createdTime, user) &&
-    contract.outcomeType !== 'BINARY'
+  const canComment = canCommentOnBet(userId, createdTime, user) && !hideComment
 
   const [comment, setComment] = useState('')
   async function submitComment() {
@@ -304,71 +385,76 @@ export function FeedBet(props: {
 
   return (
     <>
-      <div>
-        {isSelf ? (
-          <Avatar
-            className={clsx(smallAvatar && 'ml-1')}
-            size={smallAvatar ? 'sm' : undefined}
-            avatarUrl={user.avatarUrl}
-            username={user.username}
-          />
-        ) : bettor ? (
-          <Avatar
-            className={clsx(smallAvatar && 'ml-1')}
-            size={smallAvatar ? 'sm' : undefined}
-            avatarUrl={bettor.avatarUrl}
-            username={bettor.username}
-          />
-        ) : (
-          <div className="relative px-1">
-            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
-              <UserIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
-            </div>
-          </div>
-        )}
-      </div>
-      <div className={'min-w-0 flex-1 py-1.5'}>
-        <div className="text-sm text-gray-500">
-          <span>{isSelf ? 'You' : bettor ? bettor.name : 'A trader'}</span>{' '}
-          {bought} {money}
-          {!hideOutcome && (
-            <>
-              {' '}
-              of{' '}
-              <OutcomeLabel
-                outcome={outcome}
-                contract={contract}
-                truncate="short"
-              />
-            </>
-          )}
-          <RelativeTimestamp time={createdTime} />
-          {(canComment || comment) && (
-            <div className="mt-2">
-              <Textarea
-                value={comment}
-                onChange={(e) => setComment(e.target.value)}
-                className="textarea textarea-bordered w-full resize-none"
-                placeholder="Add a comment..."
-                rows={3}
-                maxLength={MAX_COMMENT_LENGTH}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-                    submitComment()
-                  }
-                }}
-              />
-              <button
-                className="btn btn-outline btn-sm text-transform: mt-1 capitalize"
-                onClick={submitComment}
-                disabled={!canComment}
-              >
-                Comment
-              </button>
+      <Row className={'flex w-full gap-2 pt-3'}>
+        <div>
+          {isSelf ? (
+            <Avatar
+              className={clsx(smallAvatar && 'ml-1')}
+              size={smallAvatar ? 'sm' : undefined}
+              avatarUrl={user.avatarUrl}
+              username={user.username}
+            />
+          ) : bettor ? (
+            <Avatar
+              className={clsx(smallAvatar && 'ml-1')}
+              size={smallAvatar ? 'sm' : undefined}
+              avatarUrl={bettor.avatarUrl}
+              username={bettor.username}
+            />
+          ) : (
+            <div className="relative px-1">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
+                <UserIcon
+                  className="h-5 w-5 text-gray-500"
+                  aria-hidden="true"
+                />
+              </div>
             </div>
           )}
         </div>
-      </div>
+        <div className={'min-w-0 flex-1 py-1.5'}>
+          <div className="text-sm text-gray-500">
+            <span>{isSelf ? 'You' : bettor ? bettor.name : 'A trader'}</span>{' '}
+            {bought} {money}
+            {!hideOutcome && (
+              <>
+                {' '}
+                of{' '}
+                <OutcomeLabel
+                  outcome={outcome}
+                  contract={contract}
+                  truncate="short"
+                />
+              </>
+            )}
+            <RelativeTimestamp time={createdTime} />
+            {(canComment || comment) && (
+              <div className="mt-2">
+                <Textarea
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  className="textarea textarea-bordered w-full resize-none"
+                  placeholder="Add a comment..."
+                  rows={3}
+                  maxLength={MAX_COMMENT_LENGTH}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+                      submitComment()
+                    }
+                  }}
+                />
+                <button
+                  className="btn btn-outline btn-sm text-transform: mt-1 capitalize"
+                  onClick={submitComment}
+                  disabled={!canComment}
+                >
+                  Comment
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </Row>
     </>
   )
 }
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 6e6e4523..29786703 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -287,7 +287,7 @@ function ContractTopTrades(props: {
             <FeedComment
               contract={contract}
               comment={commentsById[topCommentId]}
-              bet={betsById[topCommentId]}
+              betsBySameUser={[betsById[topCommentId]]}
               hideOutcome={false}
               truncate={false}
               smallAvatar={false}