Convert to typed ActivityItems

This commit is contained in:
James Grugett 2022-03-11 18:23:02 -06:00
parent 44a093aff4
commit 29e33bc0ac
3 changed files with 188 additions and 144 deletions

View File

@ -10,7 +10,7 @@ export type Comment = {
createdTime: number
// Denormalized, for rendering comments
userName?: string
userUsername?: string
userName: string
userUsername: string
userAvatarUrl?: string
}

View File

@ -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),
]
}

View File

@ -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)