Restyle challenges list, cache contract name

common/challenge.ts

@@ -27,6 +27,8 @@ export type Challenge = {
 
   contractId: string
   contractSlug: string
+  contractQuestion: string
+  contractCreatorUsername: string
 
   createdTime: number
   // If null, the link is valid forever

web/lib/firebase/challenges.ts

@@ -65,6 +65,8 @@ export async function createChallenge(data: {
     acceptorAmount,
     contractSlug: contract.slug,
     contractId: contract.id,
+    contractQuestion: contract.question,
+    contractCreatorUsername: contract.creatorUsername,
     createdTime: Date.now(),
     expiresTime,
     maxUses: 1,

web/lib/firebase/contracts.ts

@@ -35,6 +35,13 @@ export function contractPath(contract: Contract) {
   return `/${contract.creatorUsername}/${contract.slug}`
 }
 
+export function contractPathWithoutContract(
+  creatorUsername: string,
+  slug: string
+) {
+  return `/${creatorUsername}/${slug}`
+}
+
 export function homeContractPath(contract: Contract) {
   return `/home?c=${contract.slug}`
 }

web/pages/challenges/index.tsx

@@ -1,13 +1,12 @@
 import clsx from 'clsx'
-import React, { useState } from 'react'
+import React from 'react'
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
 import { formatMoney } from 'common/util/format'
 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 { Title } from 'web/components/title'
-import { useUser, useUserById } from 'web/hooks/use-user'
+import { useUser } from 'web/hooks/use-user'
 import { fromNow } from 'web/lib/util/time'
 
 import dayjs from 'dayjs'
@@ -17,19 +16,17 @@ import {
   useAcceptedChallenges,
   useUserChallenges,
 } from 'web/lib/firebase/challenges'
-import { Acceptance, Challenge } from 'common/challenge'
+import { Challenge } from 'common/challenge'
-import { copyToClipboard } from 'web/lib/util/copy'
-import { ToastClipboard } from 'web/components/toast-clipboard'
 import { Tabs } from 'web/components/layout/tabs'
 import { SiteLink } from 'web/components/site-link'
 import { UserLink } from 'web/components/user-page'
 import { Avatar } from 'web/components/avatar'
+import Router from 'next/router'
+import { contractPathWithoutContract } from 'web/lib/firebase/contracts'
 
 dayjs.extend(customParseFormat)
-
+const columnClass = 'sm:px-5 px-2 py-3.5 max-w-[100px] truncate'
-export function getManalinkUrl(slug: string) {
+const amountClass = columnClass + ' max-w-[75px] font-bold'
-  return `${location.protocol}//${location.host}/link/${slug}`
-}
 
 export default function LinkPage() {
   const user = useUser()
@@ -46,23 +43,18 @@ export default function LinkPage() {
       <Col className="w-full px-8">
         <Row className="items-center justify-between">
           <Title text="Challenges" />
-          {/*{user && (*/}
-          {/*  <CreateChallengeButton*/}
-          {/*    user={user}*/}
-          {/*  />*/}
-          {/*)}*/}
         </Row>
         <p>Find or create a question to challenge someone to a bet.</p>
         <Tabs
           tabs={[
             {
-              content: <AllLinksTable links={challenges} />,
+              content: <PublicChallengesTable links={challenges} />,
-              title: 'All Challenges',
+              title: 'Public Challenges',
             },
           ].concat(
             user
               ? {
-                  content: <LinksTable links={userChallenges} />,
+                  content: <YourChallengesTable links={userChallenges} />,
                   title: 'Your Challenges',
                 }
               : []
@@ -73,149 +65,8 @@ export default function LinkPage() {
   )
 }
 
-function ClaimTableRow(props: { claim: Acceptance }) {
+function YourChallengesTable(props: { links: Challenge[] }) {
-  const { claim } = props
+  const { links } = props
-  const who = useUserById(claim.userId)
-  return (
-    <tr>
-      <td className="px-5 py-2">{who?.name || 'Loading...'}</td>
-      <td className="px-5 py-2">{`${new Date(
-        claim.createdTime
-      ).toLocaleString()}, ${fromNow(claim.createdTime)}`}</td>
-    </tr>
-  )
-}
-
-function LinkDetailsTable(props: { link: Challenge }) {
-  const { link } = props
-  return (
-    <table className="w-full divide-y divide-gray-300 border border-gray-400">
-      <thead className="bg-gray-50 text-left text-sm font-semibold text-gray-900">
-        <tr>
-          <th className="px-5 py-2">Accepted by</th>
-          <th className="px-5 py-2">Time</th>
-        </tr>
-      </thead>
-      <tbody className="divide-y divide-gray-200 bg-white text-sm text-gray-500">
-        {link.acceptances.length ? (
-          link.acceptances.map((claim) => <ClaimTableRow claim={claim} />)
-        ) : (
-          <tr>
-            <td className="px-5 py-2" colSpan={2}>
-              No one's accepted this challenge yet.
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </table>
-  )
-}
-
-function LinkTableRow(props: { link: Challenge; highlight: boolean }) {
-  const { link, highlight } = props
-  const [expanded, setExpanded] = useState(false)
-  return (
-    <>
-      <LinkSummaryRow
-        link={link}
-        highlight={highlight}
-        expanded={expanded}
-        onToggle={() => setExpanded((exp) => !exp)}
-      />
-      {expanded && (
-        <tr>
-          <td className="bg-gray-100 p-3" colSpan={5}>
-            <LinkDetailsTable link={link} />
-          </td>
-        </tr>
-      )}
-    </>
-  )
-}
-
-function LinkSummaryRow(props: {
-  link: Challenge
-  highlight: boolean
-  expanded: boolean
-  onToggle: () => void
-}) {
-  const { link, highlight, expanded, onToggle } = props
-  const [showToast, setShowToast] = useState(false)
-
-  const className = clsx(
-    'whitespace-nowrap text-sm hover:cursor-pointer text-gray-500 hover:bg-sky-50 bg-white',
-    highlight ? 'bg-indigo-100 rounded-lg animate-pulse' : ''
-  )
-  return (
-    <tr id={link.slug} key={link.slug} className={className}>
-      <td className="py-4 pl-5" onClick={onToggle}>
-        {expanded ? (
-          <ChevronUpIcon className="h-5 w-5" />
-        ) : (
-          <ChevronDownIcon className="h-5 w-5" />
-        )}
-      </td>
-
-      <td className="px-5 py-4 font-medium text-gray-900">
-        {formatMoney(link.creatorAmount)}
-      </td>
-      <td
-        className="relative px-5 py-4"
-        onClick={() => {
-          copyToClipboard(getChallengeUrl(link))
-          setShowToast(true)
-          setTimeout(() => setShowToast(false), 3000)
-        }}
-      >
-        {getChallengeUrl(link)
-          .replace('https://manifold.markets', '...')
-          .replace('http://localhost:3000', '...')}
-        {showToast && <ToastClipboard className={'left-10 -top-5'} />}
-      </td>
-
-      <td className="px-5 py-4">
-        {link.acceptedByUserIds.length > 0 ? 'Yes' : 'No'}
-      </td>
-      <td className="px-5 py-4">
-        {link.expiresTime == null ? 'Never' : fromNow(link.expiresTime)}
-      </td>
-    </tr>
-  )
-}
-
-function LinksTable(props: { links: Challenge[]; highlightedSlug?: string }) {
-  const { links, highlightedSlug } = props
-  return links.length == 0 ? (
-    <p>You don't currently have any challenges.</p>
-  ) : (
-    <div className="overflow-scroll">
-      <table className="w-full divide-y divide-gray-300 rounded-lg border border-gray-200">
-        <thead className="bg-gray-50 text-left text-sm font-semibold text-gray-900">
-          <tr>
-            <th></th>
-            <th className="px-5 py-3.5">Amount</th>
-            <th className="px-5 py-3.5">Link</th>
-            <th className="px-5 py-3.5">Accepted</th>
-            <th className="px-5 py-3.5">Expires</th>
-          </tr>
-        </thead>
-        <tbody className={'divide-y divide-gray-200 bg-white'}>
-          {links.map((link) => (
-            <LinkTableRow
-              link={link}
-              highlight={link.slug === highlightedSlug}
-            />
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-function AllLinksTable(props: {
-  links: Challenge[]
-  highlightedSlug?: string
-}) {
-  const { links, highlightedSlug } = props
   return links.length == 0 ? (
     <p>There aren't currently any challenges.</p>
   ) : (
@@ -223,17 +74,14 @@ function AllLinksTable(props: {
       <table className="w-full divide-y divide-gray-300 rounded-lg border border-gray-200">
         <thead className="bg-gray-50 text-left text-sm font-semibold text-gray-900">
           <tr>
-            <th className="px-5 py-3.5">Amount</th>
+            <th className={amountClass}>Amount</th>
-            <th className="px-5 py-3.5">Challenge Link</th>
+            <th className={columnClass}>Link</th>
-            <th className="px-5 py-3.5">Accepted By</th>
+            <th className={columnClass}>Accepted By</th>
           </tr>
         </thead>
         <tbody className={'divide-y divide-gray-200 bg-white'}>
           {links.map((link) => (
-            <PublicLinkTableRow
+            <YourLinkSummaryRow challenge={link} />
-              link={link}
-              highlight={link.slug === highlightedSlug}
-            />
           ))}
         </tbody>
       </table>
@@ -241,44 +89,154 @@ function AllLinksTable(props: {
   )
 }
 
-function PublicLinkTableRow(props: { link: Challenge; highlight: boolean }) {
+function YourLinkSummaryRow(props: { challenge: Challenge }) {
-  const { link, highlight } = props
+  const { challenge } = props
-  return <PublicLinkSummaryRow link={link} highlight={highlight} />
+  const { acceptances } = challenge
-}
-
-function PublicLinkSummaryRow(props: { link: Challenge; highlight: boolean }) {
-  const { link, highlight } = props
 
   const className = clsx(
-    'whitespace-nowrap text-sm hover:cursor-pointer text-gray-500 hover:bg-sky-50 bg-white',
+    'whitespace-nowrap text-sm hover:cursor-pointer text-gray-500 hover:bg-sky-50 bg-white'
-    highlight ? 'bg-indigo-100 rounded-lg animate-pulse' : ''
   )
   return (
-    <tr id={link.slug} key={link.slug} className={className}>
+    <tr id={challenge.slug} key={challenge.slug} className={className}>
-      <td className="px-5 py-4 font-medium text-gray-900">
+      <td className={amountClass}>
-        {formatMoney(link.creatorAmount)}
+        <SiteLink href={getChallengeUrl(challenge)}>
+          {formatMoney(challenge.creatorAmount)}
+        </SiteLink>
       </td>
-      <td className="relative px-2 py-4">
+      <td className={clsx(columnClass, 'sm:max-w-[150px] lg:max-w-[200px]')}>
-        <SiteLink href={getChallengeUrl(link)}>
+        <SiteLink href={getChallengeUrl(challenge)}>
-          {getChallengeUrl(link)
+          {getChallengeUrl(challenge)
-            .replace('https://manifold.markets', '...')
+            .replace(`https://manifold.markets/challenges/`, '...')
-            .replace('http://localhost:3000', '...')}
+            .replace('http://localhost:3000/challenges', '...')}
         </SiteLink>
       </td>
 
-      <td className="px-2 py-4">
+      <td className={columnClass}>
         <Row className={'items-center justify-start gap-1'}>
+          {acceptances.length > 0 ? (
+            <>
               <Avatar
-            username={link.acceptances[0].userUsername}
+                username={acceptances[0].userUsername}
-            avatarUrl={link.acceptances[0].userAvatarUrl}
+                avatarUrl={acceptances[0].userAvatarUrl}
                 size={'sm'}
               />
               <UserLink
-            name={link.acceptances[0].userName}
+                name={acceptances[0].userName}
-            username={link.acceptances[0].userUsername}
+                username={acceptances[0].userUsername}
               />
+            </>
+          ) : (
+            <span>
+              No one -
+              {challenge.expiresTime &&
+                ` (expires ${fromNow(challenge.expiresTime)})`}
+            </span>
+          )}
         </Row>
       </td>
     </tr>
   )
 }
+
+function PublicChallengesTable(props: { links: Challenge[] }) {
+  const { links } = props
+  return links.length == 0 ? (
+    <p>There aren't currently any challenges.</p>
+  ) : (
+    <div className="overflow-scroll">
+      <table className="w-full divide-y divide-gray-300 rounded-lg border border-gray-200">
+        <thead className="bg-gray-50 text-left text-sm font-semibold text-gray-900">
+          <tr>
+            <th className={amountClass}>Amount</th>
+            <th className={columnClass}>Creator</th>
+            <th className={columnClass}>Acceptor</th>
+            <th className={columnClass}>Market</th>
+          </tr>
+        </thead>
+        <tbody className={'divide-y divide-gray-200 bg-white'}>
+          {links.map((link) => (
+            <PublicLinkSummaryRow challenge={link} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function PublicLinkSummaryRow(props: { challenge: Challenge }) {
+  const { challenge } = props
+  const {
+    acceptances,
+    creatorUsername,
+    creatorName,
+    creatorAvatarUrl,
+    contractCreatorUsername,
+    contractQuestion,
+    contractSlug,
+  } = challenge
+
+  const className = clsx(
+    'whitespace-nowrap text-sm hover:cursor-pointer text-gray-500 hover:bg-sky-50 bg-white'
+  )
+  return (
+    <tr
+      id={challenge.slug + '-public'}
+      key={challenge.slug + '-public'}
+      className={className}
+      onClick={() => Router.push(getChallengeUrl(challenge))}
+    >
+      <td className={amountClass}>
+        <SiteLink href={getChallengeUrl(challenge)}>
+          {formatMoney(challenge.creatorAmount)}
+        </SiteLink>
+      </td>
+
+      <td className={clsx(columnClass)}>
+        <Row className={'items-center justify-start gap-1'}>
+          <Avatar
+            username={creatorUsername}
+            avatarUrl={creatorAvatarUrl}
+            size={'sm'}
+            noLink={true}
+          />
+          <UserLink name={creatorName} username={creatorUsername} />
+        </Row>
+      </td>
+
+      <td className={clsx(columnClass)}>
+        <Row className={'items-center justify-start gap-1'}>
+          {acceptances.length > 0 ? (
+            <>
+              <Avatar
+                username={acceptances[0].userUsername}
+                avatarUrl={acceptances[0].userAvatarUrl}
+                size={'sm'}
+                noLink={true}
+              />
+              <UserLink
+                name={acceptances[0].userName}
+                username={acceptances[0].userUsername}
+              />
+            </>
+          ) : (
+            <span>
+              No one -
+              {challenge.expiresTime &&
+                ` (expires ${fromNow(challenge.expiresTime)})`}
+            </span>
+          )}
+        </Row>
+      </td>
+      <td className={clsx(columnClass, 'font-bold')}>
+        <SiteLink
+          href={contractPathWithoutContract(
+            contractCreatorUsername,
+            contractSlug
+          )}
+        >
+          {contractQuestion}
+        </SiteLink>
+      </td>
+    </tr>
+  )
+}