/home for signed in users (#35)

web/components/feed-create.tsx

@@ -49,7 +49,7 @@ export function FeedPromo(props: { hotContracts: Contract[] }) {
   )
 }
 
-export default function FeedCreate(props: { user: User }) {
+export default function FeedCreate(props: { user?: User }) {
   const { user } = props
   const [question, setQuestion] = useState('')
 
@@ -70,9 +70,10 @@ export default function FeedCreate(props: { user: User }) {
     <div className="w-full bg-indigo-50 sm:rounded-md p-4">
       <div className="relative flex items-start space-x-3">
         <AvatarWithIcon
-          username={user.username}
+          username={user?.username || ''}
-          avatarUrl={user.avatarUrl || ''}
+          avatarUrl={user?.avatarUrl || ''}
         />
+
         <div className="min-w-0 flex-1">
           {/* TODO: Show focus, for accessibility */}
           <div>
@@ -88,10 +89,12 @@ export default function FeedCreate(props: { user: User }) {
           <Spacer h={4} />
         </div>
       </div>
+
       {/* Hide component instead of deleting, so edits to NewContract don't get lost */}
       <div className={question ? '' : 'hidden'}>
         <NewContract question={question} />
       </div>
+
       {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
       {!question && (
         <div className="flex justify-end">

web/components/manifold-logo.tsx

@@ -2,14 +2,18 @@ import Link from 'next/link'
 import Image from 'next/image'
 import clsx from 'clsx'
 
+import { useUser } from '../hooks/use-user'
+
 export function ManifoldLogo(props: {
   className?: string
   darkBackground?: boolean
 }) {
   const { darkBackground, className } = props
 
+  const user = useUser()
+
   return (
-    <Link href="/">
+    <Link href={user ? '/home' : '/'}>
       <a className={clsx('flex flex-row gap-4 flex-shrink-0', className)}>
         <Image
           className="hover:rotate-12 transition-all"

web/pages/home.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import Router from 'next/router'
+
+import {
+  Contract,
+  getClosingSoonContracts,
+  getHotContracts,
+  listAllContracts,
+} from '../lib/firebase/contracts'
+import { Page } from '../components/page'
+import { ActivityFeed, findActiveContracts } from './activity'
+import {
+  getRecentComments,
+  Comment,
+  listAllComments,
+} from '../lib/firebase/comments'
+import { Bet, listAllBets } from '../lib/firebase/bets'
+import FeedCreate 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, closingSoonContracts] =
+    await Promise.all([
+      listAllContracts().catch((_) => []),
+      getRecentComments().catch(() => []),
+      getHotContracts().catch(() => []),
+      getClosingSoonContracts().catch(() => []),
+    ])
+
+  const activeContracts = findActiveContracts(contracts, recentComments)
+  const activeContractBets = await Promise.all(
+    activeContracts.map((contract) => listAllBets(contract.id).catch((_) => []))
+  )
+  const activeContractComments = await Promise.all(
+    activeContracts.map((contract) =>
+      listAllComments(contract.id).catch((_) => [])
+    )
+  )
+
+  return {
+    props: {
+      activeContracts,
+      activeContractBets,
+      activeContractComments,
+      hotContracts,
+      closingSoonContracts,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+const Home = (props: {
+  activeContracts: Contract[]
+  activeContractBets: Bet[][]
+  activeContractComments: Comment[][]
+  hotContracts: Contract[]
+  closingSoonContracts: Contract[]
+}) => {
+  const {
+    activeContracts,
+    activeContractBets,
+    activeContractComments,
+    hotContracts,
+    closingSoonContracts,
+  } = props
+
+  const user = useUser()
+
+  if (user === null) {
+    Router.replace('/')
+    return <></>
+  }
+
+  return (
+    <Page>
+      <Col className="items-center">
+        <Col className="max-w-3xl">
+          <div className="-mx-2 sm:mx-0">
+            <FeedCreate user={user ?? undefined} />
+            <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 ?? []}
+            />
+          </div>
+        </Col>
+      </Col>
+    </Page>
+  )
+}
+
+export default Home

web/pages/index.tsx

@@ -1,105 +1,37 @@
 import React from 'react'
-import _ from 'lodash'
+import Router from 'next/router'
-import {
+
-  Contract,
+import { Contract, getHotContracts } from '../lib/firebase/contracts'
-  getClosingSoonContracts,
-  getHotContracts,
-  listAllContracts,
-} from '../lib/firebase/contracts'
 import { Page } from '../components/page'
-import { ActivityFeed, findActiveContracts } from './activity'
+import { FeedPromo } from '../components/feed-create'
-import {
-  getRecentComments,
-  Comment,
-  listAllComments,
-} from '../lib/firebase/comments'
-import { Bet, listAllBets } from '../lib/firebase/bets'
-import { useContracts } from '../hooks/use-contracts'
-import { useRecentComments } from '../hooks/use-comments'
-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, closingSoonContracts] =
+  const hotContracts = (await getHotContracts().catch(() => [])) ?? []
-    await Promise.all([
-      listAllContracts().catch((_) => []),
-      getRecentComments().catch(() => []),
-      getHotContracts().catch(() => []),
-      getClosingSoonContracts().catch(() => []),
-    ])
-
-  const activeContracts = findActiveContracts(contracts, recentComments)
-  const activeContractBets = await Promise.all(
-    activeContracts.map((contract) => listAllBets(contract.id).catch((_) => []))
-  )
-  const activeContractComments = await Promise.all(
-    activeContracts.map((contract) =>
-      listAllComments(contract.id).catch((_) => [])
-    )
-  )
 
   return {
-    props: {
+    props: { hotContracts },
-      activeContracts,
-      activeContractBets,
-      activeContractComments,
-      hotContracts,
-      closingSoonContracts,
-    },
-
     revalidate: 60, // regenerate after a minute
   }
 }
 
-const Home = (props: {
+const Home = (props: { hotContracts: Contract[] }) => {
-  activeContracts: Contract[]
+  const { hotContracts } = props
-  activeContractBets: Bet[][]
-  activeContractComments: Comment[][]
-  hotContracts: Contract[]
-  closingSoonContracts: Contract[]
-}) => {
-  const {
-    activeContractBets,
-    activeContractComments,
-    hotContracts,
-    closingSoonContracts,
-  } = props
-
-  const contracts = useContracts() ?? props.activeContracts
-  const recentComments = useRecentComments()
-  const activeContracts = recentComments
-    ? findActiveContracts(contracts, recentComments)
-    : props.activeContracts
 
   const user = useUser()
 
+  if (user) {
+    Router.replace('/home')
+    return <></>
+  }
+
   return (
     <Page>
       <Col className="items-center">
         <Col className="max-w-3xl">
           <div className="-mx-2 sm:mx-0">
-            {user ? (
+            <FeedPromo hotContracts={hotContracts ?? []} />
-              <>
-                <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} />
-              </>
-            )}
           </div>
         </Col>
       </Col>