Reorg homepage. No feed when not signed in, add back hot & closing soon for signed

web/components/feed-create.tsx

@@ -1,4 +1,3 @@
-import { useUser } from '../hooks/use-user'
 import { AvatarWithIcon } from './contract-feed'
 import { Title } from './title'
 import Textarea from 'react-expanding-textarea'
@@ -6,13 +5,12 @@ import { useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { NewContract } from '../pages/create'
 import { firebaseLogin, User } from '../lib/firebase/users'
-import { useHotContracts } from '../hooks/use-contracts'
 import { ContractsGrid } from './contracts-list'
 import { SiteLink } from './site-link'
 import { Contract } from '../../common/contract'
 
 export function FeedPromo(props: { hotContracts: Contract[] }) {
-  const contracts = useHotContracts() ?? props.hotContracts
+  const { hotContracts } = props
 
   return (
     <>
@@ -42,11 +40,10 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
         </div>
         <Spacer h={4} />
 
-        <ContractsGrid contracts={contracts?.slice(0, 2) || []} showHotVolume />
-      </div>
-
-      <div className="text-gray-800 text-lg mb-0 mt-6 mx-6">
-        Recent community activity
+        <ContractsGrid
+          contracts={hotContracts?.slice(0, 6) || []}
+          showHotVolume
+        />
       </div>
     </>
   )

web/lib/firebase/contracts.ts

@@ -153,7 +153,7 @@ export function listenForHotContracts(
 export async function getHotContracts() {
   const contracts = await getValues<Contract>(hotContractsQuery)
   return _.sortBy(
-    chooseRandomSubset(contracts, 4),
+    chooseRandomSubset(contracts, 6),
     (contract) => -1 * contract.volume24Hours
   )
 }

web/pages/index.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import _ from 'lodash'
 import {
   Contract,
+  getClosingSoonContracts,
   getHotContracts,
   listAllContracts,
 } from '../lib/firebase/contracts'
@@ -19,13 +20,16 @@ import FeedCreate, { FeedPromo } from '../components/feed-create'
 import { Spacer } from '../components/layout/spacer'
 import { Col } from '../components/layout/col'
 import { useUser } from '../hooks/use-user'
+import { ClosingSoonMarkets, HotMarkets } from './markets'
 
 export async function getStaticProps() {
-  const [contracts, recentComments, hotContracts] = await Promise.all([
-    listAllContracts().catch((_) => []),
-    getRecentComments().catch(() => []),
-    getHotContracts().catch(() => []),
-  ])
+  const [contracts, recentComments, hotContracts, closingSoonContracts] =
+    await Promise.all([
+      listAllContracts().catch((_) => []),
+      getRecentComments().catch(() => []),
+      getHotContracts().catch(() => []),
+      getClosingSoonContracts().catch(() => []),
+    ])
 
   const activeContracts = findActiveContracts(contracts, recentComments)
   const activeContractBets = await Promise.all(
@@ -41,6 +45,7 @@ export async function getStaticProps() {
       activeContractBets,
       activeContractComments,
       hotContracts,
+      closingSoonContracts,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -52,8 +57,14 @@ const Home = (props: {
   activeContractBets: Bet[][]
   activeContractComments: Comment[][]
   hotContracts: Contract[]
+  closingSoonContracts: Contract[]
 }) => {
-  const { activeContractBets, activeContractComments, hotContracts } = props
+  const {
+    activeContractBets,
+    activeContractComments,
+    hotContracts,
+    closingSoonContracts,
+  } = props
 
   const contracts = useContracts() ?? props.activeContracts
   const recentComments = useRecentComments()
@@ -69,16 +80,24 @@ const Home = (props: {
         <Col className="max-w-3xl">
           <div className="-mx-2 sm:mx-0">
             {user ? (
-              <FeedCreate user={user} />
+              <>
+                <FeedCreate user={user} />
+                <Spacer h={4} />
+                <HotMarkets contracts={hotContracts.slice(0, 4)} />
+                <Spacer h={4} />
+                <ClosingSoonMarkets contracts={closingSoonContracts} />
+                <Spacer h={10} />
+                <ActivityFeed
+                  contracts={activeContracts}
+                  contractBets={activeContractBets}
+                  contractComments={activeContractComments}
+                />
+              </>
             ) : (
-              <FeedPromo hotContracts={hotContracts} />
+              <>
+                <FeedPromo hotContracts={hotContracts} />
+              </>
             )}
-            <Spacer h={4} />
-            <ActivityFeed
-              contracts={activeContracts}
-              contractBets={activeContractBets}
-              contractComments={activeContractComments}
-            />
           </div>
         </Col>
       </Col>

web/pages/markets.tsx

@@ -64,7 +64,7 @@ export default function Markets(props: {
   )
 }
 
-const HotMarkets = (props: { contracts: Contract[] }) => {
+export const HotMarkets = (props: { contracts: Contract[] }) => {
   const { contracts } = props
   if (contracts.length === 0) return <></>
 
@@ -76,7 +76,7 @@ const HotMarkets = (props: { contracts: Contract[] }) => {
   )
 }
 
-const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
+export const ClosingSoonMarkets = (props: { contracts: Contract[] }) => {
   const { contracts } = props
   if (contracts.length === 0) return <></>