Merge branch 'main' into new-dpm

2022-01-11 22:02:31 -06:00 · 2022-01-11 22:02:31 -06:00 · c87f6b7c4a
commit c87f6b7c4a
parent 2d1d4dd58b
8 changed files with 94 additions and 88 deletions
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@ -29,8 +29,8 @@ import { createComment } from '../lib/firebase/comments'
 import { useComments } from '../hooks/use-comments'
 import { formatMoney } from '../lib/util/format'
 import { ResolutionOrChance } from './contract-card'
-import Link from 'next/link'
 import { SiteLink } from './site-link'
+import { Col } from './layout/col'
 dayjs.extend(relativeTime)

 function FeedComment(props: { activityItem: any }) {
@ -73,7 +73,7 @@ function Timestamp(props: { time: number }) {
  const { time } = props
  return (
    <span
-      className="whitespace-nowrap text-gray-300 ml-1"
+      className="whitespace-nowrap text-gray-400 ml-1"
      title={dayjs(time).format('MMM D, h:mma')}
    >
      {dayjs(time).fromNow()}
@ -149,6 +149,8 @@ export function ContractDescription(props: {
    setDescription(editStatement())
  }

+  if (!isCreator && !contract.description.trim()) return null
+
  return (
    <div className="whitespace-pre-line break-words mt-2 text-gray-700">
      <Linkify text={contract.description} />
@ -213,14 +215,14 @@ function FeedQuestion(props: { contract: Contract }) {
        </div>
      </div>
      <div className="min-w-0 flex-1 py-1.5">
-        <div className="text-sm text-gray-500">
+        <div className="text-sm text-gray-500 mb-2">
          <span className="text-gray-900">{contract.creatorName}</span> asked{' '}
          <Timestamp time={contract.createdTime} />
        </div>
-        <Row className="justify-between gap-4 mb-2">
+        <Col className="items-start sm:flex-row justify-between gap-2 sm:gap-4 mb-4 mr-2">
          <SiteLink
            href={contractPath(contract)}
-            className="text-xl text-indigo-700"
+            className="text-lg sm:text-xl text-indigo-700"
          >
            {contract.question}
          </SiteLink>
@ -229,7 +231,7 @@ function FeedQuestion(props: { contract: Contract }) {
            resolution={contract.resolution}
            probPercent={probPercent}
          />
-        </Row>
+        </Col>
        <ContractDescription contract={contract} isCreator={false} />
      </div>
    </>
--- a/web/components/nav-bar.tsx
+++ b/web/components/nav-bar.tsx
@ -35,6 +35,30 @@ export function NavBar(props: {
        <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
          {children}

+          <Link href="/about">
+            <a
+              className={clsx(
+                'text-base hidden md:block whitespace-nowrap',
+                themeClasses
+              )}
+            >
+              About
+            </a>
+          </Link>
+
+          {!isLandingPage && (
+            <Link href="/markets">
+              <a
+                className={clsx(
+                  'text-base hidden md:block whitespace-nowrap',
+                  themeClasses
+                )}
+              >
+                All markets
+              </a>
+            </Link>
+          )}
+
          {user ? (
            <SignedInHeaders user={user} themeClasses={themeClasses} />
          ) : (
@ -51,17 +75,6 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) {

  return (
    <>
-      <Link href="/about">
-        <a
-          className={clsx(
-            'text-base hidden md:block whitespace-nowrap',
-            themeClasses
-          )}
-        >
-          About
-        </a>
-      </Link>
-
      <Link href="/create">
        <a
          className={clsx(
--- a/web/components/profile-menu.tsx
+++ b/web/components/profile-menu.tsx
@ -16,7 +16,7 @@ export function ProfileMenu(props: { user: User }) {
      />

      <MenuButton
-        className="md:hidden"
+        className="md:hidden mr-2"
        menuItems={getNavigationOptions(user, { mobile: true })}
        buttonContent={<ProfileSummary user={user} />}
      />
@ -33,7 +33,10 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
    },
    ...(mobile
      ? [
-          { name: 'About', href: '/about' },
+          {
+            name: 'All markets',
+            href: '/markets',
+          },
          {
            name: 'Create a market',
            href: '/create',
@ -56,6 +59,7 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
      name: 'Discord',
      href: 'https://discord.gg/eHQBNBqXuh',
    },
+    ...(mobile ? [{ name: 'About', href: '/about' }] : []),
    {
      name: 'Sign out',
      href: '#',
--- a/web/pages/activity.tsx
+++ b/web/pages/activity.tsx
@ -1,17 +1,17 @@
 import _ from 'lodash'
 import { ContractFeed } from '../components/contract-feed'
-import { Row } from '../components/layout/row'
 import { Page } from '../components/page'
 import { Title } from '../components/title'
 import { useRecentComments } from '../hooks/use-comments'
 import { useContracts } from '../hooks/use-contracts'
 import { Contract } from '../lib/firebase/contracts'
 import { Comment } from '../lib/firebase/comments'
+import { Col } from '../components/layout/col'

 function FeedCard(props: { contract: Contract }) {
  const { contract } = props
  return (
-    <div className="card bg-white shadow-md rounded-lg divide-y divide-gray-200 py-6 px-4 mb-4">
+    <div className="card bg-white shadow-md rounded-lg divide-y divide-gray-200 py-6 px-4 max-w-3xl">
      <ContractFeed contract={contract} feedType="activity" />
    </div>
  )
@ -69,21 +69,23 @@ function findActiveContracts(
  return contracts
 }

-export function ActivityFeed() {
-  const contracts = useContracts() || []
-  const recentComments = useRecentComments() || []
+export function ActivityFeed(props: {
+  contracts: Contract[]
+  recentComments: Comment[]
+}) {
+  const contracts = useContracts() ?? props.contracts
+  const recentComments = useRecentComments() ?? props.recentComments
  // TODO: Handle static props correctly?
  const activeContracts = findActiveContracts(contracts, recentComments)
-  return contracts ? (
+
+  return contracts.length > 0 ? (
    <>
      <Title text="Recent Activity" />
-      <Row className="gap-4">
-        <div>
-          {activeContracts.map((contract) => (
-            <FeedCard contract={contract} />
-          ))}
-        </div>
-      </Row>
+      <Col className="gap-4">
+        {activeContracts.map((contract) => (
+          <FeedCard contract={contract} />
+        ))}
+      </Col>
    </>
  ) : (
    <></>
@ -93,7 +95,7 @@ export function ActivityFeed() {
 export default function ActivityPage() {
  return (
    <Page>
-      <ActivityFeed />
+      <ActivityFeed contracts={[]} recentComments={[]} />
    </Page>
  )
 }
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@ -4,7 +4,6 @@ import clsx from 'clsx'
 import dayjs from 'dayjs'
 import Textarea from 'react-expanding-textarea'

-import { CreatorContractsList } from '../components/contracts-list'
 import { Spacer } from '../components/layout/spacer'
 import { Title } from '../components/title'
 import { useUser } from '../hooks/use-user'
@ -14,7 +13,6 @@ import { AdvancedPanel } from '../components/advanced-panel'
 import { createContract } from '../lib/firebase/api-call'
 import { Row } from '../components/layout/row'
 import { AmountInput } from '../components/amount-input'
-import { ActivityFeed } from './activity'

 // Allow user to create a new contract
 export default function NewContract() {
@ -84,7 +82,7 @@ export default function NewContract() {
    <Page>
      <Title text="Create a new prediction market" />

-      <div className="w-full bg-gray-100 rounded-lg shadow-md px-6 py-4">
+      <div className="w-full max-w-3xl bg-gray-100 rounded-lg shadow-md px-6 py-4">
        {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
        {/* When the form is submitted, create a new contract in the database */}
        <form>
@ -210,10 +208,6 @@ export default function NewContract() {
          </div>
        </form>
      </div>
-
-      <Spacer h={6} />
-
-      <ActivityFeed />
    </Page>
  )
 }
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@ -1,41 +1,63 @@
 import React from 'react'
 import _ from 'lodash'
 import { useUser } from '../hooks/use-user'
-import Markets from './markets'
-import LandingPage from './landing-page'
 import {
  Contract,
  getHotContracts,
  listAllContracts,
 } from '../lib/firebase/contracts'
+import LandingPage from './landing-page'
+import { ContractsGrid } from '../components/contracts-list'
+import { Spacer } from '../components/layout/spacer'
+import { Page } from '../components/page'
+import { Title } from '../components/title'
+import { ActivityFeed } from './activity'
+import { getRecentComments, Comment } from '../lib/firebase/comments'

 export async function getStaticProps() {
-  const [contracts, hotContracts] = await Promise.all([
+  const [contracts, hotContracts, recentComments] = await Promise.all([
    listAllContracts().catch((_) => []),
    getHotContracts().catch(() => []),
+    getRecentComments().catch(() => []),
  ])

  return {
    props: {
      contracts,
      hotContracts,
+      recentComments,
    },

    revalidate: 60, // regenerate after a minute
  }
 }

-const Home = (props: { contracts: Contract[]; hotContracts: Contract[] }) => {
+const Home = (props: {
+  contracts: Contract[]
+  hotContracts: Contract[]
+  recentComments: Comment[]
+}) => {
  const user = useUser()

  if (user === undefined) return <></>

-  const { contracts, hotContracts } = props
+  const { contracts, hotContracts, recentComments } = props

-  return user ? (
-    <Markets contracts={contracts} hotContracts={hotContracts} />
-  ) : (
-    <LandingPage hotContracts={hotContracts} />
+  if (user === null) {
+    return <LandingPage hotContracts={hotContracts} />
+  }
+
+  return (
+    <Page>
+      <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={hotContracts} showHotVolume />
+      </div>
+
+      <Spacer h={10} />
+
+      <ActivityFeed contracts={contracts} recentComments={recentComments} />
+    </Page>
  )
 }

--- a/web/pages/landing-page.tsx
+++ b/web/pages/landing-page.tsx
@ -34,14 +34,7 @@ const scrollToAbout = () => {
 function Hero() {
  return (
    <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
-      <NavBar isLandingPage darkBackground>
-        <div
-          className="text-base font-medium text-white ml-8 cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
-          onClick={scrollToAbout}
-        >
-          About
-        </div>
-      </NavBar>
+      <NavBar isLandingPage darkBackground />
      <main>
        <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden">
          <div className="mx-auto max-w-7xl lg:px-8 xl:px-0">
--- a/web/pages/markets.tsx
+++ b/web/pages/markets.tsx
@ -1,54 +1,30 @@
 import _ from 'lodash'
-import { ContractsGrid, SearchableGrid } from '../components/contracts-list'
-import { Spacer } from '../components/layout/spacer'
+import { SearchableGrid } from '../components/contracts-list'
 import { Page } from '../components/page'
-import { Title } from '../components/title'
-import { useContracts, useHotContracts } from '../hooks/use-contracts'
+import { useContracts } from '../hooks/use-contracts'
 import { useQueryAndSortParams } from '../hooks/use-sort-and-query-params'
-import {
-  Contract,
-  getHotContracts,
-  listAllContracts,
-} from '../lib/firebase/contracts'
+import { Contract, listAllContracts } from '../lib/firebase/contracts'

 export async function getStaticProps() {
-  const [contracts, hotContracts] = await Promise.all([
-    listAllContracts().catch((_) => []),
-    getHotContracts().catch(() => []),
-  ])
+  const contracts = await listAllContracts().catch((_) => {})

  return {
    props: {
      contracts,
-      hotContracts,
    },

    revalidate: 60, // regenerate after a minute
  }
 }

-export default function Markets(props: {
-  contracts: Contract[]
-  hotContracts: Contract[]
-}) {
-  const contracts = useContracts()
-  const hotContracts = useHotContracts()
+export default function Markets(props: { contracts: Contract[] }) {
+  const contracts = useContracts() ?? props.contracts
  const { query, setQuery, sort, setSort } = useQueryAndSortParams()

-  const readyHotContracts = hotContracts ?? props.hotContracts
-  const readyContracts = contracts ?? props.contracts
-
  return (
    <Page>
-      <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={readyHotContracts} showHotVolume />
-      </div>
-
-      <Spacer h={10} />
-
      <SearchableGrid
-        contracts={readyContracts}
+        contracts={contracts}
        query={query}
        setQuery={setQuery}
        sort={sort}