fix UserPage access issues
This commit is contained in:
parent
21d0eca49f
commit
01bb4e4156
|
@ -8,6 +8,7 @@ import { BetsList } from './bets-list'
|
||||||
import { Spacer } from './layout/spacer'
|
import { Spacer } from './layout/spacer'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
import { SEO } from './SEO'
|
||||||
|
|
||||||
export function UserLink(props: { displayName: string; className?: string }) {
|
export function UserLink(props: { displayName: string; className?: string }) {
|
||||||
const { displayName, className } = props
|
const { displayName, className } = props
|
||||||
|
@ -28,8 +29,8 @@ export function UserLink(props: { displayName: string; className?: string }) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function UserCard(props: { user: User }) {
|
function UserCard(props: { user: User; showPrivateInfo?: boolean }) {
|
||||||
const { user } = props
|
const { user, showPrivateInfo } = props
|
||||||
return (
|
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">
|
<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">
|
<div className="p-4">
|
||||||
|
@ -43,41 +44,60 @@ function UserCard(props: { user: User }) {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="max-w-md card-body">
|
<div className="max-w-md card-body">
|
||||||
<UserLink
|
<div className="card-title font-major-mono">{user.name}</div>
|
||||||
displayName={user?.name}
|
|
||||||
className="card-title font-major-mono"
|
{showPrivateInfo && (
|
||||||
/>
|
<>
|
||||||
<p>{user?.email}</p>
|
<p>{user?.email}</p>
|
||||||
<p>{formatMoney(user?.balance)}</p>
|
<p>{formatMoney(user?.balance)}</p>
|
||||||
<div className="card-actions">
|
<div className="card-actions">
|
||||||
<button
|
<button
|
||||||
className="btn glass rounded-full hover:bg-green-500"
|
className="btn glass rounded-full hover:bg-green-500"
|
||||||
onClick={firebaseLogout}
|
onClick={firebaseLogout}
|
||||||
>
|
>
|
||||||
Sign Out
|
Sign Out
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Row>
|
</Row>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function UserPage(props: { user: User }) {
|
export function UserPage(props: { user: User; currentUser?: User }) {
|
||||||
const { user } = props
|
const { user, currentUser } = props
|
||||||
|
|
||||||
|
const isCurrentUser = user.id === currentUser?.id
|
||||||
|
|
||||||
|
const possesive = isCurrentUser ? 'Your ' : `${user.username}'s `
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<SEO
|
||||||
|
title={possesive + 'markets'}
|
||||||
|
description={possesive + 'markets'}
|
||||||
|
url={`/@${user.username}`}
|
||||||
|
/>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
|
<div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
|
||||||
<div>
|
<div>
|
||||||
<UserCard user={user} />
|
<UserCard user={user} showPrivateInfo={isCurrentUser} />
|
||||||
|
|
||||||
|
<Title text={possesive + 'markets'} />
|
||||||
|
|
||||||
<Title text="Your markets" />
|
|
||||||
<ContractsList creator={user} />
|
<ContractsList creator={user} />
|
||||||
|
|
||||||
<Spacer h={4} />
|
<Spacer h={4} />
|
||||||
|
|
||||||
<Title text="Your bets" />
|
{isCurrentUser && (
|
||||||
<BetsList user={user} />
|
<>
|
||||||
|
<Title text={possesive + 'bets'} />
|
||||||
|
<BetsList user={user} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,26 +1,32 @@
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import Error from 'next/error'
|
||||||
|
|
||||||
import { getUserByUsername, User } from '../../lib/firebase/users'
|
import { getUserByUsername, User } from '../../lib/firebase/users'
|
||||||
import { UserPage } from '../../components/user-page'
|
import { UserPage } from '../../components/user-page'
|
||||||
import Error from 'next/error'
|
import { useUser } from '../../hooks/use-user'
|
||||||
|
|
||||||
export default function UserProfile() {
|
export default function UserProfile() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [user, setUser] = useState<User | null | 'loading'>('loading')
|
|
||||||
const atUsername = router.query.username as string | undefined
|
const atUsername = router.query.username as string | undefined
|
||||||
const username = atUsername?.substring(1) || '' // Remove the initial @
|
const username = atUsername?.substring(1) || '' // Remove the initial @
|
||||||
|
|
||||||
|
const [user, setUser] = useState<User | null | 'loading'>('loading')
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (username) {
|
if (username) {
|
||||||
getUserByUsername(username).then(setUser)
|
getUserByUsername(username).then(setUser)
|
||||||
}
|
}
|
||||||
}, [username])
|
}, [username])
|
||||||
|
|
||||||
|
const currentUser = useUser()
|
||||||
|
|
||||||
const errorMessage = `Who is this "${username}" you speak of..`
|
const errorMessage = `Who is this "${username}" you speak of..`
|
||||||
|
|
||||||
if (user === 'loading') return <></>
|
if (user === 'loading') return <></>
|
||||||
|
|
||||||
return user ? (
|
return user ? (
|
||||||
<UserPage user={user} />
|
<UserPage user={user} currentUser={currentUser || undefined} />
|
||||||
) : (
|
) : (
|
||||||
<Error statusCode={404} title={errorMessage} />
|
<Error statusCode={404} title={errorMessage} />
|
||||||
)
|
)
|
||||||
|
|
|
@ -30,5 +30,5 @@ function SignInCard() {
|
||||||
|
|
||||||
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} currentUser={user} /> : <SignInCard />
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user