Fix home error after new contracts

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<Contract[] | undefined>(
     tags && tags.length === 0 ? [] : undefined

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])
   )