Add template contract page

web/hooks/use-contract.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+import { Contract, listenForContract } from '../lib/firebase/contracts'
+
+export const useContract = (contractId: string) => {
+	const [contract, setContract] = useState<Contract | null | 'loading'>('loading')
+
+	useEffect(() => {
+		if (contractId)
+			return listenForContract(contractId, setContract)
+	}, [contractId])
+
+	return contract
+}

web/hooks/use-user.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react'
+import { listenForLogin, User } from '../lib/firebase/users'
+
+export const useUser = () => {
+	const [user, setUser] = useState<User | null>(null)
+
+	useEffect(() => {
+		return listenForLogin(setUser)
+	}, [])
+
+	return user
+}

web/lib/firebase/contracts.ts

@@ -0,0 +1,20 @@
+import { collection, onSnapshot, doc } from '@firebase/firestore'
+import { db } from './init'
+
+export type Contract = {
+  id: string
+  question: string
+}
+
+const contractCollection = collection(db, 'contracts')
+
+export function listenForContract(
+  contractId: string,
+  setContract: (contract: Contract) => void
+) {
+  const contractRef = doc(contractCollection, contractId)
+
+  return onSnapshot(contractRef, (contractSnap) => {
+    setContract(contractSnap.data() as Contract)
+  })
+}

web/lib/firebase/init.ts

@@ -1,3 +1,4 @@
+import { getFirestore } from '@firebase/firestore'
 import { initializeApp } from 'firebase/app'
 const firebaseConfig = {
   apiKey: 'AIzaSyDp3J57vLeAZCzxLD-vcPaGIkAmBoGOSYw',
@@ -11,6 +12,8 @@ const firebaseConfig = {
 
 // Initialize Firebase
 export const app = initializeApp(firebaseConfig)
+export const db = getFirestore(app)
+
 try {
   // Note: this is still throwing a console error atm...
   import('firebase/analytics').then((analytics) => {

web/pages/contract/[contractId].tsx

@@ -1,12 +1,27 @@
 import { useRouter } from 'next/router'
+import { useContract } from '../../hooks/use-contract'
+import { useUser } from '../../hooks/use-user'
 
 export default function ContractPage() {
-	const router = useRouter()
-	const { contractId } = router.query
+  const user = useUser()
 
-	return (
-		<div>
-			{contractId}
-		</div>
-	)
+  const router = useRouter()
+  const { contractId } = router.query as { contractId: string }
+
+  const contract = useContract(contractId)
+
+  if (contract === 'loading') {
+    return <div>Loading...</div>
+  }
+
+  if (contract === null) {
+    return <div>Contract not found...</div>
+  }
+
+  return (
+    <div>
+      <div>{contract.id}</div>
+      <div>{contract.question}</div>
+    </div>
+  )
 }