diff --git a/web/components/hero.tsx b/web/components/hero.tsx
index d2ef1cdf..58548c50 100644
--- a/web/components/hero.tsx
+++ b/web/components/hero.tsx
@@ -30,13 +30,6 @@ export const Hero = () => {
Sign in to get started!
-
diff --git a/web/components/title.tsx b/web/components/title.tsx
index ee618542..0719f0fe 100644
--- a/web/components/title.tsx
+++ b/web/components/title.tsx
@@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
return (
diff --git a/web/hooks/use-contracts.ts b/web/hooks/use-contracts.ts
new file mode 100644
index 00000000..674c570c
--- /dev/null
+++ b/web/hooks/use-contracts.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react'
+import { Contract, listenForContracts } from '../lib/firebase/contracts'
+
+export const useContracts = () => {
+ const [contracts, setContracts] = useState('loading')
+
+ useEffect(() => {
+ return listenForContracts(setContracts)
+ }, [])
+
+ return contracts
+}
diff --git a/web/lib/firebase/contracts.ts b/web/lib/firebase/contracts.ts
index 9d79af4c..51af4d6c 100644
--- a/web/lib/firebase/contracts.ts
+++ b/web/lib/firebase/contracts.ts
@@ -93,6 +93,15 @@ export async function listAllContracts(): Promise {
return snapshot.docs.map((doc) => doc.data() as Contract)
}
+export function listenForContracts(
+ setContracts: (contracts: Contract[]) => void
+) {
+ const q = query(contractCollection, orderBy('createdTime', 'desc'), limit(25))
+ return onSnapshot(q, (snap) => {
+ setContracts(snap.docs.map((doc) => doc.data() as Contract))
+ })
+}
+
export function listenForContract(
contractId: string,
setContract: (contract: Contract | null) => void
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index f264bb09..34128cef 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -5,12 +5,29 @@ import type { NextPage } from 'next'
import { Hero } from '../components/hero'
import { useUser } from '../hooks/use-user'
import Markets from './markets'
+import { useContracts } from '../hooks/use-contracts'
+import { SearchableGrid } from '../components/contracts-list'
+import { Title } from '../components/title'
const Home: NextPage = () => {
const user = useUser()
if (user === undefined) return <>>
- return user ? :
+ return user ? :
+}
+
+function LandingPage() {
+ const contracts = useContracts()
+
+ return (
+
+ )
}
export default Home
diff --git a/web/pages/markets.tsx b/web/pages/markets.tsx
index 32519175..d2f8e318 100644
--- a/web/pages/markets.tsx
+++ b/web/pages/markets.tsx
@@ -1,20 +1,15 @@
-import { useEffect, useState } from 'react'
import { SearchableGrid } from '../components/contracts-list'
import { Header } from '../components/header'
-import { listAllContracts } from '../lib/firebase/contracts'
-import { Contract } from '../lib/firebase/contracts'
+import { useContracts } from '../hooks/use-contracts'
export default function Markets() {
- const [contracts, setContracts] = useState([])
- useEffect(() => {
- listAllContracts().then(setContracts)
- }, [])
+ const contracts = useContracts()
return (
)