From 7474c0a0fd8c77b87caffc290e5526c2792361a8 Mon Sep 17 00:00:00 2001
From: ingawei <46611122+ingawei@users.noreply.github.com>
Date: Thu, 21 Jul 2022 18:22:17 -0700
Subject: [PATCH] Inga/manalinks pagination bug (#678)

* manalink pagination fix
* also fixed new manalink timing out bug
---
 web/components/manalink-card.tsx              | 106 +++++++++---------
 .../manalinks/create-links-button.tsx         |   2 +-
 web/pages/links.tsx                           |  55 ++++++---
 3 files changed, 94 insertions(+), 69 deletions(-)

diff --git a/web/components/manalink-card.tsx b/web/components/manalink-card.tsx
index b49e1621..51880f5d 100644
--- a/web/components/manalink-card.tsx
+++ b/web/components/manalink-card.tsx
@@ -27,10 +27,10 @@ export function ManalinkCard(props: {
   const { expiresTime, maxUses, uses, amount, message } = info
   return (
     <Col>
-      <div
+      <Col
         className={clsx(
           className,
-          'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
+          'min-h-20 group rounded-lg bg-gradient-to-br drop-shadow-sm transition-all',
           getManalinkGradient(info.amount)
         )}
       >
@@ -54,20 +54,18 @@ export function ManalinkCard(props: {
           )}
           src="/logo-white.svg"
         />
-        <Row className="rounded-b-xl bg-white p-4">
-          <Col>
-            <div
-              className={clsx(
-                'mb-1 text-xl text-indigo-500',
-                getManalinkAmountColor(amount)
-              )}
-            >
-              {formatMoney(amount)}
-            </div>
-            <div>{message}</div>
-          </Col>
+        <Row className="rounded-b-lg bg-white p-4">
+          <div
+            className={clsx(
+              'mb-1 text-xl text-indigo-500',
+              getManalinkAmountColor(amount)
+            )}
+          >
+            {formatMoney(amount)}
+          </div>
         </Row>
-      </div>
+      </Col>
+      <div className="text-md mt-2 mb-4 text-gray-500">{message}</div>
     </Col>
   )
 }
@@ -79,48 +77,48 @@ export function ManalinkCardFromView(props: {
 }) {
   const { className, link, highlightedSlug } = props
   const { message, amount, expiresTime, maxUses, claims } = link
-  const [details, setDetails] = useState(false)
+  const [showDetails, setShowDetails] = useState(false)
 
   return (
-    <Col
-      className={clsx(
-        'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
-        className,
-        link.slug === highlightedSlug ? 'animate-pulse' : ''
-      )}
-    >
-      <div
+    <Col>
+      <Col
         className={clsx(
-          'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
-          getManalinkGradient(link.amount)
+          'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
+          className,
+          link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
         )}
-        onClick={() => setDetails(!details)}
       >
-        {details && (
-          <ClaimsList
-            className="absolute h-full w-full bg-white opacity-90"
-            link={link}
+        <Col
+          className={clsx(
+            'relative rounded-t-lg bg-gradient-to-br transition-all',
+            getManalinkGradient(link.amount)
+          )}
+          onClick={() => setShowDetails(!showDetails)}
+        >
+          {showDetails && (
+            <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 select-none self-center py-3')}
+            src="/logo-white.svg"
           />
-        )}
-        <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 select-none self-center py-3')}
-          src="/logo-white.svg"
-        />
-      </div>
-      <Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
-        <Row className="relative gap-1">
+        <Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
           <div
             className={clsx(
               'my-auto mb-1 w-full',
@@ -138,10 +136,10 @@ export function ManalinkCardFromView(props: {
             copyPayload={getManalinkUrl(link.slug)}
           />
           <button
-            onClick={() => setDetails(!details)}
+            onClick={() => setShowDetails(!showDetails)}
             className={clsx(
               contractDetailsButtonClassName,
-              details
+              showDetails
                 ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
                 : ''
             )}
@@ -149,8 +147,10 @@ export function ManalinkCardFromView(props: {
             <DotsHorizontalIcon className="h-[24px] w-5" />
           </button>
         </Row>
-        <div className="my-2 text-xs md:text-sm">{message || '\n\n'}</div>
       </Col>
+      <div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">
+        {message || ''}
+      </div>
     </Col>
   )
 }
diff --git a/web/components/manalinks/create-links-button.tsx b/web/components/manalinks/create-links-button.tsx
index 25b51bb2..656aff29 100644
--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@@ -37,7 +37,6 @@ export function CreateLinksButton(props: {
                 message: newManalink.message,
               })
               setHighlightedSlug(slug || '')
-              setTimeout(() => setHighlightedSlug(''), 3700)
             }}
           />
         </Col>
@@ -165,6 +164,7 @@ function CreateManalinkForm(props: {
               <label className="label">Message</label>
               <Textarea
                 placeholder={defaultMessage}
+                maxLength={200}
                 className="input input-bordered resize-none"
                 autoFocus
                 value={newManalink.message}
diff --git a/web/pages/links.tsx b/web/pages/links.tsx
index 8a2e6767..0f91d70c 100644
--- a/web/pages/links.tsx
+++ b/web/pages/links.tsx
@@ -20,6 +20,7 @@ import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { ManalinkCardFromView } from 'web/components/manalink-card'
 import { Pagination } from 'web/components/pagination'
+import { Manalink } from 'common/manalink'
 dayjs.extend(customParseFormat)
 
 const LINKS_PER_PAGE = 24
@@ -39,10 +40,6 @@ 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
@@ -71,15 +68,43 @@ export default function LinkPage() {
           don&apos;t yet have a Manifold account.
         </p>
         <Subtitle text="Your Manalinks" />
+        <ManalinksDisplay
+          unclaimedLinks={unclaimedLinks}
+          highlightedSlug={highlightedSlug}
+        />
+      </Col>
+    </Page>
+  )
+}
+
+function ManalinksDisplay(props: {
+  unclaimedLinks: Manalink[]
+  highlightedSlug: string
+}) {
+  const { unclaimedLinks, highlightedSlug } = props
+  const [page, setPage] = useState(0)
+  const start = page * LINKS_PER_PAGE
+  const end = start + LINKS_PER_PAGE
+  const displayedLinks = unclaimedLinks.slice(start, end)
+
+  if (unclaimedLinks.length === 0) {
+    return (
+      <p className="text-gray-500">
+        You don't have any unclaimed manalinks. Send some more to spread the
+        wealth!
+      </p>
+    )
+  } else {
+    return (
+      <>
         <Col className="grid w-full gap-4 md:grid-cols-2">
-          {displayedLinks.map((link) => {
-            return (
-              <ManalinkCardFromView
-                link={link}
-                highlightedSlug={highlightedSlug}
-              />
-            )
-          })}
+          {displayedLinks.map((link) => (
+            <ManalinkCardFromView
+              key={link.slug + link.createdTime}
+              link={link}
+              highlightedSlug={highlightedSlug}
+            />
+          ))}
         </Col>
         <Pagination
           page={page}
@@ -89,9 +114,9 @@ export default function LinkPage() {
           className="mt-4 bg-transparent"
           scrollToTop
         />
-      </Col>
-    </Page>
-  )
+      </>
+    )
+  }
 }
 
 // TODO: either utilize this or get rid of it