From db695875c44a18c3f551b5bfaed95154ed015a32 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Mon, 2 May 2022 10:55:40 -0700
Subject: [PATCH] CPM: sort charities by amount raised (#117)

* Sort charities by amount raised (after Featured)

* Sort donations chronologically

* refactor charities query to remove parens
---
 web/hooks/use-charity-txns.ts       | 15 ++++++++++++++-
 web/lib/firebase/txns.ts            |  6 ++++++
 web/pages/charity/[charitySlug].tsx |  3 ++-
 web/pages/charity/index.tsx         | 29 +++++++++++++++++++++--------
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/web/hooks/use-charity-txns.ts b/web/hooks/use-charity-txns.ts
index 5636e720..c89e0b91 100644
--- a/web/hooks/use-charity-txns.ts
+++ b/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
+}
diff --git a/web/lib/firebase/txns.ts b/web/lib/firebase/txns.ts
index 8f9a6843..9f2b1f3b 100644
--- a/web/lib/firebase/txns.ts
+++ b/web/lib/firebase/txns.ts
@@ -21,3 +21,9 @@ export function listenForCharityTxns(
 ) {
   return listenForValues<Txn>(getCharityQuery(charityId), setTxns)
 }
+
+const charitiesQuery = query(txnCollection, where('toType', '==', 'CHARITY'))
+
+export function listenForAllCharityTxns(setTxns: (txns: Txn[]) => void) {
+  return listenForValues<Txn>(charitiesQuery, setTxns)
+}
diff --git a/web/pages/charity/[charitySlug].tsx b/web/pages/charity/[charitySlug].tsx
index f7310a2f..8295c156 100644
--- a/web/pages/charity/[charitySlug].tsx
+++ b/web/pages/charity/[charitySlug].tsx
@@ -42,6 +42,7 @@ function CharityPage(props: { charity: Charity }) {
   const user = useUser()
 
   const txns = useCharityTxns(charity.id)
+  const newToOld = _.sortBy(txns, (txn) => -txn.createdTime)
   const totalRaised = _.sumBy(txns, (txn) => txn.amount)
   const fromYou = _.sumBy(
     txns.filter((txn) => txn.fromId === user?.id),
@@ -92,7 +93,7 @@ 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) => (
+          {newToOld.map((txn) => (
             <Donation key={txn.id} txn={txn} />
           ))}
         </Col>
diff --git a/web/pages/charity/index.tsx b/web/pages/charity/index.tsx
index 5a9c77e9..6b51f7d6 100644
--- a/web/pages/charity/index.tsx
+++ b/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'
-
-const charities = charityList.map((charity) => ({
-  ...charity,
-  raised: 4001,
-}))
+import { useAllCharityTxns } from '../../hooks/use-charity-txns'
 
 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