Support user profiles on /[username]

Currently all bets are also shown

web/components/contracts-list.tsx

@@ -10,6 +10,7 @@ import {
   path,
 } from '../lib/firebase/contracts'
 import { formatMoney } from '../lib/util/format'
+import { User } from '../lib/firebase/users'
 
 export function ContractDetails(props: { contract: Contract }) {
   const { contract } = props
@@ -95,9 +96,8 @@ export function ContractsGrid(props: { contracts: Contract[] }) {
   )
 }
 
-export function ContractsList(props: {}) {
+export function ContractsList(props: { creator: User }) {
-  const creator = useUser()
+  const { creator } = props
-
   const [contracts, setContracts] = useState<Contract[]>([])
 
   useEffect(() => {

web/lib/firebase/users.ts

@@ -5,6 +5,11 @@ import {
   setDoc,
   getDoc,
   onSnapshot,
+  collection,
+  query,
+  where,
+  limit,
+  getDocs,
 } from 'firebase/firestore'
 import { getAuth } from 'firebase/auth'
 import { ref, getStorage, uploadBytes, getDownloadURL } from 'firebase/storage'
@@ -35,6 +40,15 @@ export async function getUser(userId: string) {
   return docSnap.data() as User
 }
 
+export async function getUserByUsername(username: string) {
+  // Find a user whose username matches the given username, or null if no such user exists.
+  const userCollection = collection(db, 'users')
+  const q = query(userCollection, where('username', '==', username), limit(1))
+  const docs = await getDocs(q)
+  const users = docs.docs.map((doc) => doc.data() as User)
+  return users[0] || null
+}
+
 export async function setUser(userId: string, user: User) {
   await setDoc(doc(db, 'users', userId), user)
 }

web/pages/[username]/index.tsx

@@ -1,18 +1,23 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
-import { Header } from '../../components/header'
+import { getUserByUsername, User } from '../../lib/firebase/users'
-import { Col } from '../../components/layout/col'
+import { UserPage } from '../account'
-import { Title } from '../../components/title'
+import Error from 'next/error'
 
-// For now, render a placeholder page
+export default function UserProfile() {
-export default function ContractPage() {
   const router = useRouter()
+  const [user, setUser] = useState<User | null>(null)
   const { username } = router.query as { username: string }
+  useEffect(() => {
+    if (username) {
+      getUserByUsername(username).then(setUser)
+    }
+  }, [username])
 
-  return (
+  const errorMessage = `Who is this "${username}" you speak of..`
-    <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+  return user ? (
-      <Header />
+    <UserPage user={user} />
-      <Title text={username} />
+  ) : (
-    </Col>
+    <Error statusCode={404} title={errorMessage} />
   )
 }

web/pages/account.tsx

@@ -64,29 +64,29 @@ function SignInCard() {
   )
 }
 
-export default function Account() {
+export function UserPage(props: { user: User }) {
-  const user = useUser()
+  const { user } = props
-
   return (
     <div>
       <Header />
       <div className="max-w-4xl pt-8 pb-0 sm:pb-8 mx-auto">
-        {user ? (
+        <div>
-          <div>
+          <UserCard user={user} />
-            <UserCard user={user} />
 
-            <Title className="px-2" text="Your markets" />
+          <Title className="px-2" text="Your markets" />
-            <ContractsList />
+          <ContractsList creator={user} />
 
-            <Spacer h={4} />
+          <Spacer h={4} />
 
-            <Title className="px-2" text="Your bets" />
+          <Title className="px-2" text="Your bets" />
-            <BetsList user={user} />
+          <BetsList user={user} />
-          </div>
+        </div>
-        ) : (
-          <SignInCard />
-        )}
       </div>
     </div>
   )
 }
+
+export default function Account() {
+  const user = useUser()
+  return user ? <UserPage user={user} /> : <SignInCard />
+}

web/pages/contract/index.tsx

@@ -115,7 +115,7 @@ export default function NewContract() {
 
         <Title text="Your markets" />
 
-        <ContractsList />
+        <ContractsList creator={creator} />
       </div>
     </div>
   )