diff --git a/web/hooks/use-fold.ts b/web/hooks/use-fold.ts new file mode 100644 index 00000000..2484c213 --- /dev/null +++ b/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() + + useEffect(() => { + return listenForFold(foldId, setFold) + }, [foldId]) + + return fold +} diff --git a/web/lib/firebase/folds.ts b/web/lib/firebase/folds.ts index 2e64b1d8..a339b340 100644 --- a/web/lib/firebase/folds.ts +++ b/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) +} diff --git a/web/pages/fold/[foldSlug]/edit.tsx b/web/pages/fold/[foldSlug]/edit.tsx index 2a093dfd..c89992ed 100644 --- a/web/pages/fold/[foldSlug]/edit.tsx +++ b/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 = diff --git a/web/pages/fold/[foldSlug]/index.tsx b/web/pages/fold/[foldSlug]/index.tsx index 5379dddf..002ad151 100644 --- a/web/pages/fold/[foldSlug]/index.tsx +++ b/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() diff --git a/web/pages/fold/[foldSlug]/leaderboards.tsx b/web/pages/fold/[foldSlug]/leaderboards.tsx index c65ff980..ea89a5ed 100644 --- a/web/pages/fold/[foldSlug]/leaderboards.tsx +++ b/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 } }