Consolidate contract-activity.tsx into contract-tabs.tsx
This commit is contained in:
Marshall Polaris
parent
7caad46d54
commit
538d1cfff8
|
|
@ -1,13 +1,17 @@
|
||||||
import { memo } from 'react'
|
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 { LiquidityProvision } from 'common/liquidity-provision'
|
||||||
|
import { groupBy, sortBy } from 'lodash'
|
||||||
import { Bet } from 'common/bet'
|
import { Bet } from 'common/bet'
|
||||||
import { Contract } from 'common/contract'
|
import { Contract, FreeResponseContract } from 'common/contract'
|
||||||
import { ContractComment } from 'common/comment'
|
import { ContractComment } from 'common/comment'
|
||||||
import { PAST_BETS, User } from 'common/user'
|
import { PAST_BETS, User } from 'common/user'
|
||||||
import {
|
|
||||||
ContractCommentsActivity,
|
|
||||||
ContractBetsActivity,
|
|
||||||
FreeResponseContractCommentsActivity,
|
|
||||||
} from '../feed/contract-activity'
|
|
||||||
import { ContractBetsTable, BetsSummary } from '../bets-list'
|
import { ContractBetsTable, BetsSummary } from '../bets-list'
|
||||||
import { Spacer } from '../layout/spacer'
|
import { Spacer } from '../layout/spacer'
|
||||||
import { Tabs } from '../layout/tabs'
|
import { Tabs } from '../layout/tabs'
|
||||||
|
|
@ -133,3 +137,129 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
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'}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
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