Pre-load charity order to prevent "jump" (#122)

web/hooks/use-charity-txns.ts

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

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import { Txn } from '../../../common/txn'
 
 import { db } from './init'
-import { listenForValues } from './utils'
+import { getValues, listenForValues } from './utils'
 
 const txnCollection = collection(db, 'txns')
 
@@ -24,6 +24,6 @@ export function listenForCharityTxns(
 
 const charitiesQuery = query(txnCollection, where('toType', '==', 'CHARITY'))
 
-export function listenForAllCharityTxns(setTxns: (txns: Txn[]) => void) {
+export function getAllCharityTxns() {
-  return listenForValues<Txn>(charitiesQuery, setTxns)
+  return getValues<Txn>(charitiesQuery)
 }

web/pages/charity/index.tsx

@@ -1,37 +1,49 @@
 import _ from 'lodash'
 import { useState, useMemo } from 'react'
-import { charities } from '../../../common/charity'
+import { charities, Charity as CharityType } 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 { SiteLink } from '../../components/site-link'
 import { Title } from '../../components/title'
-import { useAllCharityTxns } from '../../hooks/use-charity-txns'
+import { getAllCharityTxns } from '../../lib/firebase/txns'
 
-export default function Charity() {
+export async function getStaticProps() {
-  const allCharityTxn = useAllCharityTxns()
+  const txns = await getAllCharityTxns()
-  const totals = _.mapValues(_.groupBy(allCharityTxn, 'toId'), (txns) =>
+  const totals = _.mapValues(_.groupBy(txns, '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],
   ])
 
+  return {
+    props: {
+      totalRaised,
+      charities: sortedCharities,
+    },
+    revalidate: 60,
+  }
+}
+
+export default function Charity(props: {
+  totalRaised: number
+  charities: CharityType[]
+}) {
+  const { totalRaised, charities } = props
+
   const [query, setQuery] = useState('')
   const debouncedQuery = _.debounce(setQuery, 50)
 
   const filterCharities = useMemo(
     () =>
-      sortedCharities.filter((charity) =>
+      charities.filter((charity) =>
         charity.name.toLowerCase().includes(query.toLowerCase())
       ),
-    [query, sortedCharities]
+    [query]
   )
 
   return (