Move hot & closing markets to All Markets

Soon to be named "Explore"

web/pages/index.tsx

@@ -1,14 +1,7 @@
 import React from 'react'
 import _ from 'lodash'
-import {
+import { Contract, listAllContracts } from '../lib/firebase/contracts'
-  Contract,
-  getClosingSoonContracts,
-  getHotContracts,
-  listAllContracts,
-} from '../lib/firebase/contracts'
-import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
-import { Title } from '../components/title'
 import { ActivityFeed, findActiveContracts } from './activity'
 import {
   getRecentComments,
@@ -16,14 +9,10 @@ import {
   listAllComments,
 } from '../lib/firebase/comments'
 import { Bet, listAllBets } from '../lib/firebase/bets'
-import { ContractsGrid } from '../components/contracts-list'
 
 export async function getStaticProps() {
-  const [contracts, hotContracts, closingSoonContracts, recentComments] =
+  const [contracts, recentComments] = await Promise.all([
-    await Promise.all([
     listAllContracts().catch((_) => []),
-      getHotContracts().catch(() => []),
-      getClosingSoonContracts().catch(() => []),
     getRecentComments().catch(() => []),
   ])
 
@@ -40,8 +29,6 @@ export async function getStaticProps() {
       activeContracts,
       activeContractBets,
       activeContractComments,
-      hotContracts,
-      closingSoonContracts,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -52,23 +39,11 @@ const Home = (props: {
   activeContracts: Contract[]
   activeContractBets: Bet[][]
   activeContractComments: Comment[][]
-  hotContracts: Contract[]
-  closingSoonContracts: Contract[]
 }) => {
-  const {
+  const { activeContracts, activeContractBets, activeContractComments } = props
-    activeContracts,
-    activeContractBets,
-    activeContractComments,
-    hotContracts,
-    closingSoonContracts,
-  } = props
 
   return (
     <Page>
-      <HotMarkets contracts={hotContracts} />
-      <Spacer h={10} />
-      <ClosingSoonMarkets contracts={closingSoonContracts} />
-      <Spacer h={10} />
       <ActivityFeed
         contracts={activeContracts}
         contractBets={activeContractBets}
@@ -78,28 +53,4 @@ const Home = (props: {
   )
 }
 
-const HotMarkets = (props: { contracts: Contract[] }) => {
-  const { contracts } = props
-  if (contracts.length === 0) return <></>
-
-  return (
-    <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
-      <Title className="mt-0" text="🔥 Markets" />
-      <ContractsGrid contracts={contracts} showHotVolume />
-    </div>
-  )
-}
-
-const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
-  const { contracts } = props
-  if (contracts.length === 0) return <></>
-
-  return (
-    <div className="w-full bg-green-50 border-2 border-green-100 p-6 rounded-lg shadow-md">
-      <Title className="mt-0" text="⏰ Closing soon" />
-      <ContractsGrid contracts={contracts} showCloseTime />
-    </div>
-  )
-}
-
 export default Home

web/pages/markets.tsx

@@ -1,25 +1,44 @@
 import _ from 'lodash'
-import { SearchableGrid } from '../components/contracts-list'
+import { ContractsGrid, SearchableGrid } from '../components/contracts-list'
+import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
+import { Title } from '../components/title'
 import { useContracts } from '../hooks/use-contracts'
 import { useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
-import { Contract, listAllContracts } from '../lib/firebase/contracts'
+import {
+  Contract,
+  getClosingSoonContracts,
+  getHotContracts,
+  listAllContracts,
+} from '../lib/firebase/contracts'
 
 export async function getStaticProps() {
-  const contracts = await listAllContracts().catch((_) => {})
+  const [contracts, hotContracts, closingSoonContracts] = await Promise.all([
+    listAllContracts().catch((_) => []),
+    getHotContracts().catch(() => []),
+    getClosingSoonContracts().catch(() => []),
+  ])
 
   return {
     props: {
       contracts,
+      hotContracts,
+      closingSoonContracts,
     },
 
     revalidate: 60, // regenerate after a minute
   }
 }
 
-export default function Markets(props: { contracts: Contract[] }) {
+// TODO: Rename endpoint to "Explore"
+export default function Markets(props: {
+  contracts: Contract[]
+  hotContracts: Contract[]
+  closingSoonContracts: Contract[]
+}) {
   const contracts = useContracts() ?? props.contracts
+  const { hotContracts, closingSoonContracts } = props
   const { query, setQuery, sort, setSort } = useQueryAndSortParams()
 
   return (
@@ -29,6 +48,11 @@ export default function Markets(props: { contracts: Contract[] }) {
         description="Discover what's new, trending, or soon-to-close. Or search among our hundreds of markets."
         url="/markets"
       />
+      <HotMarkets contracts={hotContracts} />
+      <Spacer h={10} />
+      <ClosingSoonMarkets contracts={closingSoonContracts} />
+      <Spacer h={10} />
+
       <SearchableGrid
         contracts={contracts}
         query={query}
@@ -39,3 +63,27 @@ export default function Markets(props: { contracts: Contract[] }) {
     </Page>
   )
 }
+
+const HotMarkets = (props: { contracts: Contract[] }) => {
+  const { contracts } = props
+  if (contracts.length === 0) return <></>
+
+  return (
+    <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md">
+      <Title className="mt-0" text="🔥 Markets" />
+      <ContractsGrid contracts={contracts} showHotVolume />
+    </div>
+  )
+}
+
+const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
+  const { contracts } = props
+  if (contracts.length === 0) return <></>
+
+  return (
+    <div className="w-full bg-green-50 border-2 border-green-100 p-6 rounded-lg shadow-md">
+      <Title className="mt-0" text="⏰ Closing soon" />
+      <ContractsGrid contracts={contracts} showCloseTime />
+    </div>
+  )
+}