Embed markets below landing page. Listen for market changes

web/components/hero.tsx

@@ -30,13 +30,6 @@ export const Hero = () => {
                       Sign in to get started!
                     </button>
                   </div>
-                  <div className="mt-2">
-                    <Link href="/markets">
-                      <a className="text-green-500 text-sm hover:underline hover:decoration-2">
-                        Or explore all markets
-                      </a>
-                    </Link>
-                  </div>
                 </div>
               </div>
             </div>

web/components/title.tsx

@@ -5,7 +5,7 @@ export function Title(props: { text: string; className?: string }) {
   return (
     <h1
       className={clsx(
-        'text-3xl font-major-mono tracking-tight lowercase text-indigo-700 font-bold mt-6 mb-4',
+        'text-3xl font-major-mono tracking-tight lowercase text-indigo-700 font-bold inline-block mt-6 mb-4',
         className
       )}
     >

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<Contract[] | 'loading'>('loading')
+
+  useEffect(() => {
+    return listenForContracts(setContracts)
+  }, [])
+
+  return contracts
+}

web/lib/firebase/contracts.ts

@@ -93,6 +93,15 @@ export async function listAllContracts(): Promise<Contract[]> {
   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

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 ? <Markets /> : <Hero />
+  return user ? <Markets /> : <LandingPage />
+}
+
+function LandingPage() {
+  const contracts = useContracts()
+
+  return (
+    <div>
+      <Hero />
+      <div className="max-w-4xl py-8 mx-auto">
+        <Title text="Explore prediction markets" />
+        <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
+      </div>
+    </div>
+  )
 }
 
 export default Home

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 { useContracts } from '../hooks/use-contracts'
-import { Contract } from '../lib/firebase/contracts'
 
 export default function Markets() {
-  const [contracts, setContracts] = useState<Contract[]>([])
+  const contracts = useContracts()
-  useEffect(() => {
-    listAllContracts().then(setContracts)
-  }, [])
 
   return (
     <div>
       <Header />
       <div className="max-w-4xl py-8 mx-auto">
-        <SearchableGrid contracts={contracts} />
+        <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
       </div>
     </div>
   )