From 4df09702e5d46d5c980c29615da5a6201ada4431 Mon Sep 17 00:00:00 2001 From: Austin Chen Date: Thu, 5 May 2022 11:33:47 -0400 Subject: [PATCH] List all manalinks you've created --- web/lib/firebase/manalinks.ts | 33 +++++++++- web/pages/send.tsx | 120 +++++++++++++++++++++++++++++++++- 2 files changed, 149 insertions(+), 4 deletions(-) diff --git a/web/lib/firebase/manalinks.ts b/web/lib/firebase/manalinks.ts index 638dc6aa..8cd303f4 100644 --- a/web/lib/firebase/manalinks.ts +++ b/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(listUserManalinks(fromId), setLinks) +} + +export const useUserManalinks = (fromId: string) => { + const [links, setLinks] = useState([]) + + useEffect(() => { + return listenForUserManalinks(fromId, setLinks) + }, [fromId]) + + return links +} diff --git a/web/pages/send.tsx b/web/pages/send.tsx index fb1b19ba..28d5cf08 100644 --- a/web/pages/send.tsx +++ b/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 ( @@ -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() { )} - {/* TODO: show referral links via TailwindUI Table https://tailwindui.com/components/application-ui/lists/tables */} + + + ) } + +function LinksTable(props: { links: Manalink[] }) { + const { links } = props + + return ( +
+
+
+

Your links

+

+ All mana links you've created so far~ +

+
+
+ +
+
+
+
+
+
+ + + + + + + + + + + + + {links.map((manalink) => ( + + + + + + + + + ))} + +
+ Amount + + Link + + Uses + + Max Uses + + Expires + + Edit +
+ {formatMoney(manalink.amount)} + + {`http://manifold.markets/send/${manalink.slug}`} + + {manalink.successUserIds.length} + + {manalink.maxUses === Infinity ? '∞' : manalink.maxUses} + + {manalink.expiresTime === Infinity + ? 'Never' + : fromNow(manalink.expiresTime)} + + + Edit, {manalink.slug} + +
+
+
+
+
+
+ ) +}