fix UserPage access issues

This commit is contained in:
mantikoros 2021-12-16 15:17:32 -06:00
parent 21d0eca49f
commit 01bb4e4156
3 changed files with 52 additions and 26 deletions

View File

@ -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>

View File

@ -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} />
) )

View File

@ -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 />
} }