initial commit of viewing manalinks

2022-07-19 04:07:35 -07:00 · 2022-07-19 04:07:35 -07:00 · 1f72354313
commit 1f72354313
parent 47a27bf3fe
7 changed files with 223 additions and 177 deletions
--- a/web/components/contract/contract-info-dialog.tsx
+++ b/web/components/contract/contract-info-dialog.tsx
@ -20,7 +20,7 @@ import { TagsInput } from 'web/components/tags-input'
 import { DuplicateContractButton } from '../copy-contract-button'

 export const contractDetailsButtonClassName =
-  'group flex items-center rounded-md px-3 py-2 text-sm font-medium  cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'
+  'group flex items-center rounded-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 text-gray-400 hover:text-gray-500'

 export function ContractInfoDialog(props: { contract: Contract; bets: Bet[] }) {
  const { contract, bets } = props
--- a/web/components/manalink-card.tsx
+++ b/web/components/manalink-card.tsx
@ -5,6 +5,12 @@ import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { User } from 'web/lib/firebase/users'
 import { Button } from './button'
+import { Claim, Manalink } from 'common/manalink'
+import { useState } from 'react'
+import { ShareIconButton } from './share-icon-button'
+import { DotsHorizontalIcon, XCircleIcon } from '@heroicons/react/solid'
+import { contractDetailsButtonClassName } from './contract/contract-info-dialog'
+import { useUserById } from 'web/hooks/use-user'

 export type ManalinkInfo = {
  expiresTime: number | null
@ -15,19 +21,21 @@ export type ManalinkInfo = {
 }

 export function ManalinkCard(props: {
-  user: User | null | undefined
+  user?: User | null | undefined
  className?: string
  info: ManalinkInfo
-  isClaiming: boolean
+  isClaiming?: boolean
  onClaim?: () => void
+  preview?: boolean
 }) {
-  const { user, className, isClaiming, info, onClaim } = props
+  const { user, className, isClaiming, info, onClaim, preview = false } = props
  const { expiresTime, maxUses, uses, amount, message } = info
  return (
    <div
      className={clsx(
        className,
-        'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br from-indigo-200 via-indigo-400 to-indigo-800 shadow-lg transition-all'
+        'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
+        getManalinkGradient(info.amount)
      )}
    >
      <Col className="mx-4 mt-2 -mb-4 text-right text-sm text-gray-100">
@ -44,12 +52,18 @@ export function ManalinkCard(props: {
      </Col>

      <img
-        className="mb-6 block self-center transition-all group-hover:rotate-12"
+        className={clsx(
+          'ransition-all block h-1/3 w-1/3 self-center group-hover:rotate-12',
+          preview ? 'my-2' : 'w-1/2 md:mb-6 md:h-1/2'
+        )}
        src="/logo-white.svg"
-        width={200}
-        height={200}
      />
-      <Row className="justify-end rounded-b-xl bg-white p-4">
+      <Row
+        className={clsx(
+          'rounded-b-xl bg-white p-4',
+          preview ? '' : 'justify-end'
+        )}
+      >
        <Col>
          <div className="mb-1 text-xl text-indigo-500">
            {formatMoney(amount)}
@ -57,52 +71,151 @@ export function ManalinkCard(props: {
          <div>{message}</div>
        </Col>

-        <div className="ml-auto">
-          <Button onClick={onClaim} disabled={isClaiming}>
-            {user ? 'Claim' : 'Login'}
-          </Button>
-        </div>
+        {!preview && (
+          <div className="ml-auto">
+            <Button onClick={onClaim} disabled={isClaiming}>
+              {user ? 'Claim' : 'Login'}
+            </Button>
+          </div>
+        )}
      </Row>
    </div>
  )
 }

-export function ManalinkCardPreview(props: {
+export function ManalinkCardFromView(props: {
  className?: string
-  info: ManalinkInfo
+  link: Manalink
+  highlightedSlug: string
 }) {
-  const { className, info } = props
-  const { expiresTime, maxUses, uses, amount, message } = info
+  const { className, link, highlightedSlug } = props
+  const { message, amount, expiresTime, maxUses, claims } = link
+
+  const [details, setDetails] = useState(false)
+
  return (
-    <div
-      className={clsx(
-        className,
-        ' group flex flex-col rounded-lg bg-gradient-to-br from-indigo-200 via-indigo-400 to-indigo-800 shadow-lg transition-all'
-      )}
-    >
-      <Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100">
-        <div>
-          {maxUses != null
-            ? `${maxUses - uses}/${maxUses} uses left`
-            : `Unlimited use`}
+    <>
+      <Col
+        className={clsx(
+          'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
+          className,
+          link.slug === highlightedSlug
+            ? 'shadow-lg shadow-indigo-500 transition-none'
+            : ''
+        )}
+      >
+        <div
+          className={clsx(
+            'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
+            getManalinkGradient(link.amount)
+          )}
+        >
+          {details && (
+            <ClaimsList
+              className="absolute h-full w-full bg-white opacity-90"
+              link={link}
+            />
+          )}
+          <Col className="mx-4 mt-2 -mb-4 text-right text-xs text-gray-100">
+            <div>
+              {maxUses != null
+                ? `${maxUses - claims.length}/${maxUses} uses left`
+                : `Unlimited use`}
+            </div>
+            <div>
+              {expiresTime != null
+                ? `Expires ${fromNow(expiresTime)}`
+                : 'Never expires'}
+            </div>
+          </Col>
+          <img
+            className={clsx(
+              'my-auto block w-1/3 self-center py-3 transition-all',
+              details ? '' : 'group-hover:rotate-12'
+            )}
+            src="/logo-white.svg"
+          />
        </div>
-        <div>
-          {expiresTime != null
-            ? `Expires ${fromNow(expiresTime)}`
-            : 'Never expires'}
+        <Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
+          <Row className="relative gap-1">
+            <div className="my-auto mb-1 w-full text-indigo-500">
+              {formatMoney(amount)}
+            </div>
+            <ShareIconButton
+              manalink={link}
+              toastClassName={'-left-48 min-w-[250%]'}
+              buttonClassName={'transition-colors'}
+              onCopyButtonClassName={
+                'bg-indigo-100 text-indigo-500 transition-none hover:bg-indigo-100 hover:text-indigo-500'
+              }
+            />
+            <button
+              onClick={() => setDetails(!details)}
+              className={clsx(
+                contractDetailsButtonClassName,
+                details
+                  ? 'bg-indigo-100 text-indigo-500 hover:bg-indigo-100 hover:text-indigo-500'
+                  : ''
+              )}
+            >
+              <DotsHorizontalIcon className="h-[24px] w-5" />
+            </button>
+          </Row>
+          <div className="my-2 text-xs md:text-sm">{message || '\n\n'}</div>
+        </Col>
+      </Col>
+    </>
+  )
+}
+
+function ClaimsList(props: { link: Manalink; className: string }) {
+  const { link, className } = props
+  return (
+    <>
+      <Col className={clsx('px-4 py-2', className)}>
+        <div className="text-md mb-1 mt-2 w-full font-semibold">
+          Claimed by...
+        </div>
+        <div className="overflow-auto">
+          {link.claims.length > 0 ? (
+            <>
+              {link.claims.map((claim) => (
+                <Row>
+                  <Claim claim={claim} />
+                </Row>
+              ))}
+            </>
+          ) : (
+            <div className="h-full">
+              No one has claimed this manalink yet! Share your manalink to start
+              spreading the wealth.
+            </div>
+          )}
        </div>
      </Col>
-
-      <img
-        className="my-2 block h-1/3 w-1/3 self-center transition-all group-hover:rotate-12"
-        src="/logo-white.svg"
-      />
-      <Row className="rounded-b-lg bg-white p-2">
-        <Col className="text-md">
-          <div className="mb-1 text-indigo-500">{formatMoney(amount)}</div>
-          <div className="text-xs">{message}</div>
-        </Col>
-      </Row>
-    </div>
+    </>
  )
 }
+
+function Claim(props: { claim: Claim }) {
+  const { claim } = props
+  const who = useUserById(claim.toId)
+  return (
+    <Row className="my-1 gap-2 text-xs">
+      <div>{who?.name || 'Loading...'}</div>
+      <div className="text-gray-500">{fromNow(claim.claimedTime)}</div>
+    </Row>
+  )
+}
+
+function getManalinkGradient(amount: number) {
+  if (amount < 20) {
+    return 'from-slate-300 via-slate-500 to-slate-800'
+  } else if (amount >= 20 && amount < 50) {
+    return 'from-indigo-300 via-indigo-500 to-indigo-800'
+  } else if (amount >= 50 && amount < 100) {
+    return 'from-violet-300 via-violet-500 to-violet-800'
+  } else if (amount >= 100) {
+    return 'from-indigo-300 via-violet-500 to-rose-400'
+  }
+}
--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@ -4,7 +4,11 @@ import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 import { Title } from '../title'
 import { User } from 'common/user'
-import { ManalinkCardPreview, ManalinkInfo } from 'web/components/manalink-card'
+import {
+  ManalinkCard,
+  ManalinkCardPreview,
+  ManalinkInfo,
+} from 'web/components/manalink-card'
 import { createManalink } from 'web/lib/firebase/manalinks'
 import { Modal } from 'web/components/layout/modal'
 import Textarea from 'react-expanding-textarea'
@ -191,7 +195,7 @@ function CreateManalinkForm(props: {
      {finishedCreating && (
        <>
          <Title className="!my-0" text="Manalink Created!" />
-          <ManalinkCardPreview className="my-4" info={newManalink} />
+          <ManalinkCard className="my-4" info={newManalink} preview />
          <Row
            className={clsx(
              'rounded border bg-gray-50 py-2 px-3 text-sm text-gray-500 transition-colors duration-700',
--- a/web/components/pagination.tsx
+++ b/web/components/pagination.tsx
@ -1,17 +1,24 @@
+import clsx from 'clsx'
+
 export function Pagination(props: {
  page: number
  itemsPerPage: number
  totalItems: number
  setPage: (page: number) => void
  scrollToTop?: boolean
+  className?: string
 }) {
-  const { page, itemsPerPage, totalItems, setPage, scrollToTop } = props
+  const { page, itemsPerPage, totalItems, setPage, scrollToTop, className } =
+    props

  const maxPage = Math.ceil(totalItems / itemsPerPage) - 1

  return (
    <nav
-      className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+      className={clsx(
+        'flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6',
+        className
+      )}
      aria-label="Pagination"
    >
      <div className="hidden sm:block">
--- a/web/components/share-icon-button.tsx
+++ b/web/components/share-icon-button.tsx
@ -11,6 +11,8 @@ import { track } from 'web/lib/service/analytics'
 import { contractDetailsButtonClassName } from 'web/components/contract/contract-info-dialog'
 import { Group } from 'common/group'
 import { groupPath } from 'web/lib/firebase/groups'
+import { Manalink } from 'common/manalink'
+import getManalinkUrl from 'web/get-manalink-url'

 function copyContractWithReferral(contract: Contract, username?: string) {
  const postFix =
@ -30,37 +32,55 @@ function copyGroupWithReferral(group: Group, username?: string) {
  )
 }

+function copyManalink(manalink: Manalink) {
+  copyToClipboard(getManalinkUrl(manalink.slug))
+}
+
 export function ShareIconButton(props: {
  contract?: Contract
  group?: Group
+  manalink?: Manalink
  buttonClassName?: string
+  onCopyButtonClassName?: string
  toastClassName?: string
  username?: string
  children?: React.ReactNode
+  iconClassName?: string
 }) {
  const {
    contract,
+    manalink,
    buttonClassName,
+    onCopyButtonClassName,
    toastClassName,
    username,
    group,
    children,
+    iconClassName,
  } = props
  const [showToast, setShowToast] = useState(false)

  return (
    <div className="relative z-10 flex-shrink-0">
      <button
-        className={clsx(contractDetailsButtonClassName, buttonClassName)}
+        className={clsx(
+          contractDetailsButtonClassName,
+          buttonClassName,
+          showToast ? onCopyButtonClassName : ''
+        )}
        onClick={() => {
          if (contract) copyContractWithReferral(contract, username)
          if (group) copyGroupWithReferral(group, username)
+          if (manalink) copyManalink(manalink)
          track('copy share link')
          setShowToast(true)
          setTimeout(() => setShowToast(false), 2000)
        }}
      >
-        <ShareIcon className="h-[24px] w-5" aria-hidden="true" />
+        <ShareIcon
+          className={clsx(iconClassName ? iconClassName : 'h-[24px] w-5')}
+          aria-hidden="true"
+        />
        {children}
      </button>

--- a/web/pages/link/[slug].tsx
+++ b/web/pages/link/[slug].tsx
@ -28,7 +28,7 @@ export default function ClaimPage() {
        description="Send mana to anyone via link!"
        url="/send"
      />
-      <div className="mx-auto max-w-xl">
+      <div className="mx-auto max-w-xl px-2">
        <Title text={`Claim M$${manalink.amount} mana`} />
        <ManalinkCard
          user={user}
--- a/web/pages/links.tsx
+++ b/web/pages/links.tsx
@ -21,8 +21,12 @@ import { CreateLinksButton } from 'web/components/manalinks/create-links-button'

 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { ManalinkCardFromView } from 'web/components/manalink-card'
+import { Pagination } from 'web/components/pagination'
 dayjs.extend(customParseFormat)

+const LINKS_PER_PAGE = 24
+
 export function getManalinkUrl(slug: string) {
  return `${location.protocol}//${location.host}/link/${slug}`
 }
@ -37,6 +41,10 @@ export default function LinkPage() {
      (l.maxUses == null || l.claimedUserIds.length < l.maxUses) &&
      (l.expiresTime == null || l.expiresTime > Date.now())
  )
+  const [page, setPage] = useState(0)
+  const start = page * LINKS_PER_PAGE
+  const end = start + LINKS_PER_PAGE
+  const displayedLinks = unclaimedLinks.slice(start, end)

  if (user == null) {
    return null
@ -65,12 +73,30 @@ export default function LinkPage() {
          don&apos;t yet have a Manifold account.
        </p>
        <Subtitle text="Your Manalinks" />
-        <LinksTable links={unclaimedLinks} highlightedSlug={highlightedSlug} />
+        <Col className="grid w-full gap-4 md:grid-cols-2">
+          {displayedLinks.map((link) => {
+            return (
+              <ManalinkCardFromView
+                link={link}
+                highlightedSlug={highlightedSlug}
+              />
+            )
+          })}
+        </Col>
+        <Pagination
+          page={page}
+          itemsPerPage={LINKS_PER_PAGE}
+          totalItems={unclaimedLinks.length}
+          setPage={setPage}
+          className="mt-4 bg-transparent"
+          scrollToTop
+        />
      </Col>
    </Page>
  )
 }

+// TODO: either utilize this or get rid of it
 export function ClaimsList(props: { txns: ManalinkTxn[] }) {
  const { txns } = props
  return (
@ -118,127 +144,3 @@ export function ClaimDescription(props: { txn: ManalinkTxn }) {
    </div>
  )
 }
-
-function ClaimTableRow(props: { claim: Claim }) {
-  const { claim } = props
-  const who = useUserById(claim.toId)
-  return (
-    <tr>
-      <td className="px-5 py-2">{who?.name || 'Loading...'}</td>
-      <td className="px-5 py-2">{`${new Date(
-        claim.claimedTime
-      ).toLocaleString()}, ${fromNow(claim.claimedTime)}`}</td>
-    </tr>
-  )
-}
-
-function LinkDetailsTable(props: { link: Manalink }) {
-  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">Claimed 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.claims.length ? (
-          link.claims.map((claim) => <ClaimTableRow claim={claim} />)
-        ) : (
-          <tr>
-            <td className="px-5 py-2" colSpan={2}>
-              No claims yet.
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </table>
-  )
-}
-
-function LinkTableRow(props: { link: Manalink; 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: Manalink
-  highlight: boolean
-  expanded: boolean
-  onToggle: () => void
-}) {
-  const { link, highlight, expanded, onToggle } = props
-  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.amount)}
-      </td>
-      <td className="px-5 py-4">{getManalinkUrl(link.slug)}</td>
-      <td className="px-5 py-4">{link.claimedUserIds.length}</td>
-      <td className="px-5 py-4">{link.maxUses == null ? '∞' : link.maxUses}</td>
-      <td className="px-5 py-4">
-        {link.expiresTime == null ? 'Never' : fromNow(link.expiresTime)}
-      </td>
-    </tr>
-  )
-}
-
-function LinksTable(props: { links: Manalink[]; highlightedSlug?: string }) {
-  const { links, highlightedSlug } = props
-  return links.length == 0 ? (
-    <p>You don&apos;t currently have any outstanding manalinks.</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">Uses</th>
-            <th className="px-5 py-3.5">Max Uses</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>
-  )
-}