Total up granted amount

web/pages/grants/GranteeCard.tsx

@@ -3,15 +3,11 @@ import Image from 'next/image'
 
 import { Grantee } from '.'
 import { Row } from 'web/components/layout/row'
-import { sumBy } from 'lodash'
+import { formatLargeNumber } from 'common/util/format'
-import { formatLargeNumber, formatMoney } from 'common/util/format'
 
 export default function GranteeCard(props: { grantee: Grantee }) {
   const { grantee } = props
-  const { slug, photo, preview } = grantee
+  const { slug, photo, preview, totalReceived } = grantee
-
-  // sumBy grantee.grantsReceived amount
-  const raised = sumBy(grantee.grantsReceived, (grant) => grant.amount)
 
   return (
     <Link href={`/grants/${slug}`} passHref>
@@ -31,11 +27,11 @@ export default function GranteeCard(props: { grantee: Grantee }) {
         </div>
         <div className="card-body">
           <div className="line-clamp-4 text-sm">{preview}</div>
-          {raised > 0 && (
+          {totalReceived > 0 && (
             <Row className="mt-4 flex-1 items-end justify-center gap-6 text-gray-900">
               <Row className="items-baseline gap-1">
                 <span className="text-3xl font-semibold">
-                  {formatUsd(raised)}
+                  {formatUsd(totalReceived)}
                 </span>
                 raised
               </Row>

web/pages/grants/index.tsx

@@ -1,5 +1,5 @@
 import { searchInAny } from 'common/util/parse'
-import { debounce } from 'lodash'
+import { debounce, sortBy } from 'lodash'
 import { useMemo, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Page } from 'web/components/page'
@@ -16,6 +16,7 @@ export type Grantee = {
   preview: string
   description: string
   grantsReceived: Grant[]
+  totalReceived: number
 }
 
 export type Grant = {
@@ -59,10 +60,12 @@ function grantsToGrantees(grantsList: Grant[]) {
         preview: grant.description,
         description: grant.description,
         grantsReceived: [],
+        totalReceived: 0,
       }
       grantees.push(grantee)
     }
     grantee.grantsReceived.push(grant)
+    grantee.totalReceived += grant.amount
   }
   console.log(grantees)
   return grantees
@@ -72,13 +75,12 @@ export default function Grants() {
   const [query, setQuery] = useState('')
   const debouncedQuery = debounce(setQuery, 50)
 
-  const filteredGrantees = useMemo(
+  const filteredGrantees = useMemo(() => {
-    () =>
+    const g = grantees.filter((grantee) =>
-      grantees.filter((grantee) =>
+      searchInAny(query, grantee.name, grantee.description)
-        searchInAny(query, grantee.name, grantee.description)
+    )
-      ),
+    return sortBy(g, 'totalReceived').reverse()
-    [query]
+  }, [query])
-  )
 
   return (
     <Page>