diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx index 1fec24f8..886077c4 100644 --- a/web/components/confirmation-button.tsx +++ b/web/components/confirmation-button.tsx @@ -22,6 +22,7 @@ export function ConfirmationButton(props: { onSubmit?: () => void onOpenChanged?: (isOpen: boolean) => void onSubmitWithSuccess?: () => Promise + disabled?: boolean }) { const { openModalBtn, @@ -31,6 +32,7 @@ export function ConfirmationButton(props: { children, onOpenChanged, onSubmitWithSuccess, + disabled, } = props const [open, setOpen] = useState(false) @@ -68,7 +70,15 @@ export function ConfirmationButton(props: { -
updateOpen(true)}> +
{ + if (disabled) { + return + } + updateOpen(true) + }} + > {openModalBtn.icon} {openModalBtn.label}
diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx index aa53f62f..2b2fbcda 100644 --- a/web/components/contract/contract-card.tsx +++ b/web/components/contract/contract-card.tsx @@ -35,7 +35,6 @@ import { getMappedValue } from 'common/pseudo-numeric' import { Tooltip } from '../tooltip' import { SiteLink } from '../site-link' import { ProbChange } from './prob-change-table' -import { ContractReportResolution } from './contract-report-resolution' export function ContractCard(props: { contract: Contract diff --git a/web/components/contract/contract-report-resolution.tsx b/web/components/contract/contract-report-resolution.tsx index b4758886..484a7c3f 100644 --- a/web/components/contract/contract-report-resolution.tsx +++ b/web/components/contract/contract-report-resolution.tsx @@ -7,23 +7,27 @@ import { ConfirmationButton } from '../confirmation-button' import { Row } from '../layout/row' import { FlagIcon } from '@heroicons/react/solid' import { buildArray } from 'common/lib/util/array' +import { useState } from 'react' export function ContractReportResolution(props: { contract: Contract }) { const { contract } = props const user = useUser() + const [reporting, setReporting] = useState(false) if (!user) { return <> } const userReported = contract.flaggedByUsernames?.includes(user.id) const onSubmit = async () => { - if (!user) { + if (!user || userReported) { return true } + setReporting(true) await updateContract(contract.id, { flaggedByUsernames: buildArray(contract.flaggedByUsernames, user.id), }) + setReporting(false) return true } @@ -33,12 +37,18 @@ export function ContractReportResolution(props: { contract: Contract }) { ) return ( - + , - className: flagClass, + className: clsx(flagClass, reporting && 'btn-disabled loading'), }} cancelBtn={{ label: 'Cancel', @@ -49,10 +59,18 @@ export function ContractReportResolution(props: { contract: Contract }) { className: 'btn-secondary', }} onSubmitWithSuccess={onSubmit} + disabled={userReported} > - - Flag this market as incorrectly resolved - +
+ + Flag this market as incorrectly resolved + + + Report that the market was not resolved according to its resolution + criteria. If a creator's markets get flagged too often, they'll be + marked as unreliable. + +
)