ContractCard: declutter, fix deletion
This commit is contained in:
parent
bae969058a
commit
14cf1e6a8b
|
@ -5,43 +5,54 @@ import { Contract, deleteContract, listContracts } from '../lib/firebase/contrac
|
||||||
|
|
||||||
function ContractCard(props: { contract: Contract }) {
|
function ContractCard(props: { contract: Contract }) {
|
||||||
const { contract } = props
|
const { contract } = props
|
||||||
|
|
||||||
|
// only show delete button if there's not bets
|
||||||
|
const showDelete = contract.pot.YES === contract.seedAmounts.YES
|
||||||
|
&& contract.pot.NO === contract.seedAmounts.NO
|
||||||
|
|
||||||
|
const [isDeleted, setIsDeleted] = useState(false) // temporary fix until we stream changes
|
||||||
|
|
||||||
|
if (isDeleted)
|
||||||
|
return <></>
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li>
|
<li>
|
||||||
<Link href={`/contract/${contract.id}`}>
|
<Link href={`/contract/${contract.id}`}>
|
||||||
<a className="block hover:bg-gray-300">
|
<a className="block hover:bg-gray-300">
|
||||||
<div className="px-4 py-4 sm:px-6">
|
<div className="px-4 py-4 sm:px-6">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<p className="text-sm font-medium text-indigo-700 truncate">
|
<p className="text-base font-medium text-indigo-700 truncate">
|
||||||
{contract.question}
|
{contract.question}
|
||||||
</p>
|
</p>
|
||||||
<div className="ml-2 flex-shrink-0 flex">
|
|
||||||
<p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
|
||||||
{contract.outcomeType}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-2 sm:flex sm:justify-between">
|
<div className="mt-2 sm:flex sm:justify-between">
|
||||||
<div className="sm:flex">
|
{/* <div className="sm:flex">
|
||||||
<p className="flex items-center text-sm">{contract.id}</p>
|
|
||||||
<p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
|
<p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
|
||||||
{contract.description}
|
{contract.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div> */}
|
||||||
|
|
||||||
<div className="mt-2 flex items-center text-sm sm:mt-0">
|
<div className="mt-2 flex items-center text-sm sm:mt-0">
|
||||||
<p>
|
<p>
|
||||||
Created on{' '}
|
Created on{' '}
|
||||||
<time dateTime={`${contract.createdTime}`}>
|
<time dateTime={`${contract.createdTime}`}>
|
||||||
{new Date(contract.createdTime).toLocaleString()}
|
{new Date(contract.createdTime).toLocaleDateString()}
|
||||||
</time>
|
</time>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{showDelete &&
|
||||||
<button
|
<button
|
||||||
className="btn btn-sm btn-error btn-outline ml-2"
|
className="btn btn-xs btn-error btn-outline ml-2"
|
||||||
onClick={() => {
|
onClick={async e => {
|
||||||
deleteContract(contract.id)
|
e.preventDefault()
|
||||||
|
await deleteContract(contract.id)
|
||||||
|
setIsDeleted(true)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -58,6 +69,7 @@ export function ContractsList(props: {}) {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (creator?.id) {
|
if (creator?.id) {
|
||||||
|
// TODO: stream changes from firestore
|
||||||
listContracts(creator.id).then(setContracts)
|
listContracts(creator.id).then(setContracts)
|
||||||
}
|
}
|
||||||
}, [creator])
|
}, [creator])
|
||||||
|
|
Loading…
Reference in New Issue
Block a user