CPM simple feed (#116)

* Add minimal feed

* Display full cent amount for raised < $1

web/components/charity/charity-card.tsx

@@ -3,6 +3,7 @@ import _ from 'lodash'
 import Link from 'next/link'
 import { Charity } from '../../../common/charity'
 import { useCharityTxns } from '../../hooks/use-charity-txns'
+import { manaToUSD } from '../../pages/charity/[charitySlug]'
 import { Row } from '../layout/row'
 
 export function CharityCard(props: { charity: Charity }) {
@@ -31,7 +32,9 @@ export function CharityCard(props: { charity: Charity }) {
           {raised > 0 && (
             <Row className="text-primary mt-4 flex-1 items-end justify-center gap-2">
               <span className="text-3xl">
-                ${Math.floor((raised ?? 0) / 100)}
+                {raised < 100
+                  ? manaToUSD(raised)
+                  : '$' + Math.floor(raised / 100)}
               </span>
               <span>raised</span>
             </Row>

web/components/charity/feed-items.tsx

@@ -0,0 +1,34 @@
+import { Txn } from '../../../common/txn'
+import { Avatar } from '../avatar'
+import { useUserById } from '../../hooks/use-users'
+import { UserLink } from '../user-page'
+import { manaToUSD } from '../../pages/charity/[charitySlug]'
+import { RelativeTimestamp } from '../feed/feed-items'
+
+export function Donation(props: { txn: Txn }) {
+  const { txn } = props
+  const user = useUserById(txn.fromId)
+
+  if (!user) {
+    return <>Loading...</>
+  }
+
+  return (
+    <div className="mb-2 flow-root pr-2 md:pr-0">
+      <div className="relative flex items-center space-x-3">
+        <Avatar username={user.name} avatarUrl={user.avatarUrl} size="sm" />
+        <div className="min-w-0 flex-1">
+          <p className="mt-0.5 text-sm text-gray-500">
+            <UserLink
+              className="text-gray-500"
+              username={user.username}
+              name={user.name}
+            />{' '}
+            donated {manaToUSD(txn.amount)}
+            <RelativeTimestamp time={txn.createdTime} />
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

web/components/feed/feed-items.tsx

@@ -310,7 +310,7 @@ export function CommentInput(props: {
   )
 }
 
-function RelativeTimestamp(props: { time: number }) {
+export function RelativeTimestamp(props: { time: number }) {
   const { time } = props
   return (
     <DateTimeTooltip time={time}>

web/pages/charity/[charitySlug].tsx

@@ -17,8 +17,9 @@ import Custom404 from '../404'
 import { useCharityTxns } from '../../hooks/use-charity-txns'
 import { useWindowSize } from '../../hooks/use-window-size'
 import Confetti from 'react-confetti'
+import { Donation } from '../../components/charity/feed-items'
 
-const manaToUSD = (mana: number) =>
+export const manaToUSD = (mana: number) =>
   (mana / 100).toLocaleString('en-US', { style: 'currency', currency: 'USD' })
 
 export default function CharityPageWrapper() {
@@ -91,6 +92,9 @@ function CharityPage(props: { charity: Charity }) {
           </Row>
           <h2 className="mt-7 mb-2 text-xl text-indigo-700">About</h2>
           <Blurb text={description} />
+          {txns.map((txn) => (
+            <Donation key={txn.id} txn={txn} />
+          ))}
         </Col>
       </Col>
     </Page>
@@ -98,8 +102,7 @@ function CharityPage(props: { charity: Charity }) {
 }
 
 function Blurb({ text }: { text: string }) {
-  // Default to open for now (aka don't actually hide any text yet.)
-  const [open, setOpen] = useState(true)
+  const [open, setOpen] = useState(false)
 
   // Calculate whether the full blurb is already shown
   const ref = useRef<HTMLDivElement>(null)
@@ -125,7 +128,7 @@ function Blurb({ text }: { text: string }) {
         onClick={() => setOpen(!open)}
         className={clsx(
           'btn btn-link capitalize-none my-3 normal-case text-indigo-700',
-          hideExpander && 'hidden'
+          hideExpander && 'invisible'
         )}
       >
         {open ? 'Hide' : 'Read more'}