diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx index d97cdade..f75981da 100644 --- a/web/components/user-page.tsx +++ b/web/components/user-page.tsx @@ -8,6 +8,7 @@ import { BetsList } from './bets-list' import { Spacer } from './layout/spacer' import Link from 'next/link' import clsx from 'clsx' +import { SEO } from './SEO' export function UserLink(props: { displayName: string; className?: string }) { const { displayName, className } = props @@ -28,8 +29,8 @@ export function UserLink(props: { displayName: string; className?: string }) { ) } -function UserCard(props: { user: User }) { - const { user } = props +function UserCard(props: { user: User; showPrivateInfo?: boolean }) { + const { user, showPrivateInfo } = props return (
@@ -43,41 +44,60 @@ function UserCard(props: { user: User }) { )}
- -

{user?.email}

-

{formatMoney(user?.balance)}

-
- -
+
{user.name}
+ + {showPrivateInfo && ( + <> +

{user?.email}

+

{formatMoney(user?.balance)}

+
+ +
+ + )}
) } -export function UserPage(props: { user: User }) { - const { user } = props +export function UserPage(props: { user: User; currentUser?: User }) { + const { user, currentUser } = props + + const isCurrentUser = user.id === currentUser?.id + + const possesive = isCurrentUser ? 'Your ' : `${user.username}'s ` + return (
+ +
+
- + + + - <Title text="Your markets" /> <ContractsList creator={user} /> <Spacer h={4} /> - <Title text="Your bets" /> - <BetsList user={user} /> + {isCurrentUser && ( + <> + <Title text={possesive + 'bets'} /> + <BetsList user={user} /> + </> + )} </div> </div> </div> diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx index 0ff086ac..2fd0d529 100644 --- a/web/pages/[username]/index.tsx +++ b/web/pages/[username]/index.tsx @@ -1,26 +1,32 @@ import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' +import Error from 'next/error' + import { getUserByUsername, User } from '../../lib/firebase/users' import { UserPage } from '../../components/user-page' -import Error from 'next/error' +import { useUser } from '../../hooks/use-user' export default function UserProfile() { const router = useRouter() - const [user, setUser] = useState<User | null | 'loading'>('loading') const atUsername = router.query.username as string | undefined const username = atUsername?.substring(1) || '' // Remove the initial @ + + const [user, setUser] = useState<User | null | 'loading'>('loading') + useEffect(() => { if (username) { getUserByUsername(username).then(setUser) } }, [username]) + const currentUser = useUser() + const errorMessage = `Who is this "${username}" you speak of..` if (user === 'loading') return <></> return user ? ( - <UserPage user={user} /> + <UserPage user={user} currentUser={currentUser || undefined} /> ) : ( <Error statusCode={404} title={errorMessage} /> ) diff --git a/web/pages/account.tsx b/web/pages/account.tsx index e0d0d57b..298c05e3 100644 --- a/web/pages/account.tsx +++ b/web/pages/account.tsx @@ -30,5 +30,5 @@ function SignInCard() { export default function Account() { const user = useUser() - return user ? <UserPage user={user} /> : <SignInCard /> + return user ? <UserPage user={user} currentUser={user} /> : <SignInCard /> }