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
This commit is contained in:
Marshall Polaris
GitHub
parent
54778ec1b1
commit
6e2aa622ab
|
|
@ -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 { outcomeType } = contract
|
||||
const isMobile = useIsMobile()
|
||||
const { contract, user, bets, comments } = props
|
||||
|
||||
const tips = useTipTxns({ contractId: contract.id })
|
||||
const lps = useLiquidity(contract.id)
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
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>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user