Refactor, improve efficiency of contract tabs stuff (#909)

* Move comments and tips fetching down into comments tab rendering

* Consolidate `contract-activity.tsx` into `contract-tabs.tsx`

* Move LP fetching into bets tab

web/components/contract/contract-tabs.tsx

@@ -1,12 +1,16 @@
+import { memo, useState } from 'react'
+import { getOutcomeProbability } from 'common/calculate'
+import { Pagination } from 'web/components/pagination'
+import { FeedBet } from '../feed/feed-bets'
+import { FeedLiquidity } from '../feed/feed-liquidity'
+import { FeedAnswerCommentGroup } from '../feed/feed-answer-comment-group'
+import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
+import { CommentTipMap } from 'web/hooks/use-tip-txns'
+import { groupBy, sortBy } from 'lodash'
 import { Bet } from 'common/bet'
-import { Contract } from 'common/contract'
+import { Contract, FreeResponseContract } from 'common/contract'
 import { ContractComment } from 'common/comment'
 import { PAST_BETS, User } from 'common/user'
-import {
-  ContractCommentsActivity,
-  ContractBetsActivity,
-  FreeResponseContractCommentsActivity,
-} from '../feed/contract-activity'
 import { ContractBetsTable, BetsSummary } from '../bets-list'
 import { Spacer } from '../layout/spacer'
 import { Tabs } from '../layout/tabs'
@@ -27,67 +31,15 @@ export function ContractTabs(props: {
   bets: Bet[]
   comments: ContractComment[]
 }) {
-  const { contract, user, bets } = props
+  const { contract, user, bets, comments } = props
-  const { outcomeType } = contract
-  const isMobile = useIsMobile()
 
-  const tips = useTipTxns({ contractId: contract.id })
+  const isMobile = useIsMobile()
-  const lps = useLiquidity(contract.id)
 
   const userBets =
     user && bets.filter((bet) => !bet.isAnte && bet.userId === user.id)
   const visibleBets = bets.filter(
     (bet) => !bet.isAnte && !bet.isRedemption && bet.amount !== 0
   )
-  const visibleLps = (lps ?? []).filter(
-    (l) =>
-      !l.isAnte &&
-      l.userId !== HOUSE_LIQUIDITY_PROVIDER_ID &&
-      l.userId !== DEV_HOUSE_LIQUIDITY_PROVIDER_ID &&
-      l.amount > 0
-  )
-
-  const comments = useComments(contract.id) ?? props.comments
-
-  const betActivity = lps != null && (
-    <ContractBetsActivity
-      contract={contract}
-      bets={visibleBets}
-      lps={visibleLps}
-    />
-  )
-
-  const generalComments = comments.filter(
-    (comment) =>
-      comment.answerOutcome === undefined &&
-      (outcomeType === 'FREE_RESPONSE' ? comment.betId === undefined : true)
-  )
-
-  const commentActivity =
-    outcomeType === 'FREE_RESPONSE' ? (
-      <>
-        <FreeResponseContractCommentsActivity
-          contract={contract}
-          comments={comments}
-          tips={tips}
-        />
-        <Col className="mt-8 flex w-full">
-          <div className="text-md mt-8 mb-2 text-left">General Comments</div>
-          <div className="mb-4 w-full border-b border-gray-200" />
-          <ContractCommentsActivity
-            contract={contract}
-            comments={generalComments}
-            tips={tips}
-          />
-        </Col>
-      </>
-    ) : (
-      <ContractCommentsActivity
-        contract={contract}
-        comments={comments}
-        tips={tips}
-      />
-    )
 
   const yourTrades = (
     <div>
@@ -107,8 +59,18 @@ export function ContractTabs(props: {
     <Tabs
       currentPageForAnalytics={'contract'}
       tabs={[
-        { title: 'Comments', content: commentActivity },
+        {
-        { title: capitalize(PAST_BETS), content: betActivity },
+          title: 'Comments',
+          content: (
+            <CommentsTabContent contract={contract} comments={comments} />
+          ),
+        },
+        {
+          title: capitalize(PAST_BETS),
+          content: (
+            <ContractBetsActivity contract={contract} bets={visibleBets} />
+          ),
+        },
         ...(!user || !userBets?.length
           ? []
           : [
@@ -121,3 +83,175 @@ export function ContractTabs(props: {
     />
   )
 }
+
+const CommentsTabContent = memo(function CommentsTabContent(props: {
+  contract: Contract
+  comments: ContractComment[]
+}) {
+  const { contract, comments } = props
+  const tips = useTipTxns({ contractId: contract.id })
+  const updatedComments = useComments(contract.id) ?? comments
+  if (contract.outcomeType === 'FREE_RESPONSE') {
+    return (
+      <>
+        <FreeResponseContractCommentsActivity
+          contract={contract}
+          comments={updatedComments}
+          tips={tips}
+        />
+        <Col className="mt-8 flex w-full">
+          <div className="text-md mt-8 mb-2 text-left">General Comments</div>
+          <div className="mb-4 w-full border-b border-gray-200" />
+          <ContractCommentsActivity
+            contract={contract}
+            comments={updatedComments.filter(
+              (comment) =>
+                comment.answerOutcome === undefined &&
+                comment.betId === undefined
+            )}
+            tips={tips}
+          />
+        </Col>
+      </>
+    )
+  } else {
+    return (
+      <ContractCommentsActivity
+        contract={contract}
+        comments={comments}
+        tips={tips}
+      />
+    )
+  }
+})
+
+function ContractBetsActivity(props: { contract: Contract; bets: Bet[] }) {
+  const { contract, bets } = props
+  const [page, setPage] = useState(0)
+  const ITEMS_PER_PAGE = 50
+  const start = page * ITEMS_PER_PAGE
+  const end = start + ITEMS_PER_PAGE
+
+  const lps = useLiquidity(contract.id) ?? []
+  const visibleLps = lps.filter(
+    (l) =>
+      !l.isAnte &&
+      l.userId !== HOUSE_LIQUIDITY_PROVIDER_ID &&
+      l.userId !== DEV_HOUSE_LIQUIDITY_PROVIDER_ID &&
+      l.amount > 0
+  )
+
+  const items = [
+    ...bets.map((bet) => ({
+      type: 'bet' as const,
+      id: bet.id + '-' + bet.isSold,
+      bet,
+    })),
+    ...visibleLps.map((lp) => ({
+      type: 'liquidity' as const,
+      id: lp.id,
+      lp,
+    })),
+  ]
+
+  const pageItems = sortBy(items, (item) =>
+    item.type === 'bet'
+      ? -item.bet.createdTime
+      : item.type === 'liquidity'
+      ? -item.lp.createdTime
+      : undefined
+  ).slice(start, end)
+
+  return (
+    <>
+      <Col className="mb-4 gap-4">
+        {pageItems.map((item) =>
+          item.type === 'bet' ? (
+            <FeedBet key={item.id} contract={contract} bet={item.bet} />
+          ) : (
+            <FeedLiquidity key={item.id} liquidity={item.lp} />
+          )
+        )}
+      </Col>
+      <Pagination
+        page={page}
+        itemsPerPage={50}
+        totalItems={items.length}
+        setPage={setPage}
+        scrollToTop
+        nextTitle={'Older'}
+        prevTitle={'Newer'}
+      />
+    </>
+  )
+}
+
+function ContractCommentsActivity(props: {
+  contract: Contract
+  comments: ContractComment[]
+  tips: CommentTipMap
+}) {
+  const { contract, comments, tips } = props
+  const commentsByParentId = groupBy(comments, (c) => c.replyToCommentId ?? '_')
+  const topLevelComments = sortBy(
+    commentsByParentId['_'] ?? [],
+    (c) => -c.createdTime
+  )
+
+  return (
+    <>
+      <ContractCommentInput className="mb-5" contract={contract} />
+      {topLevelComments.map((parent) => (
+        <FeedCommentThread
+          key={parent.id}
+          contract={contract}
+          parentComment={parent}
+          threadComments={sortBy(
+            commentsByParentId[parent.id] ?? [],
+            (c) => c.createdTime
+          )}
+          tips={tips}
+        />
+      ))}
+    </>
+  )
+}
+
+function FreeResponseContractCommentsActivity(props: {
+  contract: FreeResponseContract
+  comments: ContractComment[]
+  tips: CommentTipMap
+}) {
+  const { contract, comments, tips } = props
+
+  const sortedAnswers = sortBy(
+    contract.answers,
+    (answer) => -getOutcomeProbability(contract, answer.number.toString())
+  )
+  const commentsByOutcome = groupBy(
+    comments,
+    (c) => c.answerOutcome ?? c.betOutcome ?? '_'
+  )
+
+  return (
+    <>
+      {sortedAnswers.map((answer) => (
+        <div key={answer.id} className="relative pb-4">
+          <span
+            className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
+            aria-hidden="true"
+          />
+          <FeedAnswerCommentGroup
+            contract={contract}
+            answer={answer}
+            answerComments={sortBy(
+              commentsByOutcome[answer.number.toString()] ?? [],
+              (c) => c.createdTime
+            )}
+            tips={tips}
+          />
+        </div>
+      ))}
+    </>
+  )
+}

web/components/feed/contract-activity.tsx

@@ -1,140 +0,0 @@
-import { useState } from 'react'
-import { Contract, FreeResponseContract } from 'common/contract'
-import { ContractComment } from 'common/comment'
-import { Bet } from 'common/bet'
-import { getOutcomeProbability } from 'common/calculate'
-import { Pagination } from 'web/components/pagination'
-import { FeedBet } from './feed-bets'
-import { FeedLiquidity } from './feed-liquidity'
-import { FeedAnswerCommentGroup } from './feed-answer-comment-group'
-import { FeedCommentThread, ContractCommentInput } from './feed-comments'
-import { CommentTipMap } from 'web/hooks/use-tip-txns'
-import { LiquidityProvision } from 'common/liquidity-provision'
-import { groupBy, sortBy } from 'lodash'
-import { Col } from 'web/components/layout/col'
-
-export function ContractBetsActivity(props: {
-  contract: Contract
-  bets: Bet[]
-  lps: LiquidityProvision[]
-}) {
-  const { contract, bets, lps } = props
-  const [page, setPage] = useState(0)
-  const ITEMS_PER_PAGE = 50
-  const start = page * ITEMS_PER_PAGE
-  const end = start + ITEMS_PER_PAGE
-
-  const items = [
-    ...bets.map((bet) => ({
-      type: 'bet' as const,
-      id: bet.id + '-' + bet.isSold,
-      bet,
-    })),
-    ...lps.map((lp) => ({
-      type: 'liquidity' as const,
-      id: lp.id,
-      lp,
-    })),
-  ]
-
-  const pageItems = sortBy(items, (item) =>
-    item.type === 'bet'
-      ? -item.bet.createdTime
-      : item.type === 'liquidity'
-      ? -item.lp.createdTime
-      : undefined
-  ).slice(start, end)
-
-  return (
-    <>
-      <Col className="mb-4 gap-4">
-        {pageItems.map((item) =>
-          item.type === 'bet' ? (
-            <FeedBet key={item.id} contract={contract} bet={item.bet} />
-          ) : (
-            <FeedLiquidity key={item.id} liquidity={item.lp} />
-          )
-        )}
-      </Col>
-      <Pagination
-        page={page}
-        itemsPerPage={50}
-        totalItems={items.length}
-        setPage={setPage}
-        scrollToTop
-        nextTitle={'Older'}
-        prevTitle={'Newer'}
-      />
-    </>
-  )
-}
-
-export function ContractCommentsActivity(props: {
-  contract: Contract
-  comments: ContractComment[]
-  tips: CommentTipMap
-}) {
-  const { contract, comments, tips } = props
-  const commentsByParentId = groupBy(comments, (c) => c.replyToCommentId ?? '_')
-  const topLevelComments = sortBy(
-    commentsByParentId['_'] ?? [],
-    (c) => -c.createdTime
-  )
-
-  return (
-    <>
-      <ContractCommentInput className="mb-5" contract={contract} />
-      {topLevelComments.map((parent) => (
-        <FeedCommentThread
-          key={parent.id}
-          contract={contract}
-          parentComment={parent}
-          threadComments={sortBy(
-            commentsByParentId[parent.id] ?? [],
-            (c) => c.createdTime
-          )}
-          tips={tips}
-        />
-      ))}
-    </>
-  )
-}
-
-export function FreeResponseContractCommentsActivity(props: {
-  contract: FreeResponseContract
-  comments: ContractComment[]
-  tips: CommentTipMap
-}) {
-  const { contract, comments, tips } = props
-
-  const sortedAnswers = sortBy(
-    contract.answers,
-    (answer) => -getOutcomeProbability(contract, answer.number.toString())
-  )
-  const commentsByOutcome = groupBy(
-    comments,
-    (c) => c.answerOutcome ?? c.betOutcome ?? '_'
-  )
-
-  return (
-    <>
-      {sortedAnswers.map((answer) => (
-        <div key={answer.id} className="relative pb-4">
-          <span
-            className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
-            aria-hidden="true"
-          />
-          <FeedAnswerCommentGroup
-            contract={contract}
-            answer={answer}
-            answerComments={sortBy(
-              commentsByOutcome[answer.number.toString()] ?? [],
-              (c) => c.createdTime
-            )}
-            tips={tips}
-          />
-        </div>
-      ))}
-    </>
-  )
-}