From 8e119a63381f2db6c67207b76a8b101e964d23d9 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 15 Dec 2021 16:52:19 -0800
Subject: [PATCH] Replace `/contract/[id]` with `/[username]/[id]`

---
 web/components/bets-list.tsx                   |  4 ++--
 web/components/contracts-list.tsx              | 14 ++++++++------
 web/lib/firebase/contracts.ts                  |  7 +++++++
 .../{contract => [username]}/[contractId].tsx  |  0
 web/pages/[username]/index.tsx                 | 18 ++++++++++++++++++
 5 files changed, 35 insertions(+), 8 deletions(-)
 rename web/pages/{contract => [username]}/[contractId].tsx (100%)
 create mode 100644 web/pages/[username]/index.tsx

diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx
index aa4d45fb..7eb9b31c 100644
--- a/web/components/bets-list.tsx
+++ b/web/components/bets-list.tsx
@@ -8,7 +8,7 @@ import { User } from '../lib/firebase/users'
 import { formatMoney, formatPercent } from '../lib/util/format'
 import { Col } from './layout/col'
 import { Spacer } from './layout/spacer'
-import { Contract } from '../lib/firebase/contracts'
+import { Contract, path } from '../lib/firebase/contracts'
 import { Row } from './layout/row'
 import { calculateWinnings, currentValue } from '../lib/calculation/contract'
 
@@ -58,7 +58,7 @@ function MyContractBets(props: { contractId: string; bets: Bet[] }) {
 
   return (
     <div className="px-4">
-      <Link href={`/contract/${contractId}`}>
+      <Link href={path(contract)}>
         <a>
           <div className="font-medium text-indigo-700 mb-1">
             {contract.question}
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index e8fd0463..52a2c0e5 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -3,7 +3,12 @@ import { Col } from '../components/layout/col'
 import { Row } from '../components/layout/row'
 import { useEffect, useState } from 'react'
 import { useUser } from '../hooks/use-user'
-import { compute, Contract, listContracts } from '../lib/firebase/contracts'
+import {
+  compute,
+  Contract,
+  listContracts,
+  path,
+} from '../lib/firebase/contracts'
 import { formatMoney } from '../lib/util/format'
 
 export function ContractDetails(props: { contract: Contract }) {
@@ -42,7 +47,7 @@ function ContractCard(props: { contract: Contract }) {
   }[contract.resolution || '']
 
   return (
-    <Link href={`/contract/${contract.id}`}>
+    <Link href={path(contract)}>
       <a>
         <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
           <div className="card">
@@ -81,10 +86,7 @@ function ContractCard(props: { contract: Contract }) {
 export function ContractsGrid(props: { contracts: Contract[] }) {
   const { contracts } = props
   return (
-    <ul
-      role="list"
-      className="grid grid-cols-1 gap-6 lg:grid-cols-2"
-    >
+    <ul role="list" className="grid grid-cols-1 gap-6 lg:grid-cols-2">
       {contracts.map((contract) => (
         <ContractCard contract={contract} key={contract.id} />
       ))}
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 0bcca1a7..a2aad767 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -37,6 +37,13 @@ export type Contract = {
   resolution?: 'YES' | 'NO' | 'CANCEL' // Chosen by creator; must be one of outcomes
 }
 
+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}`
+}
+
 export function compute(contract: Contract) {
   const { pot, seedAmounts, createdTime, resolutionTime, isResolved } = contract
   const volume = pot.YES + pot.NO - seedAmounts.YES - seedAmounts.NO
diff --git a/web/pages/contract/[contractId].tsx b/web/pages/[username]/[contractId].tsx
similarity index 100%
rename from web/pages/contract/[contractId].tsx
rename to web/pages/[username]/[contractId].tsx
diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx
new file mode 100644
index 00000000..c2676800
--- /dev/null
+++ b/web/pages/[username]/index.tsx
@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+import { Header } from '../../components/header'
+import { Col } from '../../components/layout/col'
+import { Title } from '../../components/title'
+
+// For now, render a placeholder page
+export default function ContractPage() {
+  const router = useRouter()
+  const { username } = router.query as { username: string }
+
+  return (
+    <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <Header />
+      <Title text={username} />
+    </Col>
+  )
+}