From c8b86a43b91302484503ce3ed61b59b2b15e5e8d Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Thu, 9 Dec 2021 16:05:55 -0600
Subject: [PATCH] Add template contract page

---
 web/hooks/use-contract.ts           | 13 ++++++++++++
 web/hooks/use-user.ts               | 12 +++++++++++
 web/lib/firebase/contracts.ts       | 20 +++++++++++++++++++
 web/lib/firebase/init.ts            |  3 +++
 web/pages/contract/[contractId].tsx | 31 +++++++++++++++++++++--------
 5 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 web/hooks/use-contract.ts
 create mode 100644 web/hooks/use-user.ts
 create mode 100644 web/lib/firebase/contracts.ts

diff --git a/web/hooks/use-contract.ts b/web/hooks/use-contract.ts
new file mode 100644
index 00000000..5ab723b4
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/web/hooks/use-user.ts b/web/hooks/use-user.ts
new file mode 100644
index 00000000..b6085547
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
new file mode 100644
index 00000000..42166817
--- /dev/null
+++ b/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)
+  })
+}
diff --git a/web/lib/firebase/init.ts b/web/lib/firebase/init.ts
index 51f1653a..1cff329c 100644
--- a/web/lib/firebase/init.ts
+++ b/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) => {
diff --git a/web/pages/contract/[contractId].tsx b/web/pages/contract/[contractId].tsx
index d69d0d05..4b34715a 100644
--- a/web/pages/contract/[contractId].tsx
+++ b/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>
-	)
-}
\ No newline at end of file
+  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>
+  )
+}