open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into bet

Browse Source
This commit is contained in:
jahooma 2021-12-10 12:22:10 -06:00
commit b67c9bafc2
3 changed files with 69 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/components/contracts-list.tsx Normal file
View File

@ -0,0 +1,63 @@
import Link from 'next/link'
import { Contract, deleteContract } from '../lib/firebase/contracts'
function ContractCard(props: { contract: Contract }) {
const { contract } = props
return (
<li>
<Link href={`/contract/${contract.id}`}>
<a className="block hover:bg-gray-600">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-300 truncate">
{contract.question}
</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 className="mt-2 sm:flex sm:justify-between">
<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">
{contract.description}
</p>
</div>
<div className="mt-2 flex items-center text-sm sm:mt-0">
<p>
Created on{' '}
<time dateTime={`${contract.createdTime}`}>
{new Date(contract.createdTime).toLocaleString()}
</time>
</p>
<button
className="btn btn-sm btn-error btn-outline ml-2"
onClick={() => {
deleteContract(contract.id)
}}
>
Delete
</button>
</div>
</div>
</div>
</a>
</Link>
</li>
)
}
export function ContractsList(props: { contracts: Contract[] }) {
const { contracts } = props
return (
<div className="bg-gray-500 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
<ul role="list" className="divide-y divide-gray-200">
{contracts.map((contract) => (
<ContractCard contract={contract} key={contract.id} />
))}
</ul>
</div>
)
}

6
web/pages/account.tsx
View File

@ -4,7 +4,7 @@ import { Header } from '../components/header'
import { useUser } from '../hooks/use-user'
import { useState, useEffect } from 'react'
import { Contract, listContracts } from '../lib/firebase/contracts'
import { ContractList } from './contract'
import { ContractsList } from '../components/contracts-list'
export default function Account() {
const user = useUser()
@ -17,7 +17,7 @@ export default function Account() {
}, [user?.id])
return (
<div className="relative overflow-hidden h-screen bg-cover bg-gray-900">
<div>
<Header />
<div className="max-w-4xl my-20 mx-auto">
<div>
@ -47,7 +47,7 @@ export default function Account() {
<h1 className="text-2xl font-major-mono text-indigo-300 font-bold mt-6 mb-4">
Your markets
</h1>
<ContractList contracts={contracts} />
<ContractsList contracts={contracts} />
</div>
</div>
)

68
web/pages/contract/index.tsx
View File

@ -1,75 +1,13 @@
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { ContractsList } from '../../components/contracts-list'
import { Header } from '../../components/header'
import { useUser } from '../../hooks/use-user'
import {
Contract,
deleteContract,
listContracts,
setContract as pushContract,
} from '../../lib/firebase/contracts'
function ContractCard(props: { contract: Contract }) {
const { contract } = props
return (
<li>
<Link href={`/contract/${contract.id}`}>
<a className="block hover:bg-gray-600">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-300 truncate">
{contract.question}
</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 className="mt-2 sm:flex sm:justify-between">
<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">
{contract.description}
</p>
</div>
<div className="mt-2 flex items-center text-sm sm:mt-0">
<p>
Created on{' '}
<time dateTime={`${contract.createdTime}`}>
{new Date(contract.createdTime).toLocaleString()}
</time>
</p>
<button
className="btn btn-sm btn-error ml-2"
onClick={() => {
deleteContract(contract.id)
}}
>
Delete
</button>
</div>
</div>
</div>
</a>
</Link>
</li>
)
}
export function ContractList(props: { contracts: Contract[] }) {
const { contracts } = props
return (
<div className="bg-gray-500 shadow overflow-hidden sm:rounded-md max-w-4xl w-full">
<ul role="list" className="divide-y divide-gray-200">
{contracts.map((contract) => (
<ContractCard contract={contract} key={contract.id} />
))}
</ul>
</div>
)
}
// Allow user to create a new contract
// TODO: Extract to a reusable UI, for listing contracts too?
export default function NewContract() {
@ -106,7 +44,7 @@ export default function NewContract() {
function saveField(field: keyof Contract) {
return (changeEvent: React.ChangeEvent<any>) =>
setContract({ ...contract, [field]: changeEvent.target.value })
setContract((c) => ({ ...c, [field]: changeEvent.target.value }))
}
const descriptionPlaceholder = `e.g. This market will resolve to “Yes” if, by June 2, 2021, 11:59:59 PM ET, Paxlovid (also known under PF-07321332)...`
@ -230,7 +168,7 @@ export default function NewContract() {
Your markets
</h1>
<ContractList contracts={contracts} />
<ContractsList contracts={contracts} />
</div>
</div>
)