diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx new file mode 100644 index 00000000..b16d9799 --- /dev/null +++ b/web/components/contracts-list.tsx @@ -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 ( +
  • + + +
    +
    +

    + {contract.question} +

    +
    +

    + {contract.outcomeType} +

    +
    +
    +
    +
    +

    {contract.id}

    +

    + {contract.description} +

    +
    +
    +

    + Created on{' '} + +

    + +
    +
    +
    +
    + +
  • + ) +} + +export function ContractsList(props: { contracts: Contract[] }) { + const { contracts } = props + return ( +
    + +
    + ) +} diff --git a/web/pages/account.tsx b/web/pages/account.tsx index d1df9064..8c9c5ca2 100644 --- a/web/pages/account.tsx +++ b/web/pages/account.tsx @@ -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 ( -
    +
    @@ -47,7 +47,7 @@ export default function Account() {

    Your markets

    - +
    ) diff --git a/web/pages/contract/index.tsx b/web/pages/contract/index.tsx index b164f6d0..298812a6 100644 --- a/web/pages/contract/index.tsx +++ b/web/pages/contract/index.tsx @@ -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 ( -
  • - - -
    -
    -

    - {contract.question} -

    -
    -

    - {contract.outcomeType} -

    -
    -
    -
    -
    -

    {contract.id}

    -

    - {contract.description} -

    -
    -
    -

    - Created on{' '} - -

    - -
    -
    -
    -
    - -
  • - ) -} - -export function ContractList(props: { contracts: Contract[] }) { - const { contracts } = props - return ( -
    -
      - {contracts.map((contract) => ( - - ))} -
    -
    - ) -} - // 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) => - 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 - +
    )