manifold/web/components/answers/answers-panel.tsx

124 lines
3.5 KiB
TypeScript
Raw Normal View History

2022-02-20 22:25:58 +00:00
import _ from 'lodash'
import { useLayoutEffect, useState } from 'react'
import { Answer } from '../../../common/answer'
2022-03-02 22:02:38 +00:00
import { DPM, FreeResponse, FullContract } from '../../../common/contract'
2022-02-20 22:25:58 +00:00
import { Col } from '../layout/col'
import { formatPercent } from '../../../common/util/format'
import { useUser } from '../../hooks/use-user'
2022-03-03 03:30:07 +00:00
import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
2022-02-20 22:25:58 +00:00
import { useAnswers } from '../../hooks/use-answers'
import { tradingAllowed } from '../../lib/firebase/contracts'
import { AnswerItem } from './answer-item'
import { CreateAnswerPanel } from './create-answer-panel'
import { AnswerResolvePanel } from './answer-resolve-panel'
2022-03-02 22:02:38 +00:00
export function AnswersPanel(props: {
contract: FullContract<DPM, FreeResponse>
answers: Answer[]
}) {
2022-02-20 22:25:58 +00:00
const { contract } = props
2022-02-22 20:12:49 +00:00
const { creatorId, resolution, resolutions, totalBets } = contract
2022-02-20 22:25:58 +00:00
const answers = useAnswers(contract.id) ?? props.answers
const [winningAnswers, otherAnswers] = _.partition(
2022-02-22 20:12:49 +00:00
answers.filter(
(answer) => answer.id !== '0' && totalBets[answer.id] > 0.000000001
),
2022-02-20 22:25:58 +00:00
(answer) =>
answer.id === resolution || (resolutions && resolutions[answer.id])
)
const sortedAnswers = [
..._.sortBy(winningAnswers, (answer) =>
resolutions ? -1 * resolutions[answer.id] : 0
),
..._.sortBy(
otherAnswers,
2022-03-03 03:30:07 +00:00
(answer) => -1 * getDpmOutcomeProbability(contract.totalShares, answer.id)
2022-02-20 22:25:58 +00:00
),
]
const user = useUser()
const [resolveOption, setResolveOption] = useState<
'CHOOSE' | 'CHOOSE_MULTIPLE' | 'CANCEL' | undefined
>()
const [chosenAnswers, setChosenAnswers] = useState<{
[answerId: string]: number
}>({})
const chosenTotal = _.sum(Object.values(chosenAnswers))
const onChoose = (answerId: string, prob: number) => {
if (resolveOption === 'CHOOSE') {
setChosenAnswers({ [answerId]: prob })
} else {
setChosenAnswers((chosenAnswers) => {
return {
...chosenAnswers,
[answerId]: prob,
}
})
}
}
const onDeselect = (answerId: string) => {
setChosenAnswers((chosenAnswers) => {
const newChosenAnswers = { ...chosenAnswers }
delete newChosenAnswers[answerId]
return newChosenAnswers
})
}
useLayoutEffect(() => {
setChosenAnswers({})
}, [resolveOption])
const showChoice = resolution
? undefined
: resolveOption === 'CHOOSE'
? 'radio'
: resolveOption === 'CHOOSE_MULTIPLE'
? 'checkbox'
: undefined
return (
<Col className="gap-3">
{sortedAnswers.map((answer) => (
<AnswerItem
key={answer.id}
answer={answer}
contract={contract}
showChoice={showChoice}
chosenProb={chosenAnswers[answer.id]}
totalChosenProb={chosenTotal}
onChoose={onChoose}
onDeselect={onDeselect}
/>
))}
{sortedAnswers.length === 0 ? (
<div className="text-gray-500 p-4">No answers yet...</div>
) : (
<div className="text-gray-500 self-end p-4">
None of the above:{' '}
2022-03-03 03:30:07 +00:00
{formatPercent(getDpmOutcomeProbability(contract.totalShares, '0'))}
2022-02-20 22:25:58 +00:00
</div>
)}
{tradingAllowed(contract) && !resolveOption && (
<CreateAnswerPanel contract={contract} />
)}
{user?.id === creatorId && !resolution && (
<AnswerResolvePanel
contract={contract}
resolveOption={resolveOption}
setResolveOption={setResolveOption}
chosenAnswers={chosenAnswers}
/>
)}
</Col>
)
}