diff --git a/web/hooks/use-contracts.ts b/web/hooks/use-contracts.ts index ed25783d..41137f33 100644 --- a/web/hooks/use-contracts.ts +++ b/web/hooks/use-contracts.ts @@ -17,6 +17,19 @@ export const useContracts = () => { return contracts } +export const useUpdatedContracts = (initialContracts: Contract[]) => { + const [contracts, setContracts] = useState(initialContracts) + + useEffect(() => { + return listenForContracts((newContracts) => { + const contractMap = _.fromPairs(newContracts.map((c) => [c.id, c])) + setContracts(initialContracts.map((c) => contractMap[c.id])) + }) + }, [initialContracts]) + + return contracts +} + export const useTaggedContracts = (tags: string[] | undefined) => { const [contracts, setContracts] = useState( tags && tags.length === 0 ? [] : undefined diff --git a/web/pages/home.tsx b/web/pages/home.tsx index 56cdc8a9..f80c32b1 100644 --- a/web/pages/home.tsx +++ b/web/pages/home.tsx @@ -11,7 +11,7 @@ import FeedCreate from '../components/feed-create' import { Spacer } from '../components/layout/spacer' import { Col } from '../components/layout/col' import { useUser } from '../hooks/use-user' -import { useContracts } from '../hooks/use-contracts' +import { useUpdatedContracts } from '../hooks/use-contracts' import { listAllFolds } from '../lib/firebase/folds' import { Fold } from '../../common/fold' import { filterDefined } from '../../common/util/array' @@ -56,7 +56,7 @@ const Home = (props: { const user = useUser() - const contracts = useContracts() ?? props.contracts + const contracts = useUpdatedContracts(props.contracts) const contractIdToIndex = _.fromPairs( contracts.map((contract, index) => [contract.id, index]) )