Add tournament home page (#797)

* Add tournament home page

* Preload markets, follow count

* organize imports

* Fix card width

* Make entire title clickable

* plural /tournament -> /tournaments

* prettier

* Fix /tournaments when groupIds are invalid

* Restyle /tournaments page

* Reintroduce Salem, tweak styles

Co-authored-by: Austin Chen <akrolsmir@gmail.com>

web/components/contract/contract-card.tsx

@@ -38,6 +38,7 @@ export function ContractCard(props: {
   showHotVolume?: boolean
   showTime?: ShowTime
   className?: string
+  questionClass?: string
   onClick?: () => void
   hideQuickBet?: boolean
   hideGroupLink?: boolean
@@ -46,6 +47,7 @@ export function ContractCard(props: {
     showHotVolume,
     showTime,
     className,
+    questionClass,
     onClick,
     hideQuickBet,
     hideGroupLink,
@@ -68,7 +70,7 @@ export function ContractCard(props: {
   return (
     <Row
       className={clsx(
-        'relative gap-3 self-start rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
+        'relative gap-3 rounded-lg bg-white shadow-md hover:cursor-pointer hover:bg-gray-100',
         className
       )}
     >
@@ -105,7 +107,10 @@ export function ContractCard(props: {
           className={'hidden md:inline-flex'}
         />
         <p
-          className="break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"
+          className={clsx(
+            'break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2',
+            questionClass
+          )}
           style={{ /* For iOS safari */ wordBreak: 'break-word' }}
         >
           {question}
@@ -165,11 +170,7 @@ export function ContractCard(props: {
           showQuickBet ? 'w-[85%]' : 'w-full'
         )}
       >
-        <AvatarDetails
+        <AvatarDetails contract={contract} short={true} className="md:hidden" />
-          contract={contract}
-          short={true}
-          className={'block md:hidden'}
-        />
         <MiscDetails
           contract={contract}
           showHotVolume={showHotVolume}

web/pages/tournaments/index.tsx

@@ -0,0 +1,236 @@
+import { ClockIcon } from '@heroicons/react/outline'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  UsersIcon,
+} from '@heroicons/react/solid'
+import clsx from 'clsx'
+import { Contract } from 'common/contract'
+import { Group } from 'common/group'
+import dayjs, { Dayjs } from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+import { keyBy, mapValues, throttle } from 'lodash'
+import Link from 'next/link'
+import { ReactNode, useEffect, useRef, useState } from 'react'
+import { ContractCard } from 'web/components/contract/contract-card'
+import { DateTimeTooltip } from 'web/components/datetime-tooltip'
+import { Col } from 'web/components/layout/col'
+import { Row } from 'web/components/layout/row'
+import { Page } from 'web/components/page'
+import { SEO } from 'web/components/SEO'
+import { listContractsByGroupSlug } from 'web/lib/firebase/contracts'
+import { getGroup, groupPath } from 'web/lib/firebase/groups'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(customParseFormat)
+const toDate = (d: string) => dayjs(d, 'MMM D, YYYY').tz('America/Los_Angeles')
+
+type Tourney = {
+  title: string
+  url?: string
+  blurb: string // actual description in the click-through
+  award?: string
+  endTime?: Dayjs
+  groupId: string
+}
+
+const Salem = {
+  title: 'CSPI/Salem Forecasting Tournament',
+  blurb: 'Top 5 traders qualify for a UT Austin research fellowship.',
+  url: 'https://salemcenter.manifold.markets/',
+  award: '$25,000',
+  endTime: toDate('Jul 31, 2023'),
+} as const
+
+const tourneys: Tourney[] = [
+  {
+    title: 'Cause Exploration Prizes',
+    blurb:
+      'Which new charity ideas will Open Philanthropy find most promising?',
+    award: 'M$100k',
+    endTime: toDate('Sep 9, 2022'),
+    groupId: 'cMcpBQ2p452jEcJD2SFw',
+  },
+  {
+    title: 'Fantasy Football Stock Exchange',
+    blurb: 'How many points will each NFL player score this season?',
+    award: '$2,500',
+    endTime: toDate('Jan 6, 2023'),
+    groupId: 'SxGRqXRpV3RAQKudbcNb',
+  },
+  // {
+  //   title: 'Clearer Thinking Regrant Project',
+  //   blurb: 'Something amazing',
+  //   award: '$10,000',
+  //   endTime: toDate('Sep 22, 2022'),
+  //   groupId: '2VsVVFGhKtIdJnQRAXVb',
+  // },
+]
+
+export async function getStaticProps() {
+  const groupIds = tourneys
+    .map((data) => data.groupId)
+    .filter((id) => id != undefined) as string[]
+  const groups = (await Promise.all(groupIds.map(getGroup)))
+    // Then remove undefined groups
+    .filter(Boolean) as Group[]
+
+  const contracts = await Promise.all(
+    groups.map((g) => listContractsByGroupSlug(g?.slug ?? ''))
+  )
+
+  const markets = Object.fromEntries(groups.map((g, i) => [g.id, contracts[i]]))
+
+  const groupMap = keyBy(groups, 'id')
+  const numPeople = mapValues(groupMap, (g) => g?.memberIds.length)
+  const slugs = mapValues(groupMap, 'slug')
+
+  return { props: { markets, numPeople, slugs }, revalidate: 60 * 10 }
+}
+
+export default function TournamentPage(props: {
+  markets: { [groupId: string]: Contract[] }
+  numPeople: { [groupId: string]: number }
+  slugs: { [groupId: string]: string }
+}) {
+  const { markets = {}, numPeople = {}, slugs = {} } = props
+
+  return (
+    <Page>
+      <SEO
+        title="Tournaments"
+        description="Win money by betting in forecasting touraments on current events, sports, science, and more"
+      />
+      <Col className="mx-4 mt-4 gap-20 sm:mx-10 xl:w-[125%]">
+        {tourneys.map(({ groupId, ...data }) => (
+          <Section
+            key={groupId}
+            {...data}
+            url={groupPath(slugs[groupId])}
+            ppl={numPeople[groupId] ?? 0}
+            markets={markets[groupId] ?? []}
+          />
+        ))}
+        <Section {...Salem} markets={[]} />
+      </Col>
+    </Page>
+  )
+}
+
+function Section(props: {
+  title: string
+  url: string
+  blurb: string
+  award?: string
+  ppl?: number
+  endTime?: Dayjs
+  markets: Contract[]
+}) {
+  const { title, url, blurb, award, ppl, endTime, markets } = props
+
+  return (
+    <div>
+      <Link href={url}>
+        <a className="group mb-3 flex flex-wrap justify-between">
+          <h2 className="text-xl font-semibold group-hover:underline md:text-3xl">
+            {title}
+          </h2>
+          <Row className="my-2 items-center gap-4 whitespace-nowrap rounded-full bg-gray-200 px-6">
+            {!!award && <span className="flex items-center">🏆 {award}</span>}
+            {!!ppl && (
+              <span className="flex items-center gap-1">
+                <UsersIcon className="h-4" />
+                {ppl}
+              </span>
+            )}
+            {endTime && (
+              <DateTimeTooltip time={endTime} text="Ends">
+                <span className="flex items-center gap-1">
+                  <ClockIcon className="h-4" />
+                  {endTime.format('MMM D')}
+                </span>
+              </DateTimeTooltip>
+            )}
+          </Row>
+        </a>
+      </Link>
+      <span>{blurb}</span>
+      <Carousel className="-mx-4 mt-2 sm:-mx-10">
+        <div className="shrink-0 sm:w-6" />
+        {markets.length ? (
+          markets.map((m) => (
+            <ContractCard
+              contract={m}
+              showHotVolume
+              hideGroupLink
+              className="max-h-[200px] w-96 shrink-0"
+              questionClass="line-clamp-3"
+            />
+          ))
+        ) : (
+          <div className="flex h-32 w-80 items-center justify-center rounded bg-white text-lg text-gray-700 shadow-md">
+            Coming Soon...
+          </div>
+        )}
+      </Carousel>
+    </div>
+  )
+}
+
+function Carousel(props: { children: ReactNode; className?: string }) {
+  const { children, className } = props
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const th = (f: () => any) => throttle(f, 500, { trailing: false })
+  const scrollLeft = th(() =>
+    ref.current?.scrollBy({ left: -ref.current.clientWidth })
+  )
+  const scrollRight = th(() =>
+    ref.current?.scrollBy({ left: ref.current.clientWidth })
+  )
+
+  const [atFront, setAtFront] = useState(true)
+  const [atBack, setAtBack] = useState(false)
+  const onScroll = throttle(() => {
+    if (ref.current) {
+      const { scrollLeft, clientWidth, scrollWidth } = ref.current
+      setAtFront(scrollLeft < 80)
+      setAtBack(scrollWidth - (clientWidth + scrollLeft) < 80)
+    }
+  }, 500)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(onScroll, [])
+
+  return (
+    <div className={clsx('relative', className)}>
+      <Row
+        className="scrollbar-hide w-full gap-4 overflow-x-auto scroll-smooth"
+        ref={ref}
+        onScroll={onScroll}
+      >
+        {children}
+      </Row>
+      {!atFront && (
+        <div
+          className="absolute left-0 top-0 bottom-0 z-10 flex w-10 cursor-pointer items-center justify-center hover:bg-indigo-100/30"
+          onMouseDown={scrollLeft}
+        >
+          <ChevronLeftIcon className="h-7 w-7 rounded-full bg-indigo-50 text-indigo-700" />
+        </div>
+      )}
+      {!atBack && (
+        <div
+          className="absolute right-0 top-0 bottom-0 z-10 flex w-10 cursor-pointer items-center justify-center hover:bg-indigo-100/30"
+          onMouseDown={scrollRight}
+        >
+          <ChevronRightIcon className="h-7 w-7 rounded-full bg-indigo-50 text-indigo-700" />
+        </div>
+      )}
+    </div>
+  )
+}