List your markets on account page
This commit is contained in:
Austin Chen
parent
73d6e35a74
commit
f3b7fc11b6
|
|
@ -2,112 +2,53 @@ import { useRouter } from 'next/router'
|
|||
import { firebaseLogout } from '../lib/firebase/users'
|
||||
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'
|
||||
|
||||
export default function Account() {
|
||||
const user = useUser()
|
||||
const router = useRouter()
|
||||
const [contracts, setContracts] = useState<Contract[]>([])
|
||||
useEffect(() => {
|
||||
if (user?.id) {
|
||||
listContracts(user?.id).then(setContracts)
|
||||
}
|
||||
}, [user?.id])
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden h-screen bg-cover bg-gray-900">
|
||||
<Header />
|
||||
<div className="flex items-center w-full h-max px-4 py-10 bg-cover card">
|
||||
<div className="card glass lg:card-side text-neutral-content bg-gray-800 m-10 transition-all">
|
||||
<figure className="p-6">
|
||||
<img src={user?.avatarUrl} className="rounded-lg shadow-lg" />
|
||||
</figure>
|
||||
<div className="max-w-md card-body">
|
||||
<h2 className="card-title">{user?.name}</h2>
|
||||
<p>{user?.email}</p>
|
||||
<p>${user?.balanceUsd} USD</p>
|
||||
<div className="card-actions">
|
||||
<button
|
||||
className="btn glass rounded-full"
|
||||
onClick={() => {
|
||||
firebaseLogout()
|
||||
router.push('/')
|
||||
}}
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
{/* <div className="flex items-center w-full h-max px-4 py-10 bg-cover card"> */}
|
||||
<div className="max-w-4xl my-20 mx-auto">
|
||||
<div>
|
||||
<div className="card glass lg:card-side text-neutral-content bg-gray-800 transition-all max-w-sm mx-auto my-20">
|
||||
<figure className="p-6">
|
||||
<img src={user?.avatarUrl} className="rounded-lg shadow-lg" />
|
||||
</figure>
|
||||
<div className="max-w-md card-body">
|
||||
<h2 className="card-title">{user?.name}</h2>
|
||||
<p>{user?.email}</p>
|
||||
<p>${user?.balanceUsd} USD</p>
|
||||
<div className="card-actions">
|
||||
<button
|
||||
className="btn glass rounded-full"
|
||||
onClick={() => {
|
||||
firebaseLogout()
|
||||
router.push('/')
|
||||
}}
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lorem ipsum table. TODO: fill in user's bets and markets */}
|
||||
<h1 className="text-4xl text-neutral-content m-4">
|
||||
{user?.username}'s Bets
|
||||
<h1 className="text-2xl text-indigo-300 font-bold mt-6 mb-4">
|
||||
Your markets
|
||||
</h1>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-compact">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Job</th>
|
||||
<th>company</th>
|
||||
<th>location</th>
|
||||
<th>Last Login</th>
|
||||
<th>Favorite Color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td>Cy Ganderton</td>
|
||||
<td>Quality Control Specialist</td>
|
||||
<td>Littel, Schaden and Vandervort</td>
|
||||
<td>Canada</td>
|
||||
<td>12/16/2020</td>
|
||||
<td>Blue</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>2</th>
|
||||
<td>Hart Hagerty</td>
|
||||
<td>Desktop Support Technician</td>
|
||||
<td>Zemlak, Daniel and Leannon</td>
|
||||
<td>United States</td>
|
||||
<td>12/5/2020</td>
|
||||
<td>Purple</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>3</th>
|
||||
<td>Brice Swyre</td>
|
||||
<td>Tax Accountant</td>
|
||||
<td>Carroll Group</td>
|
||||
<td>China</td>
|
||||
<td>8/15/2020</td>
|
||||
<td>Red</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>4</th>
|
||||
<td>Marjy Ferencz</td>
|
||||
<td>Office Assistant I</td>
|
||||
<td>Rowe-Schoen</td>
|
||||
<td>Russia</td>
|
||||
<td>3/25/2021</td>
|
||||
<td>Crimson</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>5</th>
|
||||
<td>Yancy Tear</td>
|
||||
<td>Community Outreach Specialist</td>
|
||||
<td>Wyman-Ledner</td>
|
||||
<td>Brazil</td>
|
||||
<td>5/22/2020</td>
|
||||
<td>Indigo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>6</th>
|
||||
<td>Irma Vasilik</td>
|
||||
<td>Editor</td>
|
||||
<td>Wiza, Bins and Emard</td>
|
||||
<td>Venezuela</td>
|
||||
<td>12/8/2020</td>
|
||||
<td>Purple</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ContractList contracts={contracts} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { FieldValue, serverTimestamp } from '@firebase/firestore'
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Header } from '../../components/header'
|
||||
import { useUser } from '../../hooks/use-user'
|
||||
|
|
@ -13,67 +13,67 @@ function ContractCard(props: { contract: Contract }) {
|
|||
const { contract } = props
|
||||
return (
|
||||
<li key={contract.id}>
|
||||
<a href="#" 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}
|
||||
<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>
|
||||
<div className="mt-2 sm:flex sm:justify-between">
|
||||
<div className="sm:flex">
|
||||
<p className="flex items-center text-sm">
|
||||
{/* <UsersIcon
|
||||
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/> */}
|
||||
{contract.id}
|
||||
</p>
|
||||
<p className="mt-2 flex items-center text-sm sm:mt-0 sm:ml-6">
|
||||
{/* <LocationMarkerIcon
|
||||
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/> */}
|
||||
{contract.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center text-sm sm:mt-0">
|
||||
{/* <CalendarIcon
|
||||
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/> */}
|
||||
<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>
|
||||
</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} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Allow user to create a new contract
|
||||
export default function NewContract() {
|
||||
const creator = useUser()
|
||||
const [contract, setContract] = useState<Contract>({
|
||||
// creatorId: creator?.id || '',
|
||||
// TODO: Set create time to Firestore timestamp
|
||||
createdTime: Date.now(),
|
||||
lastUpdatedTime: Date.now(),
|
||||
|
|
@ -103,14 +103,11 @@ export default function NewContract() {
|
|||
return (
|
||||
<div className="relative overflow-hidden h-screen bg-cover bg-gray-900">
|
||||
<Header />
|
||||
<div className="grid place-items-center py-20">
|
||||
<div className="max-w-4xl w-full bg-gray-500 rounded-lg shadow-xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-2xl text-indigo-300 font-bold">
|
||||
Create a new contract
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl my-20 mx-auto">
|
||||
<h1 className="text-2xl text-indigo-300 font-bold mt-6 mb-4">
|
||||
Create a new prediction market
|
||||
</h1>
|
||||
<div className="w-full bg-gray-500 rounded-lg shadow-xl p-6">
|
||||
{/* Create a Tailwind form that takes in all the fields needed for a new contract */}
|
||||
{/* When the form is submitted, create a new contract in the database */}
|
||||
<form>
|
||||
|
|
@ -152,6 +149,7 @@ export default function NewContract() {
|
|||
></textarea>
|
||||
</div>
|
||||
|
||||
{/* TODO: Save seeds */}
|
||||
<div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
|
||||
<div className="sm:col-span-3">
|
||||
<div className="form-control">
|
||||
|
|
@ -190,13 +188,11 @@ export default function NewContract() {
|
|||
</div>
|
||||
|
||||
{/* Show a separate card for each contract */}
|
||||
<div className="bg-gray-500 shadow overflow-hidden sm:rounded-md mt-8 max-w-4xl w-full">
|
||||
<ul role="list" className="divide-y divide-gray-200">
|
||||
{contracts.map((contract) => (
|
||||
<ContractCard contract={contract} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<h1 className="text-2xl text-indigo-300 font-bold mt-6 mb-4">
|
||||
Your markets
|
||||
</h1>
|
||||
|
||||
<ContractList contracts={contracts} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user