Extract shared UserPage code

This commit is contained in:
Austin Chen 2021-12-15 18:11:29 -08:00
parent 64dde4f482
commit 87010c1924
5 changed files with 90 additions and 87 deletions

View File

@ -11,7 +11,7 @@ import { Spacer } from './layout/spacer'
import { Contract, path } from '../lib/firebase/contracts' import { Contract, path } from '../lib/firebase/contracts'
import { Row } from './layout/row' import { Row } from './layout/row'
import { calculateWinnings, currentValue } from '../lib/calculation/contract' import { calculateWinnings, currentValue } from '../lib/calculation/contract'
import { UserLink } from '../pages/account' import { UserLink } from './user-page'
export function BetsList(props: { user: User }) { export function BetsList(props: { user: User }) {
const { user } = props const { user } = props

View File

@ -10,7 +10,7 @@ import {
} from '../lib/firebase/contracts' } from '../lib/firebase/contracts'
import { formatMoney } from '../lib/util/format' import { formatMoney } from '../lib/util/format'
import { User } from '../lib/firebase/users' import { User } from '../lib/firebase/users'
import { UserLink } from '../pages/account' import { UserLink } from './user-page'
export function ContractDetails(props: { contract: Contract }) { export function ContractDetails(props: { contract: Contract }) {
const { contract } = props const { contract } = props

View File

@ -0,0 +1,84 @@
import { firebaseLogout, User } from '../lib/firebase/users'
import { Header } from './header'
import { ContractsList } from './contracts-list'
import { Title } from './title'
import { Row } from './layout/row'
import { formatMoney } from '../lib/util/format'
import { BetsList } from './bets-list'
import { Spacer } from './layout/spacer'
import Link from 'next/link'
import clsx from 'clsx'
export function UserLink(props: { displayName: string; className?: string }) {
const { displayName, className } = props
const username = displayName.replace(/\s+/g, '')
return (
<Link href={`/${username}`}>
<a
className={clsx(
'hover:underline hover:decoration-indigo-400 hover:decoration-2',
className
)}
>
@{username}
</a>
</Link>
)
}
function UserCard(props: { user: User }) {
const { user } = props
return (
<Row className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
<div className="p-4">
{user?.avatarUrl && (
<img
src={user.avatarUrl}
className="rounded-lg shadow-lg"
width={96}
height={96}
/>
)}
</div>
<div className="max-w-md card-body">
<UserLink
displayName={user?.name}
className="card-title font-major-mono"
/>
<p>{user?.email}</p>
<p>{formatMoney(user?.balance)}</p>
<div className="card-actions">
<button
className="btn glass rounded-full hover:bg-green-500"
onClick={firebaseLogout}
>
Sign Out
</button>
</div>
</div>
</Row>
)
}
export function UserPage(props: { user: User }) {
const { user } = props
return (
<div>
<Header />
<div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
<div>
<UserCard user={user} />
<Title className="px-2" text="Your markets" />
<ContractsList creator={user} />
<Spacer h={4} />
<Title className="px-2" text="Your bets" />
<BetsList user={user} />
</div>
</div>
</div>
)
}

View File

@ -1,7 +1,7 @@
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { getUserByUsername, User } from '../../lib/firebase/users' import { getUserByUsername, User } from '../../lib/firebase/users'
import { UserPage } from '../account' import { UserPage } from '../../components/user-page'
import Error from 'next/error' import Error from 'next/error'
export default function UserProfile() { export default function UserProfile() {

View File

@ -1,66 +1,7 @@
import { firebaseLogin, firebaseLogout, User } from '../lib/firebase/users' import React from 'react'
import { Header } from '../components/header' import { UserPage } from '../components/user-page'
import { useUser } from '../hooks/use-user' import { useUser } from '../hooks/use-user'
import { ContractsList } from '../components/contracts-list' import { firebaseLogin } from '../lib/firebase/users'
import { Title } from '../components/title'
import { Row } from '../components/layout/row'
import { formatMoney } from '../lib/util/format'
import { BetsList } from '../components/bets-list'
import { Spacer } from '../components/layout/spacer'
import Link from 'next/link'
import clsx from 'clsx'
export function UserLink(props: { displayName: string; className?: string }) {
const { displayName, className } = props
const username = displayName.replace(/\s+/g, '')
return (
<Link href={`/${username}`}>
<a
className={clsx(
'hover:underline hover:decoration-indigo-400 hover:decoration-2',
className
)}
>
@{username}
</a>
</Link>
)
}
function UserCard(props: { user: User }) {
const { user } = props
return (
<Row className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
<div className="p-4">
{user?.avatarUrl && (
<img
src={user.avatarUrl}
className="rounded-lg shadow-lg"
width={96}
height={96}
/>
)}
</div>
<div className="max-w-md card-body">
<UserLink
displayName={user?.name}
className="card-title font-major-mono"
/>
<p>{user?.email}</p>
<p>{formatMoney(user?.balance)}</p>
<div className="card-actions">
<button
className="btn glass rounded-full hover:bg-green-500"
onClick={firebaseLogout}
>
Sign Out
</button>
</div>
</div>
</Row>
)
}
function SignInCard() { function SignInCard() {
return ( return (
@ -87,28 +28,6 @@ function SignInCard() {
) )
} }
export function UserPage(props: { user: User }) {
const { user } = props
return (
<div>
<Header />
<div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
<div>
<UserCard user={user} />
<Title className="px-2" text="Your markets" />
<ContractsList creator={user} />
<Spacer h={4} />
<Title className="px-2" text="Your bets" />
<BetsList user={user} />
</div>
</div>
</div>
)
}
export default function Account() { export default function Account() {
const user = useUser() const user = useUser()
return user ? <UserPage user={user} /> : <SignInCard /> return user ? <UserPage user={user} /> : <SignInCard />