Extract shared UserPage code
This commit is contained in:
parent
64dde4f482
commit
87010c1924
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
84
web/components/user-page.tsx
Normal file
84
web/components/user-page.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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() {
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
Loading…
Reference in New Issue
Block a user