List all manalinks you've created

web/lib/firebase/manalinks.ts

@@ -1,8 +1,11 @@
-import { setDoc } from 'firebase/firestore'
+import { collection, orderBy, query, setDoc, where } from 'firebase/firestore'
 import { doc } from 'firebase/firestore'
 import { Manalink } from '../../../common/manalink'
 import { db } from './init'
 import { customAlphabet } from 'nanoid'
+import { Txn } from '../../../common/txn'
+import { listenForValues } from './utils'
+import { useEffect, useState } from 'react'
 
 export async function createManalink(data: {
   fromId: string
@@ -39,3 +42,31 @@ export async function createManalink(data: {
   const ref = doc(db, 'manalinks', slug)
   await setDoc(ref, manalink)
 }
+
+const manalinkCol = collection(db, 'manalinks')
+
+// TODO: This required an index, make sure to also set up in prod
+function listUserManalinks(fromId?: string) {
+  return query(
+    manalinkCol,
+    where('fromId', '==', fromId),
+    orderBy('createdTime', 'desc')
+  )
+}
+
+export function listenForUserManalinks(
+  fromId: string | undefined,
+  setLinks: (links: Manalink[]) => void
+) {
+  return listenForValues<Manalink>(listUserManalinks(fromId), setLinks)
+}
+
+export const useUserManalinks = (fromId: string) => {
+  const [links, setLinks] = useState<Manalink[]>([])
+
+  useEffect(() => {
+    return listenForUserManalinks(fromId, setLinks)
+  }, [fromId])
+
+  return links
+}

web/pages/send.tsx

@@ -1,14 +1,20 @@
 import { useState } from 'react'
+import { Manalink } from '../../common/manalink'
+import { formatMoney } from '../../common/util/format'
 import { Col } from '../components/layout/col'
+import { Spacer } from '../components/layout/spacer'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 import { Title } from '../components/title'
 import { useUser } from '../hooks/use-user'
-import { createManalink } from '../lib/firebase/manalinks'
+import { createManalink, useUserManalinks } from '../lib/firebase/manalinks'
+import { fromNow } from '../lib/util/time'
 
 export default function SendPage() {
   const user = useUser()
   const [amount, setAmount] = useState(100)
+  const links = useUserManalinks(user?.id ?? '')
+  console.log('links', user?.id, links)
 
   return (
     <Page>
@@ -40,7 +46,7 @@ export default function SendPage() {
                 fromId: user.id,
                 amount: amount,
                 expiresTime: Date.now() + 1000 * 60 * 60 * 24 * 7,
-                maxUses: Infinity,
+                maxUses: 1,
               })
             }}
           >
@@ -49,7 +55,115 @@ export default function SendPage() {
         )}
       </Col>
 
-      {/* TODO: show referral links via TailwindUI Table https://tailwindui.com/components/application-ui/lists/tables */}
+      <Spacer h={20} />
+
+      <LinksTable links={links} />
     </Page>
   )
 }
+
+function LinksTable(props: { links: Manalink[] }) {
+  const { links } = props
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="sm:flex sm:items-center">
+        <div className="sm:flex-auto">
+          <h1 className="text-xl font-semibold text-gray-900">Your links</h1>
+          <p className="mt-2 text-sm text-gray-700">
+            All mana links you've created so far~
+          </p>
+        </div>
+        <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+          <button
+            type="button"
+            className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
+          >
+            Create link
+          </button>
+        </div>
+      </div>
+      <div className="mt-8 flex flex-col">
+        <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th
+                      scope="col"
+                      className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
+                    >
+                      Amount
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
+                      Link
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
+                      Uses
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
+                      Max Uses
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    >
+                      Expires
+                    </th>
+                    <th
+                      scope="col"
+                      className="relative py-3.5 pl-3 pr-4 sm:pr-6"
+                    >
+                      <span className="sr-only">Edit</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 bg-white">
+                  {links.map((manalink) => (
+                    <tr key={manalink.slug}>
+                      <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                        {formatMoney(manalink.amount)}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {`http://manifold.markets/send/${manalink.slug}`}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {manalink.successUserIds.length}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {manalink.maxUses === Infinity ? '∞' : manalink.maxUses}
+                      </td>
+                      <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        {manalink.expiresTime === Infinity
+                          ? 'Never'
+                          : fromNow(manalink.expiresTime)}
+                      </td>
+                      <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                        <a
+                          href="#"
+                          className="text-indigo-600 hover:text-indigo-900"
+                        >
+                          Edit<span className="sr-only">, {manalink.slug}</span>
+                        </a>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}