Convert to typed ActivityItems
This commit is contained in:
James Grugett
parent
44a093aff4
commit
29e33bc0ac
|
|
@ -10,7 +10,7 @@ export type Comment = {
|
|||
createdTime: number
|
||||
|
||||
// Denormalized, for rendering comments
|
||||
userName?: string
|
||||
userUsername?: string
|
||||
userName: string
|
||||
userUsername: string
|
||||
userAvatarUrl?: string
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,29 +9,72 @@ import { filterDefined } from '../../../common/util/array'
|
|||
import { canAddComment, mapCommentsByBetId } from '../../lib/firebase/comments'
|
||||
import { fromNow } from '../../lib/util/time'
|
||||
|
||||
export type ActivityItem = {
|
||||
export type ActivityItem =
|
||||
| DescriptionItem
|
||||
| QuestionItem
|
||||
| BetItem
|
||||
| CommentItem
|
||||
| CreateAnswerItem
|
||||
| BetGroupItem
|
||||
| AnswerGroupItem
|
||||
| CloseItem
|
||||
| ResolveItem
|
||||
|
||||
type BaseActivityItem = {
|
||||
id: string
|
||||
type:
|
||||
| 'bet'
|
||||
| 'comment'
|
||||
| 'start'
|
||||
| 'betgroup'
|
||||
| 'answergroup'
|
||||
| 'close'
|
||||
| 'resolve'
|
||||
| 'expand'
|
||||
| undefined
|
||||
contract: Contract
|
||||
}
|
||||
|
||||
export type FeedAnswerGroupItem = ActivityItem & {
|
||||
export type DescriptionItem = BaseActivityItem & {
|
||||
type: 'description'
|
||||
}
|
||||
|
||||
export type QuestionItem = BaseActivityItem & {
|
||||
type: 'question'
|
||||
showDescription: boolean
|
||||
}
|
||||
|
||||
export type BetItem = BaseActivityItem & {
|
||||
type: 'bet'
|
||||
bet: Bet
|
||||
hideOutcome: boolean
|
||||
}
|
||||
|
||||
export type CommentItem = BaseActivityItem & {
|
||||
type: 'comment'
|
||||
comment: Comment
|
||||
bet: Bet
|
||||
showOutcomeLabel: boolean
|
||||
truncate: boolean
|
||||
}
|
||||
|
||||
export type CreateAnswerItem = BaseActivityItem & {
|
||||
type: 'createanswer'
|
||||
answer: Answer
|
||||
}
|
||||
|
||||
export type BetGroupItem = BaseActivityItem & {
|
||||
type: 'betgroup'
|
||||
bets: Bet[]
|
||||
hideOutcome: boolean
|
||||
}
|
||||
|
||||
export type AnswerGroupItem = BaseActivityItem & {
|
||||
type: 'answergroup'
|
||||
contract: Contract
|
||||
bets: Bet[]
|
||||
comments: Comment[]
|
||||
answer: Answer
|
||||
user: User | null | undefined
|
||||
}
|
||||
|
||||
export type CloseItem = BaseActivityItem & {
|
||||
type: 'close'
|
||||
}
|
||||
|
||||
export type ResolveItem = BaseActivityItem & {
|
||||
type: 'resolve'
|
||||
}
|
||||
|
||||
const DAY_IN_MS = 24 * 60 * 60 * 1000
|
||||
|
||||
// Group together bets that are:
|
||||
|
|
@ -47,22 +90,38 @@ function groupBets(
|
|||
userId?: string
|
||||
) {
|
||||
const commentsMap = mapCommentsByBetId(comments)
|
||||
const items: any[] = []
|
||||
const items: ActivityItem[] = []
|
||||
let group: Bet[] = []
|
||||
|
||||
// Turn the current group into an ActivityItem
|
||||
function pushGroup() {
|
||||
if (group.length == 1) {
|
||||
items.push(toActivityItem(group[0], false))
|
||||
items.push(toActivityItem(group[0]))
|
||||
} else if (group.length > 1) {
|
||||
items.push({ type: 'betgroup', bets: [...group], id: group[0].id })
|
||||
items.push({
|
||||
type: 'betgroup',
|
||||
bets: [...group],
|
||||
id: group[0].id,
|
||||
contract,
|
||||
hideOutcome: false,
|
||||
})
|
||||
}
|
||||
group = []
|
||||
}
|
||||
|
||||
function toActivityItem(bet: Bet, isPublic: boolean) {
|
||||
function toActivityItem(bet: Bet) {
|
||||
const comment = commentsMap[bet.id]
|
||||
return comment ? toFeedComment(bet, comment) : toFeedBet(bet, contract)
|
||||
return comment
|
||||
? {
|
||||
type: 'comment' as const,
|
||||
id: bet.id,
|
||||
comment,
|
||||
bet,
|
||||
contract,
|
||||
showOutcomeLabel: true,
|
||||
truncate: true,
|
||||
}
|
||||
: { type: 'bet' as const, id: bet.id, bet, contract, hideOutcome: false }
|
||||
}
|
||||
|
||||
for (const bet of bets) {
|
||||
|
|
@ -71,7 +130,7 @@ function groupBets(
|
|||
if (commentsMap[bet.id] || isCreator) {
|
||||
pushGroup()
|
||||
// Create a single item for this
|
||||
items.push(toActivityItem(bet, true))
|
||||
items.push(toActivityItem(bet))
|
||||
} else {
|
||||
if (
|
||||
group.length > 0 &&
|
||||
|
|
@ -86,7 +145,7 @@ function groupBets(
|
|||
if (group.length > 0) {
|
||||
pushGroup()
|
||||
}
|
||||
return items as ActivityItem[]
|
||||
return items
|
||||
}
|
||||
|
||||
function getAnswerGroups(
|
||||
|
|
@ -135,41 +194,6 @@ function getAnswerGroups(
|
|||
return answerGroups
|
||||
}
|
||||
|
||||
function toFeedBet(bet: Bet, contract: Contract) {
|
||||
return {
|
||||
id: bet.id,
|
||||
contractId: bet.contractId,
|
||||
userId: bet.userId,
|
||||
type: 'bet',
|
||||
amount: bet.sale ? -bet.sale.amount : bet.amount,
|
||||
outcome: bet.outcome,
|
||||
createdTime: bet.createdTime,
|
||||
date: fromNow(bet.createdTime),
|
||||
contract,
|
||||
}
|
||||
}
|
||||
|
||||
function toFeedComment(bet: Bet, comment: Comment) {
|
||||
return {
|
||||
id: bet.id,
|
||||
contractId: bet.contractId,
|
||||
userId: bet.userId,
|
||||
type: 'comment',
|
||||
amount: bet.sale ? -bet.sale.amount : bet.amount,
|
||||
outcome: bet.outcome,
|
||||
createdTime: bet.createdTime,
|
||||
date: fromNow(bet.createdTime),
|
||||
|
||||
// Invariant: bet.comment exists
|
||||
text: comment.text,
|
||||
person: {
|
||||
username: comment.userUsername,
|
||||
name: comment.userName,
|
||||
avatarUrl: comment.userAvatarUrl,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function getAllContractActivityItems(
|
||||
contract: Contract,
|
||||
bets: Bet[],
|
||||
|
|
@ -184,8 +208,10 @@ export function getAllContractActivityItems(
|
|||
? bets.filter((bet) => !bet.isAnte)
|
||||
: bets.filter((bet) => !(bet.isAnte && (bet.outcome as string) === '0'))
|
||||
|
||||
let answer: Answer | undefined
|
||||
if (outcome) {
|
||||
bets = bets.filter((bet) => bet.outcome === outcome)
|
||||
answer = contract.answers?.find((answer) => answer.id === outcome)
|
||||
} else if (outcomeType === 'FREE_RESPONSE') {
|
||||
// Keep bets on comments or your bets where you can comment.
|
||||
const commentBetIds = new Set(comments.map((comment) => comment.betId))
|
||||
|
|
@ -196,19 +222,18 @@ export function getAllContractActivityItems(
|
|||
)
|
||||
}
|
||||
|
||||
const items: ActivityItem[] = outcome ? [] : [{ type: 'start', id: '0' }]
|
||||
const items: ActivityItem[] =
|
||||
outcome && answer
|
||||
? [{ type: 'createanswer', id: answer.id, contract, answer }]
|
||||
: [{ type: 'description', id: '0', contract }]
|
||||
|
||||
items.push(...groupBets(bets, comments, DAY_IN_MS, contract, user?.id))
|
||||
|
||||
if (contract.closeTime && contract.closeTime <= Date.now()) {
|
||||
items.push({ type: 'close', id: `${contract.closeTime}` })
|
||||
items.push({ type: 'close', id: `${contract.closeTime}`, contract })
|
||||
}
|
||||
if (contract.resolution) {
|
||||
items.push({ type: 'resolve', id: `${contract.resolutionTime}` })
|
||||
}
|
||||
if (outcome) {
|
||||
// Hack to add some more padding above the 'multi' feedType, by adding a null item.
|
||||
items.unshift({ type: undefined, id: '-1' })
|
||||
items.push({ type: 'resolve', id: `${contract.resolutionTime}`, contract })
|
||||
}
|
||||
|
||||
return items
|
||||
|
|
@ -223,20 +248,13 @@ export function getRecentContractActivityItems(
|
|||
bets = bets.sort((b1, b2) => b1.createdTime - b2.createdTime)
|
||||
comments = comments.sort((c1, c2) => c1.createdTime - c2.createdTime)
|
||||
|
||||
const items: ActivityItem[] = [{ type: 'start', id: '0' }]
|
||||
const items: ActivityItem[] = []
|
||||
items.push(
|
||||
...(contract.outcomeType === 'FREE_RESPONSE'
|
||||
? getAnswerGroups(contract, bets, comments, user)
|
||||
: groupBets(bets, comments, DAY_IN_MS, contract, user?.id))
|
||||
)
|
||||
|
||||
if (contract.closeTime && contract.closeTime <= Date.now()) {
|
||||
items.push({ type: 'close', id: `${contract.closeTime}` })
|
||||
}
|
||||
if (contract.resolution) {
|
||||
items.push({ type: 'resolve', id: `${contract.resolutionTime}` })
|
||||
}
|
||||
|
||||
// Remove all but last bet group.
|
||||
const betGroups = items.filter((item) => item.type === 'betgroup')
|
||||
const lastBetGroup = betGroups[betGroups.length - 1]
|
||||
|
|
@ -244,6 +262,16 @@ export function getRecentContractActivityItems(
|
|||
(item) => item.type !== 'betgroup' || item.id === lastBetGroup?.id
|
||||
)
|
||||
|
||||
// Only show the first item plus the last three items.
|
||||
return filtered.length > 3 ? [filtered[0], ...filtered.slice(-3)] : filtered
|
||||
const questionItem: QuestionItem = {
|
||||
type: 'question',
|
||||
id: '0',
|
||||
contract,
|
||||
showDescription: false,
|
||||
}
|
||||
|
||||
return [
|
||||
questionItem,
|
||||
// Only take the last three items.
|
||||
...filtered.slice(-3),
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import {
|
|||
MAX_COMMENT_LENGTH,
|
||||
} from '../../lib/firebase/comments'
|
||||
import { formatMoney } from '../../../common/util/format'
|
||||
import { Comment } from '../../../common/comment'
|
||||
import { ResolutionOrChance } from '../contract-card'
|
||||
import { SiteLink } from '../site-link'
|
||||
import { Col } from '../layout/col'
|
||||
|
|
@ -44,7 +45,8 @@ import { parseTags } from '../../../common/util/parse'
|
|||
import { Avatar } from '../avatar'
|
||||
import { useAdmin } from '../../hooks/use-admin'
|
||||
import { Answer } from '../../../common/answer'
|
||||
import { ActivityItem, FeedAnswerGroupItem } from './activity-items'
|
||||
import { ActivityItem } from './activity-items'
|
||||
import { User } from '../../../common/user'
|
||||
|
||||
export type FeedType =
|
||||
// Main homepage/fold feed,
|
||||
|
|
@ -68,8 +70,8 @@ export function FeedItems(props: {
|
|||
return (
|
||||
<div className="flow-root pr-2 md:pr-0">
|
||||
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
|
||||
{items.map((activityItem, activityItemIdx) => (
|
||||
<div key={activityItem.id} className="relative pb-6">
|
||||
{items.map((item, activityItemIdx) => (
|
||||
<div key={item.id} className="relative pb-6">
|
||||
{activityItemIdx !== items.length - 1 ? (
|
||||
<span
|
||||
className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
|
||||
|
|
@ -77,32 +79,24 @@ export function FeedItems(props: {
|
|||
/>
|
||||
) : null}
|
||||
<div className="relative flex items-start space-x-3">
|
||||
{activityItem.type === 'start' ? (
|
||||
feedType === 'activity' ? (
|
||||
<FeedQuestion contract={contract} />
|
||||
) : feedType === 'market' ? (
|
||||
<FeedDescription contract={contract} />
|
||||
) : feedType === 'multi' ? (
|
||||
<FeedAnswer contract={contract} outcome={outcome || '0'} />
|
||||
) : null
|
||||
) : activityItem.type === 'comment' ? (
|
||||
<FeedComment
|
||||
activityItem={activityItem}
|
||||
moreHref={contractPath(contract)}
|
||||
feedType={feedType}
|
||||
/>
|
||||
) : activityItem.type === 'bet' ? (
|
||||
<FeedBet activityItem={activityItem} feedType={feedType} />
|
||||
) : activityItem.type === 'betgroup' ? (
|
||||
<FeedBetGroup activityItem={activityItem} feedType={feedType} />
|
||||
) : activityItem.type === 'answergroup' ? (
|
||||
<FeedAnswerGroup
|
||||
activityItem={activityItem as FeedAnswerGroupItem}
|
||||
/>
|
||||
) : activityItem.type === 'close' ? (
|
||||
<FeedClose contract={contract} />
|
||||
) : activityItem.type === 'resolve' ? (
|
||||
<FeedResolve contract={contract} />
|
||||
{item.type === 'question' ? (
|
||||
<FeedQuestion {...item} />
|
||||
) : item.type === 'description' ? (
|
||||
<FeedDescription {...item} />
|
||||
) : item.type === 'createanswer' ? (
|
||||
<FeedCreateAnswer {...item} />
|
||||
) : item.type === 'comment' ? (
|
||||
<FeedComment {...item} />
|
||||
) : item.type === 'bet' ? (
|
||||
<FeedBet {...item} />
|
||||
) : item.type === 'betgroup' ? (
|
||||
<FeedBetGroup {...item} />
|
||||
) : item.type === 'answergroup' ? (
|
||||
<FeedAnswerGroup {...item} />
|
||||
) : item.type === 'close' ? (
|
||||
<FeedClose {...item} />
|
||||
) : item.type === 'resolve' ? (
|
||||
<FeedResolve {...item} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -116,12 +110,16 @@ export function FeedItems(props: {
|
|||
}
|
||||
|
||||
function FeedComment(props: {
|
||||
activityItem: any
|
||||
moreHref: string
|
||||
feedType: FeedType
|
||||
contract: Contract
|
||||
comment: Comment
|
||||
bet: Bet
|
||||
showOutcomeLabel: boolean
|
||||
truncate: boolean
|
||||
}) {
|
||||
const { activityItem, moreHref, feedType } = props
|
||||
const { person, text, amount, outcome, createdTime, contract } = activityItem
|
||||
const { contract, comment, bet, showOutcomeLabel, truncate } = props
|
||||
const { createdTime } = contract
|
||||
const { amount, outcome } = bet
|
||||
const { text, userUsername, userName, userAvatarUrl } = comment
|
||||
|
||||
const bought = amount >= 0 ? 'bought' : 'sold'
|
||||
const money = formatMoney(Math.abs(amount))
|
||||
|
|
@ -134,7 +132,7 @@ function FeedComment(props: {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Avatar username={person.username} avatarUrl={person.avatarUrl} />
|
||||
<Avatar username={userUsername} avatarUrl={userAvatarUrl} />
|
||||
<div className="min-w-0 flex-1">
|
||||
{/* {answer && (
|
||||
<div className="text-neutral mb-2" style={{ fontSize: 15 }}>
|
||||
|
|
@ -145,18 +143,23 @@ function FeedComment(props: {
|
|||
<p className="mt-0.5 text-sm text-gray-500">
|
||||
<UserLink
|
||||
className="text-gray-500"
|
||||
username={person.username}
|
||||
name={person.name}
|
||||
username={userUsername}
|
||||
name={userName}
|
||||
/>{' '}
|
||||
{bought} {money}
|
||||
<MaybeOutcomeLabel outcome={outcome} feedType={feedType} />
|
||||
{showOutcomeLabel && (
|
||||
<>
|
||||
{' '}
|
||||
of <OutcomeLabel outcome={outcome} />
|
||||
</>
|
||||
)}
|
||||
<Timestamp time={createdTime} />
|
||||
</p>
|
||||
</div>
|
||||
<TruncatedComment
|
||||
comment={text}
|
||||
moreHref={moreHref}
|
||||
shouldTruncate={feedType == 'activity'}
|
||||
moreHref={contractPath(contract)}
|
||||
shouldTruncate={truncate}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -174,27 +177,31 @@ function Timestamp(props: { time: number }) {
|
|||
)
|
||||
}
|
||||
|
||||
function FeedBet(props: { activityItem: any; feedType: FeedType }) {
|
||||
const { activityItem, feedType } = props
|
||||
const { id, contractId, amount, outcome, createdTime, contract } =
|
||||
activityItem
|
||||
function FeedBet(props: {
|
||||
contract: Contract
|
||||
bet: Bet
|
||||
hideOutcome: boolean
|
||||
}) {
|
||||
const { contract, bet, hideOutcome } = props
|
||||
const { id, amount, outcome, createdTime, userId } = bet
|
||||
const user = useUser()
|
||||
const isSelf = user?.id == activityItem.userId
|
||||
const isCreator = contract.creatorId == activityItem.userId
|
||||
const isSelf = user?.id === userId
|
||||
const isCreator = contract.creatorId === userId
|
||||
|
||||
// You can comment if your bet was posted in the last hour
|
||||
const canComment = canAddComment(createdTime, isSelf)
|
||||
|
||||
const [comment, setComment] = useState('')
|
||||
async function submitComment() {
|
||||
if (!user || !comment) return
|
||||
await createComment(contractId, id, comment, user)
|
||||
await createComment(contract.id, id, comment, user)
|
||||
}
|
||||
|
||||
const bought = amount >= 0 ? 'bought' : 'sold'
|
||||
const money = formatMoney(Math.abs(amount))
|
||||
|
||||
const answer =
|
||||
feedType !== 'multi' &&
|
||||
!hideOutcome &&
|
||||
(contract.answers?.find((answer: Answer) => answer?.id === outcome) as
|
||||
| Answer
|
||||
| undefined)
|
||||
|
|
@ -225,8 +232,11 @@ function FeedBet(props: { activityItem: any; feedType: FeedType }) {
|
|||
{isSelf ? 'You' : isCreator ? contract.creatorName : 'A trader'}
|
||||
</span>{' '}
|
||||
{bought} {money}
|
||||
{!answer && (
|
||||
<MaybeOutcomeLabel outcome={outcome} feedType={feedType} />
|
||||
{!answer && !hideOutcome && (
|
||||
<>
|
||||
{' '}
|
||||
of <OutcomeLabel outcome={outcome} />
|
||||
</>
|
||||
)}
|
||||
<Timestamp time={createdTime} />
|
||||
{canComment && (
|
||||
|
|
@ -506,10 +516,8 @@ function FeedDescription(props: { contract: Contract }) {
|
|||
)
|
||||
}
|
||||
|
||||
function FeedAnswer(props: { contract: Contract; outcome: string }) {
|
||||
const { contract, outcome } = props
|
||||
const answer = contract?.answers?.[Number(outcome) - 1]
|
||||
if (!answer) return null
|
||||
function FeedCreateAnswer(props: { contract: Contract; answer: Answer }) {
|
||||
const { contract, answer } = props
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -521,7 +529,7 @@ function FeedAnswer(props: { contract: Contract; outcome: string }) {
|
|||
name={answer.name}
|
||||
username={answer.username}
|
||||
/>{' '}
|
||||
submitted answer <OutcomeLabel outcome={outcome} />{' '}
|
||||
submitted answer <OutcomeLabel outcome={answer.id} />{' '}
|
||||
<Timestamp time={contract.createdTime} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -597,12 +605,8 @@ function FeedClose(props: { contract: Contract }) {
|
|||
)
|
||||
}
|
||||
|
||||
function BetGroupSpan(props: {
|
||||
bets: Bet[]
|
||||
outcome: string
|
||||
feedType: FeedType
|
||||
}) {
|
||||
const { bets, outcome, feedType } = props
|
||||
function BetGroupSpan(props: { bets: Bet[]; outcome?: string }) {
|
||||
const { bets, outcome } = props
|
||||
|
||||
const numberTraders = _.uniqBy(bets, (b) => b.userId).length
|
||||
|
||||
|
|
@ -617,15 +621,23 @@ function BetGroupSpan(props: {
|
|||
{buyTotal > 0 && <>bought {formatMoney(buyTotal)} </>}
|
||||
{sellTotal > 0 && <>sold {formatMoney(sellTotal)} </>}
|
||||
</JoinSpans>
|
||||
<MaybeOutcomeLabel outcome={outcome} feedType={feedType} />{' '}
|
||||
{outcome && (
|
||||
<>
|
||||
{' '}
|
||||
of <OutcomeLabel outcome={outcome} />
|
||||
</>
|
||||
)}{' '}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// TODO: Make this expandable to show all grouped bets?
|
||||
function FeedBetGroup(props: { activityItem: any; feedType: FeedType }) {
|
||||
const { activityItem, feedType } = props
|
||||
const bets: Bet[] = activityItem.bets
|
||||
function FeedBetGroup(props: {
|
||||
contract: Contract
|
||||
bets: Bet[]
|
||||
hideOutcome: boolean
|
||||
}) {
|
||||
const { bets, hideOutcome } = props
|
||||
|
||||
const betGroups = _.groupBy(bets, (bet) => bet.outcome)
|
||||
const outcomes = Object.keys(betGroups)
|
||||
|
|
@ -647,9 +659,8 @@ function FeedBetGroup(props: { activityItem: any; feedType: FeedType }) {
|
|||
{outcomes.map((outcome, index) => (
|
||||
<Fragment key={outcome}>
|
||||
<BetGroupSpan
|
||||
outcome={outcome}
|
||||
outcome={hideOutcome ? undefined : outcome}
|
||||
bets={betGroups[outcome]}
|
||||
feedType={feedType}
|
||||
/>
|
||||
{index !== outcomes.length - 1 && <br />}
|
||||
</Fragment>
|
||||
|
|
@ -661,9 +672,14 @@ function FeedBetGroup(props: { activityItem: any; feedType: FeedType }) {
|
|||
)
|
||||
}
|
||||
|
||||
function FeedAnswerGroup(props: { activityItem: FeedAnswerGroupItem }) {
|
||||
const { activityItem } = props
|
||||
const { contract, answer, bets, comments, user } = activityItem
|
||||
function FeedAnswerGroup(props: {
|
||||
contract: Contract
|
||||
answer: Answer
|
||||
bets: Bet[]
|
||||
comments: Comment[]
|
||||
user: User | null | undefined
|
||||
}) {
|
||||
const { contract, answer, bets, comments, user } = props
|
||||
|
||||
const betGroups = _.groupBy(bets, (bet) => bet.outcome)
|
||||
const outcomes = Object.keys(betGroups)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user