import clsx from 'clsx' import _ from 'lodash' import { useState } from 'react' import { Answer } from '../../../common/answer' import { Contract } from '../../../common/contract' import { Col } from '../layout/col' import { Row } from '../layout/row' import { Avatar } from '../avatar' import { SiteLink } from '../site-link' import { BuyButton } from '../yes-no-selector' import { formatPercent } from '../../../common/util/format' import { getOutcomeProbability } from '../../../common/calculate' import { tradingAllowed } from '../../lib/firebase/contracts' import { AnswerBetPanel } from './answer-bet-panel' import { ContractFeed } from '../contract-feed' import { Linkify } from '../linkify' export function AnswerItem(props: { answer: Answer contract: Contract showChoice: 'radio' | 'checkbox' | undefined chosenProb: number | undefined totalChosenProb?: number onChoose: (answerId: string, prob: number) => void onDeselect: (answerId: string) => void }) { const { answer, contract, showChoice, chosenProb, totalChosenProb, onChoose, onDeselect, } = props const { resolution, resolutions, totalShares } = contract const { username, avatarUrl, name, number, text } = answer const isChosen = chosenProb !== undefined const prob = getOutcomeProbability(totalShares, answer.id) const roundedProb = Math.round(prob * 100) const probPercent = formatPercent(prob) const wasResolvedTo = resolution === answer.id || (resolutions && resolutions[answer.id]) const [isBetting, setIsBetting] = useState(false) return (
!isBetting && setIsBetting(true)} >
{name}
{/* TODO: Show total pool? */}
#{number}
{isBetting && ( )} {isBetting ? ( setIsBetting(false)} /> ) : ( {!wasResolvedTo && (showChoice === 'checkbox' ? ( { const { value } = e.target const numberValue = value ? parseInt(value.replace(/[^\d]/, '')) : 0 if (!isNaN(numberValue)) onChoose(answer.id, numberValue) }} /> ) : (
{probPercent}
))} {showChoice ? (
{showChoice === 'checkbox' && (
{chosenProb && totalChosenProb ? Math.round((100 * chosenProb) / totalChosenProb) : 0} % share
)}
) : ( <> {tradingAllowed(contract) && ( { setIsBetting(true) }} /> )} {wasResolvedTo && (
Chosen{' '} {resolutions ? `${Math.round(resolutions[answer.id])}%` : ''}
{probPercent}
)} )}
)}
) }