284 lines
8.2 KiB
TypeScript
284 lines
8.2 KiB
TypeScript
// From https://tailwindui.com/components/application-ui/lists/feeds
|
|
import React, { useState } from 'react'
|
|
import {
|
|
BanIcon,
|
|
CheckIcon,
|
|
LockClosedIcon,
|
|
XIcon,
|
|
} from '@heroicons/react/solid'
|
|
import clsx from 'clsx'
|
|
|
|
import { OutcomeLabel } from '../outcome-label'
|
|
import {
|
|
Contract,
|
|
contractMetrics,
|
|
contractPath,
|
|
tradingAllowed,
|
|
} from 'web/lib/firebase/contracts'
|
|
import { BinaryResolutionOrChance } from '../contract/contract-card'
|
|
import { SiteLink } from '../site-link'
|
|
import { Col } from '../layout/col'
|
|
import { UserLink } from '../user-page'
|
|
import BetRow from '../bet-row'
|
|
import { Avatar } from '../avatar'
|
|
import { ActivityItem } from './activity-items'
|
|
import { useSaveSeenContract } from 'web/hooks/use-seen-contracts'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { trackClick } from 'web/lib/firebase/tracking'
|
|
import { DAY_MS } from 'common/util/time'
|
|
import NewContractBadge from '../new-contract-badge'
|
|
import { RelativeTimestamp } from '../relative-timestamp'
|
|
import { FeedAnswerCommentGroup } from 'web/components/feed/feed-answer-comment-group'
|
|
import {
|
|
FeedCommentThread,
|
|
CommentInput,
|
|
} from 'web/components/feed/feed-comments'
|
|
import { FeedBet } from 'web/components/feed/feed-bets'
|
|
import { CPMMBinaryContract, NumericContract } from 'common/contract'
|
|
import { FeedLiquidity } from './feed-liquidity'
|
|
import { SignUpPrompt } from '../sign-up-prompt'
|
|
import { User } from 'common/user'
|
|
import { PlayMoneyDisclaimer } from '../play-money-disclaimer'
|
|
|
|
export function FeedItems(props: {
|
|
contract: Contract
|
|
items: ActivityItem[]
|
|
className?: string
|
|
betRowClassName?: string
|
|
user: User | null | undefined
|
|
}) {
|
|
const { contract, items, className, betRowClassName, user } = props
|
|
const { outcomeType } = contract
|
|
|
|
const [elem, setElem] = useState<HTMLElement | null>(null)
|
|
useSaveSeenContract(elem, contract)
|
|
|
|
return (
|
|
<div className={clsx('flow-root', className)} ref={setElem}>
|
|
<div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
|
|
{items.map((item, activityItemIdx) => (
|
|
<div key={item.id} className={'relative pb-4'}>
|
|
{activityItemIdx !== items.length - 1 ||
|
|
item.type === 'answergroup' ? (
|
|
<span
|
|
className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
|
|
aria-hidden="true"
|
|
/>
|
|
) : null}
|
|
<div className="relative flex-col items-start space-x-3">
|
|
<FeedItem item={item} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{!user ? (
|
|
<Col className="mt-4 max-w-sm items-center xl:hidden">
|
|
<SignUpPrompt />
|
|
<PlayMoneyDisclaimer />
|
|
</Col>
|
|
) : (
|
|
outcomeType === 'BINARY' &&
|
|
tradingAllowed(contract) && (
|
|
<BetRow
|
|
contract={contract as CPMMBinaryContract}
|
|
className={clsx('mb-2', betRowClassName)}
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function FeedItem(props: { item: ActivityItem }) {
|
|
const { item } = props
|
|
|
|
switch (item.type) {
|
|
case 'question':
|
|
return <FeedQuestion {...item} />
|
|
case 'description':
|
|
return <FeedDescription {...item} />
|
|
case 'bet':
|
|
return <FeedBet {...item} />
|
|
case 'liquidity':
|
|
return <FeedLiquidity {...item} />
|
|
case 'answergroup':
|
|
return <FeedAnswerCommentGroup {...item} />
|
|
case 'close':
|
|
return <FeedClose {...item} />
|
|
case 'resolve':
|
|
return <FeedResolve {...item} />
|
|
case 'commentInput':
|
|
return <CommentInput {...item} />
|
|
case 'commentThread':
|
|
return <FeedCommentThread {...item} />
|
|
}
|
|
}
|
|
|
|
export function FeedQuestion(props: {
|
|
contract: Contract
|
|
contractPath?: string
|
|
}) {
|
|
const { contract } = props
|
|
const {
|
|
creatorName,
|
|
creatorUsername,
|
|
question,
|
|
outcomeType,
|
|
volume,
|
|
createdTime,
|
|
isResolved,
|
|
} = contract
|
|
const { volumeLabel } = contractMetrics(contract)
|
|
const isBinary = outcomeType === 'BINARY'
|
|
const isNew = createdTime > Date.now() - DAY_MS && !isResolved
|
|
const user = useUser()
|
|
|
|
return (
|
|
<div className={'flex gap-2'}>
|
|
<Avatar
|
|
username={contract.creatorUsername}
|
|
avatarUrl={contract.creatorAvatarUrl}
|
|
/>
|
|
<div className="min-w-0 flex-1 py-1.5">
|
|
<div className="mb-2 text-sm text-gray-500">
|
|
<UserLink
|
|
className="text-gray-900"
|
|
name={creatorName}
|
|
username={creatorUsername}
|
|
/>{' '}
|
|
asked
|
|
{/* Currently hidden on mobile; ideally we'd fit this in somewhere. */}
|
|
<div className="relative -top-2 float-right ">
|
|
{isNew || volume === 0 ? (
|
|
<NewContractBadge />
|
|
) : (
|
|
<span className="hidden text-gray-400 sm:inline">
|
|
{volumeLabel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Col className="items-start justify-between gap-2 sm:flex-row sm:gap-4">
|
|
<SiteLink
|
|
href={
|
|
props.contractPath ? props.contractPath : contractPath(contract)
|
|
}
|
|
onClick={() => user && trackClick(user.id, contract.id)}
|
|
className="text-lg text-indigo-700 sm:text-xl"
|
|
>
|
|
{question}
|
|
</SiteLink>
|
|
{isBinary && (
|
|
<BinaryResolutionOrChance
|
|
className="items-center"
|
|
contract={contract}
|
|
/>
|
|
)}
|
|
</Col>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function FeedDescription(props: { contract: Contract }) {
|
|
const { contract } = props
|
|
const { creatorName, creatorUsername } = contract
|
|
|
|
return (
|
|
<>
|
|
<Avatar
|
|
username={contract.creatorUsername}
|
|
avatarUrl={contract.creatorAvatarUrl}
|
|
/>
|
|
<div className="min-w-0 flex-1 py-1.5">
|
|
<div className="text-sm text-gray-500">
|
|
<UserLink
|
|
className="text-gray-900"
|
|
name={creatorName}
|
|
username={creatorUsername}
|
|
/>{' '}
|
|
created this market <RelativeTimestamp time={contract.createdTime} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function OutcomeIcon(props: { outcome?: string }) {
|
|
const { outcome } = props
|
|
switch (outcome) {
|
|
case 'YES':
|
|
return <CheckIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
|
case 'NO':
|
|
return <XIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
|
case 'CANCEL':
|
|
return <BanIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
|
default:
|
|
return <CheckIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
|
|
}
|
|
}
|
|
|
|
function FeedResolve(props: { contract: Contract }) {
|
|
const { contract } = props
|
|
const { creatorName, creatorUsername } = contract
|
|
|
|
const resolution = contract.resolution || 'CANCEL'
|
|
|
|
const resolutionValue = (contract as NumericContract).resolutionValue
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<div className="relative px-1">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
|
|
<OutcomeIcon outcome={resolution} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="min-w-0 flex-1 py-1.5">
|
|
<div className="text-sm text-gray-500">
|
|
<UserLink
|
|
className="text-gray-900"
|
|
name={creatorName}
|
|
username={creatorUsername}
|
|
/>{' '}
|
|
resolved this market to{' '}
|
|
<OutcomeLabel
|
|
outcome={resolution}
|
|
value={resolutionValue}
|
|
contract={contract}
|
|
truncate="long"
|
|
/>{' '}
|
|
<RelativeTimestamp time={contract.resolutionTime || 0} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function FeedClose(props: { contract: Contract }) {
|
|
const { contract } = props
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<div className="relative px-1">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200">
|
|
<LockClosedIcon
|
|
className="h-5 w-5 text-gray-500"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="min-w-0 flex-1 py-1.5">
|
|
<div className="text-sm text-gray-500">
|
|
Trading closed in this market{' '}
|
|
<RelativeTimestamp time={contract.closeTime || 0} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|