From 743616449fc7a08e3d351089d4350c3ad31010d5 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 15 Dec 2021 18:26:38 -0800
Subject: [PATCH] Prefix username URLs with `@`

---
 web/components/user-page.tsx   | 3 ++-
 web/lib/firebase/contracts.ts  | 2 +-
 web/pages/[username]/index.tsx | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index e4e1749a..9c5ee090 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -11,10 +11,11 @@ import clsx from 'clsx'
 
 export function UserLink(props: { displayName: string; className?: string }) {
   const { displayName, className } = props
+  // Fix this when users can change their own names
   const username = displayName.replace(/\s+/g, '')
 
   return (
-    <Link href={`/${username}`}>
+    <Link href={`/@${username}`}>
       <a
         className={clsx(
           'hover:underline hover:decoration-indigo-400 hover:decoration-2',
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index a2aad767..2a5fa6a1 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -41,7 +41,7 @@ export function path(contract: Contract) {
   // For now, derive username from creatorName
   // Fix this when users can change their own names
   const username = contract.creatorName.replace(/\s+/g, '')
-  return `/${username}/${contract.id}`
+  return `/@${username}/${contract.id}`
 }
 
 export function compute(contract: Contract) {
diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx
index e748a0ab..921abd10 100644
--- a/web/pages/[username]/index.tsx
+++ b/web/pages/[username]/index.tsx
@@ -7,7 +7,8 @@ import Error from 'next/error'
 export default function UserProfile() {
   const router = useRouter()
   const [user, setUser] = useState<User | null>(null)
-  const { username } = router.query as { username: string }
+  const atUsername = router.query.username as string | undefined
+  const username = atUsername?.substring(1) || '' // Remove the initial @
   useEffect(() => {
     if (username) {
       getUserByUsername(username).then(setUser)