fix UserPage access issues

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 }) {
+function UserCard(props: { user: User; showPrivateInfo?: boolean }) {
-  const { user } = props
+  const { user, showPrivateInfo } = 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">
@@ -43,41 +44,60 @@ function UserCard(props: { user: User }) {
         )}
       </div>
       <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>
     </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 (
     <div>
+      <SEO
+        title={possesive + 'markets'}
+        description={possesive + 'markets'}
+        url={`/@${user.username}`}
+      />
+
       <Header />
+
       <div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
         <div>
-          <UserCard user={user} />
+          <UserCard user={user} showPrivateInfo={isCurrentUser} />
+
+          <Title text={possesive + 'markets'} />
 
-          <Title text="Your markets" />
           <ContractsList creator={user} />
 
           <Spacer h={4} />
 
-          <Title text="Your bets" />
+          {isCurrentUser && (
-          <BetsList user={user} />
+            <>
+              <Title text={possesive + 'bets'} />
+              <BetsList user={user} />
+            </>
+          )}
         </div>
       </div>
     </div>

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

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