Use fold hook

web/hooks/use-fold.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+import { Fold } from '../../common/fold'
+import { listenForFold } from '../lib/firebase/folds'
+
+export const useFold = (foldId: string) => {
+  const [fold, setFold] = useState<Fold | null | undefined>()
+
+  useEffect(() => {
+    return listenForFold(foldId, setFold)
+  }, [foldId])
+
+  return fold
+}

web/lib/firebase/folds.ts

@@ -2,7 +2,7 @@ import { collection, doc, query, updateDoc, where } from 'firebase/firestore'
 import { Fold } from '../../../common/fold'
 import { Contract, contractCollection } from './contracts'
 import { db } from './init'
-import { getValues } from './utils'
+import { getValues, listenForValue } from './utils'
 
 const foldCollection = collection(db, 'folds')
 
@@ -72,3 +72,10 @@ export async function getFoldContracts(fold: Fold) {
 
   return [...approvedContracts, ...includedContracts]
 }
+
+export function listenForFold(
+  foldId: string,
+  setFold: (fold: Fold | null) => void
+) {
+  return listenForValue(doc(foldCollection, foldId), setFold)
+}

web/pages/fold/[foldSlug]/edit.tsx

@@ -16,6 +16,7 @@ import {
 import Custom404 from '../../404'
 import { SiteLink } from '../../../components/site-link'
 import { toCamelCase } from '../../../lib/util/format'
+import { useFold } from '../../../hooks/use-fold'
 
 export async function getStaticProps(props: { params: { foldSlug: string } }) {
   const { foldSlug } = props.params
@@ -34,8 +35,7 @@ export async function getStaticPaths() {
 }
 
 export default function EditFoldPage(props: { fold: Fold | null }) {
-  const { fold } = props
-
+  const fold = useFold(props.fold?.id ?? '') ?? props.fold
   const [name, setName] = useState(fold?.name ?? '')
 
   const initialOtherTags =

web/pages/fold/[foldSlug]/index.tsx

@@ -20,6 +20,7 @@ import { Spacer } from '../../../components/layout/spacer'
 import { Col } from '../../../components/layout/col'
 import { SiteLink } from '../../../components/site-link'
 import { useUser } from '../../../hooks/use-user'
+import { useFold } from '../../../hooks/use-fold'
 
 export async function getStaticProps(props: { params: { foldSlug: string } }) {
   const { foldSlug } = props.params
@@ -72,13 +73,13 @@ export default function FoldPage(props: {
   activeContractComments: Comment[][]
 }) {
   const {
-    fold,
     curator,
     activeContracts,
     activeContractBets,
     activeContractComments,
   } = props
 
+  const fold = useFold(props.fold.id) ?? props.fold
   const { tags, curatorId } = fold
 
   const user = useUser()

web/pages/fold/[foldSlug]/leaderboards.tsx

@@ -35,7 +35,7 @@ export async function getStaticProps(props: { params: { foldSlug: string } }) {
   return {
     props: { fold, topTraders, topTraderScores, topCreators, topCreatorScores },
 
-    revalidate: 15 * 60, // regenerate after 15 minutes
+    revalidate: 60, // regenerate after 60 seconds
   }
 }