96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import clsx from 'clsx'
|
|
import { useState } from 'react'
|
|
import Textarea from 'react-expanding-textarea'
|
|
|
|
import { Answer } from '../../common/answer'
|
|
import { Contract } from '../../common/contract'
|
|
import { AmountInput } from './amount-input'
|
|
import { Col } from './layout/col'
|
|
import { createAnswer } from '../lib/firebase/api-call'
|
|
|
|
export function AnswersPanel(props: {
|
|
contract: Contract<'MULTI'>
|
|
answers: Answer[]
|
|
}) {
|
|
const { contract, answers } = props
|
|
|
|
return (
|
|
<Col>
|
|
<CreateAnswerInput contract={contract} />
|
|
{answers.map((answer) => (
|
|
<div>{answer.text}</div>
|
|
))}
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
function CreateAnswerInput(props: { contract: Contract<'MULTI'> }) {
|
|
const { contract } = props
|
|
const [text, setText] = useState('')
|
|
const [betAmount, setBetAmount] = useState<number | undefined>(10)
|
|
const [amountError, setAmountError] = useState<string | undefined>()
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const canSubmit = text && betAmount && !amountError && !isSubmitting
|
|
|
|
const submitAnswer = async () => {
|
|
if (canSubmit) {
|
|
setIsSubmitting(true)
|
|
console.log('submitting', { text, betAmount })
|
|
const result = await createAnswer({
|
|
contractId: contract.id,
|
|
text,
|
|
amount: betAmount,
|
|
}).then((r) => r.data)
|
|
|
|
console.log('submit complte', result)
|
|
setIsSubmitting(false)
|
|
|
|
if (result.status === 'success') {
|
|
setText('')
|
|
setBetAmount(10)
|
|
setAmountError(undefined)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Col className="gap-4">
|
|
<div className="text-xl text-indigo-700">Add your answer</div>
|
|
<Textarea
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
className="textarea textarea-bordered w-full"
|
|
placeholder="Type your answer..."
|
|
rows={1}
|
|
maxLength={10000}
|
|
/>
|
|
<Col className="gap-2 justify-between self-end sm:flex-row">
|
|
{text && (
|
|
<Col className="gap-2">
|
|
<div className="text-gray-500 text-sm">Bet amount</div>
|
|
<AmountInput
|
|
amount={betAmount}
|
|
onChange={setBetAmount}
|
|
error={amountError}
|
|
setError={setAmountError}
|
|
minimumAmount={10}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</Col>
|
|
)}
|
|
<button
|
|
className={clsx(
|
|
'btn btn-sm self-start',
|
|
canSubmit ? 'btn-outline' : 'btn-disabled'
|
|
)}
|
|
disabled={!canSubmit}
|
|
onClick={submitAnswer}
|
|
>
|
|
Submit answer
|
|
</button>
|
|
</Col>
|
|
</Col>
|
|
)
|
|
}
|