From 77e15e3aa875c486e6c2d8111c2fa320a324df72 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Fri, 17 Dec 2021 23:27:29 -0800
Subject: [PATCH] Denormalize username to each contract

---
 web/components/bets-list.tsx       | 2 +-
 web/components/contracts-list.tsx  | 2 +-
 web/components/user-page.tsx       | 7 ++-----
 web/lib/firebase/contracts.ts      | 5 ++---
 web/lib/service/create-contract.ts | 1 +
 5 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index 9868441d..23b4aac3 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -118,7 +118,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
 
           <Row className="gap-2 text-gray-500 text-sm">
             <div>
-              <UserLink displayName={contract.creatorName} />
+              <UserLink username={contract.creatorUsername} />
             </div>
             {resolution && (
               <>
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index 028fc66e..b1b69fc0 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -21,7 +21,7 @@ export function ContractDetails(props: { contract: Contract }) {
   return (
     <Row className="flex-wrap text-sm text-gray-500">
       <div className="whitespace-nowrap">
-        <UserLink displayName={contract.creatorName} />
+        <UserLink username={contract.creatorUsername} />
       </div>
       <div className="mx-2">•</div>
       <div className="whitespace-nowrap">
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 196ebbd1..d42106d9 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -4,15 +4,12 @@ import { ContractsList } from './contracts-list'
 import { Title } from './title'
 import { Row } from './layout/row'
 import { formatMoney } from '../lib/util/format'
-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
-  const username = displayName.replace(/\s+/g, '')
+export function UserLink(props: { username: string; className?: string }) {
+  const { username, className } = props
 
   return (
     <Link href={`/${username}`}>
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 3ca08157..f4c7de2f 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -21,6 +21,7 @@ export type Contract = {
 
   creatorId: string
   creatorName: string
+  creatorUsername: string
 
   question: string
   description: string // More info about what the contract is about
@@ -42,9 +43,7 @@ export type Contract = {
 
 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.slug}`
+  return `/${contract.creatorUsername}/${contract.slug}`
 }
 
 export function compute(contract: Contract) {
diff --git a/web/lib/service/create-contract.ts b/web/lib/service/create-contract.ts
index cc3318d2..b10cddbf 100644
--- a/web/lib/service/create-contract.ts
+++ b/web/lib/service/create-contract.ts
@@ -31,6 +31,7 @@ export async function createContract(
 
     creatorId: creator.id,
     creatorName: creator.name,
+    creatorUsername: creator.username,
 
     question: question.trim(),
     description: description.trim(),