Make tournament page efficient (#832)

* Make tournament page efficient

* Fix URL to Salem contract

* Use totalMembers instead of deprecated field

* Increase page size to 12

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

web/components/carousel.tsx

@@ -33,7 +33,7 @@ export function Carousel(props: {
   }, 500)
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(onScroll, [])
+  useEffect(onScroll, [children])
 
   return (
     <div className={clsx('relative', className)}>

web/hooks/use-pagination.ts

@@ -103,6 +103,7 @@ export const usePagination = <T>(opts: PaginationOptions<T>) => {
     isEnd: state.isComplete && state.pageEnd >= state.docs.length,
     getPrev: () => dispatch({ type: 'PREV' }),
     getNext: () => dispatch({ type: 'NEXT' }),
+    allItems: () => state.docs.map((d) => d.data()),
     getItems: () =>
       state.docs.slice(state.pageStart, state.pageEnd).map((d) => d.data()),
   }

web/lib/firebase/contracts.ts

@@ -104,11 +104,18 @@ export async function listContracts(creatorId: string): Promise<Contract[]> {
   return snapshot.docs.map((doc) => doc.data())
 }
 
+export const contractsByGroupSlugQuery = (slug: string) =>
+  query(
+    contracts,
+    where('groupSlugs', 'array-contains', slug),
+    where('isResolved', '==', false),
+    orderBy('popularityScore', 'desc')
+  )
+
 export async function listContractsByGroupSlug(
   slug: string
 ): Promise<Contract[]> {
-  const q = query(contracts, where('groupSlugs', 'array-contains', slug))
-  const snapshot = await getDocs(q)
+  const snapshot = await getDocs(contractsByGroupSlugQuery(slug))
   return snapshot.docs.map((doc) => doc.data())
 }
 

web/pages/tournaments/index.tsx

@@ -1,16 +1,10 @@
 import { ClockIcon } from '@heroicons/react/outline'
 import { UsersIcon } from '@heroicons/react/solid'
-import {
-  BinaryContract,
-  Contract,
-  PseudoNumericContract,
-} from 'common/contract'
-import { Group } from 'common/group'
-import dayjs, { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
-import { keyBy, mapValues, sortBy } from 'lodash'
+import { zip } from 'lodash'
 import Image, { ImageProps, StaticImageData } from 'next/image'
 import Link from 'next/link'
 import { useState } from 'react'
@@ -20,27 +14,33 @@ 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 { contractsByGroupSlugQuery } from 'web/lib/firebase/contracts'
 import { getGroup, groupPath } from 'web/lib/firebase/groups'
 import elon_pic from './_cspi/Will_Elon_Buy_Twitter.png'
 import china_pic from './_cspi/Chinese_Military_Action_against_Taiwan.png'
 import mpox_pic from './_cspi/Monkeypox_Cases.png'
 import race_pic from './_cspi/Supreme_Court_Ban_Race_in_College_Admissions.png'
 import { SiteLink } from 'web/components/site-link'
-import { getProbability } from 'common/calculate'
 import { Carousel } from 'web/components/carousel'
+import { usePagination } from 'web/hooks/use-pagination'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(customParseFormat)
-const toDate = (d: string) => dayjs(d, 'MMM D, YYYY').tz('America/Los_Angeles')
+const toDate = (d: string) =>
+  dayjs(d, 'MMM D, YYYY').tz('America/Los_Angeles').valueOf()
+
+type MarketImage = {
+  marketUrl: string
+  image: StaticImageData
+}
 
 type Tourney = {
   title: string
-  url?: string
   blurb: string // actual description in the click-through
   award?: string
-  endTime?: Dayjs
+  endTime?: number
   groupId: string
 }
 
@@ -50,7 +50,7 @@ const Salem = {
   url: 'https://salemcenter.manifold.markets/',
   award: '$25,000',
   endTime: toDate('Jul 31, 2023'),
-  markets: [],
+  contractIds: [],
   images: [
     {
       marketUrl:
@@ -107,33 +107,27 @@ const tourneys: Tourney[] = [
   // },
 ]
 
-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?.totalMembers)
-  const slugs = mapValues(groupMap, 'slug')
-
-  return { props: { markets, numPeople, slugs }, revalidate: 60 * 10 }
+type SectionInfo = {
+  tourney: Tourney
+  slug: string
+  numPeople: number
 }
 
-export default function TournamentPage(props: {
-  markets: { [groupId: string]: Contract[] }
-  numPeople: { [groupId: string]: number }
-  slugs: { [groupId: string]: string }
-}) {
-  const { markets = {}, numPeople = {}, slugs = {} } = props
+export async function getStaticProps() {
+  const groupIds = tourneys.map((data) => data.groupId)
+  const groups = await Promise.all(groupIds.map(getGroup))
+  const sections = zip(tourneys, groups)
+    .filter(([_tourney, group]) => group != null)
+    .map(([tourney, group]) => ({
+      tourney,
+      slug: group!.slug, // eslint-disable-line
+      numPeople: group!.totalMembers, // eslint-disable-line
+    }))
+  return { props: { sections } }
+}
+
+export default function TournamentPage(props: { sections: SectionInfo[] }) {
+  const { sections } = props
 
   return (
     <Page>
@@ -141,96 +135,111 @@ export default function TournamentPage(props: {
         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] ?? []}
-          />
+      <Col className="mx-4 mt-4 gap-10 sm:mx-10 xl:w-[125%]">
+        {sections.map(({ tourney, slug, numPeople }) => (
+          <div key={slug}>
+            <SectionHeader
+              url={groupPath(slug)}
+              title={tourney.title}
+              ppl={numPeople}
+              award={tourney.award}
+              endTime={tourney.endTime}
+            />
+            <span>{tourney.blurb}</span>
+            <MarketCarousel slug={slug} />
+          </div>
         ))}
-        <Section {...Salem} />
+        <div>
+          <SectionHeader
+            url={Salem.url}
+            title={Salem.title}
+            award={Salem.award}
+            endTime={Salem.endTime}
+          />
+          <span>{Salem.blurb}</span>
+          <ImageCarousel url={Salem.url} images={Salem.images} />
+        </div>
       </Col>
     </Page>
   )
 }
 
-function Section(props: {
-  title: string
+const SectionHeader = (props: {
   url: string
-  blurb: string
-  award?: string
+  title: string
   ppl?: number
-  endTime?: Dayjs
-  markets: Contract[]
-  images?: { marketUrl: string; image: StaticImageData }[] // hack for cspi
-}) {
-  const { title, url, blurb, award, ppl, endTime, images } = props
-  // Sort markets by probability, highest % first
-  const markets = sortBy(props.markets, (c) =>
-    getProbability(c as BinaryContract | PseudoNumericContract)
-  )
-    .reverse()
-    .filter((c) => !c.isResolved)
-
+  award?: string
+  endTime?: number
+}) => {
+  const { url, title, ppl, award, endTime } = 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 && (
+    <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">
-                <UsersIcon className="h-4" />
-                {ppl}
+                <ClockIcon className="h-4" />
+                {dayjs(endTime).format('MMM D')}
               </span>
-            )}
-            {endTime && (
-              <DateTimeTooltip time={endTime.valueOf()} text="Ends">
-                <span className="flex items-center gap-1">
-                  <ClockIcon className="h-4" />
-                  {endTime.format('MMM D')}
-                </span>
-              </DateTimeTooltip>
-            )}
-          </Row>
+            </DateTimeTooltip>
+          )}
+        </Row>
+      </a>
+    </Link>
+  )
+}
+
+const ImageCarousel = (props: { images: MarketImage[]; url: string }) => {
+  const { images, url } = props
+  return (
+    <Carousel className="-mx-4 mt-4 sm:-mx-10">
+      <div className="shrink-0 sm:w-6" />
+      {images.map(({ marketUrl, image }) => (
+        <a key={marketUrl} href={marketUrl} className="hover:brightness-95">
+          <NaturalImage src={image} />
         </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}
-              hideGroupLink
-              className="mb-2 max-h-[200px] w-96 shrink-0"
-              questionClass="line-clamp-3"
-              trackingPostfix=" tournament"
-            />
-          ))
-        ) : (
-          <>
-            {images?.map(({ marketUrl, image }) => (
-              <a href={marketUrl} className="hover:brightness-95">
-                <NaturalImage src={image} />
-              </a>
-            ))}
-            <SiteLink
-              className="ml-6 mr-10 flex shrink-0 items-center text-indigo-700"
-              href={url}
-            >
-              See more
-            </SiteLink>
-          </>
-        )}
-      </Carousel>
-    </div>
+      ))}
+      <SiteLink
+        className="ml-6 mr-10 flex shrink-0 items-center text-indigo-700"
+        href={url}
+      >
+        See more
+      </SiteLink>
+    </Carousel>
+  )
+}
+
+const MarketCarousel = (props: { slug: string }) => {
+  const { slug } = props
+  const q = contractsByGroupSlugQuery(slug)
+  const { allItems, getNext, isLoading } = usePagination({ q, pageSize: 12 })
+  return isLoading ? (
+    <LoadingIndicator className="mt-10" />
+  ) : (
+    <Carousel className="-mx-4 mt-4 sm:-mx-10" loadMore={getNext}>
+      <div className="shrink-0 sm:w-6" />
+      {allItems().map((m) => (
+        <ContractCard
+          key={m.id}
+          contract={m}
+          hideGroupLink
+          className="mb-2 max-h-[200px] w-96 shrink-0"
+          questionClass="line-clamp-3"
+          trackingPostfix=" tournament"
+        />
+      ))}
+    </Carousel>
   )
 }