Sort charities by amount raised (after Featured)

fixup

web/hooks/use-charity-txns.ts

@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react'
 import { Txn } from '../../common/txn'
-import { listenForCharityTxns } from '../lib/firebase/txns'
+import {
+  listenForAllCharityTxns,
+  listenForCharityTxns,
+} from '../lib/firebase/txns'
 
 export const useCharityTxns = (charityId: string) => {
   const [txns, setTxns] = useState<Txn[]>([])
@@ -11,3 +14,13 @@ export const useCharityTxns = (charityId: string) => {
 
   return txns
 }
+
+export const useAllCharityTxns = () => {
+  const [txns, setTxns] = useState<Txn[]>([])
+
+  useEffect(() => {
+    return listenForAllCharityTxns(setTxns)
+  }, [])
+
+  return txns
+}

web/lib/firebase/txns.ts

@@ -21,3 +21,10 @@ export function listenForCharityTxns(
 ) {
   return listenForValues<Txn>(getCharityQuery(charityId), setTxns)
 }
+
+const getCharitiesQuery = () =>
+  query(txnCollection, where('toType', '==', 'CHARITY'))
+
+export function listenForAllCharityTxns(setTxns: (txns: Txn[]) => void) {
+  return listenForValues<Txn>(getCharitiesQuery(), setTxns)
+}

web/pages/charity/index.tsx

@@ -1,26 +1,36 @@
 import _ from 'lodash'
 import { useState, useMemo } from 'react'
-import { charities as charityList } from '../../../common/charity'
+import { charities } from '../../../common/charity'
 import { CharityCard } from '../../components/charity/charity-card'
 import { Col } from '../../components/layout/col'
+import { Spacer } from '../../components/layout/spacer'
 import { Page } from '../../components/page'
 import { Title } from '../../components/title'
-
+import { useAllCharityTxns } from '../../hooks/use-charity-txns'
-const charities = charityList.map((charity) => ({
-  ...charity,
-  raised: 4001,
-}))
 
 export default function Charity() {
+  const allCharityTxn = useAllCharityTxns()
+  const totals = _.mapValues(_.groupBy(allCharityTxn, 'toId'), (txns) =>
+    _.sumBy(txns, (txn) => txn.amount)
+  )
+  const totalRaised = _.sum(Object.values(totals))
+
+  // TODO: show loading state while totals are calculating
+
+  const sortedCharities = _.sortBy(charities, [
+    (charity) => (charity.tags?.includes('Featured') ? 0 : 1),
+    (charity) => -totals[charity.id],
+  ])
+
   const [query, setQuery] = useState('')
   const debouncedQuery = _.debounce(setQuery, 50)
 
   const filterCharities = useMemo(
     () =>
-      charities.filter((charity) =>
+      sortedCharities.filter((charity) =>
         charity.name.toLowerCase().includes(query.toLowerCase())
       ),
-    [query]
+    [query, sortedCharities]
   )
 
   return (
@@ -31,6 +41,9 @@ export default function Charity() {
           <div className="mb-6 text-gray-500">
             Donate your winnings to charity! Through the month of May, every M$
             100 you contribute turns into $1 USD sent to your chosen charity.
+            <Spacer h={5} />
+            Together we've donated over ${Math.floor(totalRaised / 100)} USD so
+            far!
           </div>
 
           <input