diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx index 7e85c87f..9ce07ecd 100644 --- a/web/components/contract-overview.tsx +++ b/web/components/contract-overview.tsx @@ -1,31 +1,96 @@ -import React from 'react' -import { compute, Contract, deleteContract } from '../lib/firebase/contracts' +import React, { useState } from 'react' +import { + compute, + Contract, + deleteContract, + setContract, +} from '../lib/firebase/contracts' import { Col } from './layout/col' import { Spacer } from './layout/spacer' import { ContractProbGraph } from './contract-prob-graph' import { ContractDetails } from './contracts-list' import router from 'next/router' import { useUser } from '../hooks/use-user' +import { Row } from './layout/row' +import dayjs from 'dayjs' +import { Title } from './title' + +function ContractDescription(props: { + contract: Contract + isCreator: boolean +}) { + const { contract, isCreator } = props + const [editing, setEditing] = useState(false) + const editStatement = () => `EDIT (${dayjs().format('MMM D, H:mma')}): ` + const [description, setDescription] = useState(editStatement()) + + // Append the new description (after a newline) + async function saveDescription(e: any) { + e.preventDefault() + setEditing(false) + contract.description = `${contract.description}\n${description}`.trim() + await setContract(contract) + setDescription(editStatement()) + } + + return ( +
+ {contract.description} +
+ {isCreator && + !contract.resolution && + (editing ? ( +
+ + + + + +
+ ) : ( + + ))} +
+ ) +} export const ContractOverview = (props: { contract: Contract className?: string }) => { const { contract, className } = props - const { resolution, creatorId, isResolved } = contract + const { resolution, creatorId } = contract const { probPercent, volume } = compute(contract) const user = useUser() const isCreator = user?.id === creatorId - const resolutionColor = - resolution === 'YES' - ? 'text-primary' - : resolution === 'NO' - ? 'text-red-400' - : resolution === 'CANCEL' - ? 'text-yellow-400' - : '' + const resolutionColor = { + YES: 'text-primary', + NO: 'text-red-400', + CANCEL: 'text-yellow-400', + '': '', // Empty if unresolved + }[contract.resolution || ''] + return ( @@ -39,7 +104,7 @@ export const ContractOverview = (props: { {resolution ? ( -
Resolved:
+
Resolved
{resolution}
) : ( @@ -56,9 +121,10 @@ export const ContractOverview = (props: { -
- {contract.description} -
+ {((isCreator && !contract.resolution) || contract.description) && ( + + )} + {/* Show a delete button for contracts without any trading */} {isCreator && volume === 0 && (