Listen for contract updates to feed.

web/hooks/use-algo-feed.ts

@@ -7,15 +7,16 @@ import { useTimeSinceFirstRender } from './use-time-since-first-render'
 import { trackLatency } from '../lib/firebase/tracking'
 import { User } from '../../common/user'
 import { getUserFeed } from '../lib/firebase/users'
+import { useUpdatedContracts } from './use-contracts'
+
+type feed = {
+  contract: Contract
+  recentBets: Bet[]
+  recentComments: Comment[]
+}[]
 
 export const useAlgoFeed = (user: User | null | undefined) => {
-  const [feed, setFeed] = useState<
-    {
-      contract: Contract
-      recentBets: Bet[]
-      recentComments: Comment[]
-    }[]
-  >()
+  const [feed, setFeed] = useState<feed>()
 
   const getTime = useTimeSinceFirstRender()
 
@@ -28,7 +29,18 @@ export const useAlgoFeed = (user: User | null | undefined) => {
         console.log('feed load time', getTime())
       })
     }
-  }, [user, getTime])
+  }, [user?.id])
 
-  return feed
+  return useUpdateFeed(feed)
+}
+
+const useUpdateFeed = (feed: feed | undefined) => {
+  const contracts = useUpdatedContracts(feed?.map((item) => item.contract))
+
+  return feed && contracts
+    ? feed.map(({ contract, ...other }, i) => ({
+        ...other,
+        contract: contracts[i],
+      }))
+    : undefined
 }

web/hooks/use-contracts.ts

@@ -1,8 +1,9 @@
 import _ from 'lodash'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   Contract,
   listenForActiveContracts,
+  listenForContract,
   listenForContracts,
   listenForHotContracts,
   listenForInactiveContracts,
@@ -71,3 +72,34 @@ export const useHotContracts = () => {
 
   return hotContracts
 }
+
+export const useUpdatedContracts = (contracts: Contract[] | undefined) => {
+  const [__, triggerUpdate] = useState(0)
+  const contractDict = useRef<{ [id: string]: Contract }>({})
+
+  useEffect(() => {
+    if (contracts === undefined) return
+
+    contractDict.current = _.fromPairs(contracts.map((c) => [c.id, c]))
+
+    const disposes = contracts.map((contract) => {
+      const { id } = contract
+
+      return listenForContract(id, (contract) => {
+        const curr = contractDict.current[id]
+        if (!_.isEqual(curr, contract)) {
+          contractDict.current[id] = contract as Contract
+          triggerUpdate((n) => n + 1)
+        }
+      })
+    })
+
+    return () => {
+      disposes.forEach((dispose) => dispose())
+    }
+  }, [!!contracts])
+
+  return contracts && Object.keys(contractDict.current).length > 0
+    ? contracts.map((c) => contractDict.current[c.id])
+    : undefined
+}