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! -
- - - Or explore all markets - - -
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 ( +
+ +
+ + <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} /> + </div> + </div> + ) } 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<Contract[]>([]) - useEffect(() => { - listAllContracts().then(setContracts) - }, []) + const contracts = useContracts() return ( <div> <Header /> <div className="max-w-4xl py-8 mx-auto"> - <SearchableGrid contracts={contracts} /> + <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} /> </div> </div> )