Fix problem with useUpdatedContracts.

web/hooks/use-algo-feed.ts

@@ -1,12 +1,11 @@
 import _ from 'lodash'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { Bet } from '../../common/bet'
 import { Comment } from '../../common/comment'
 import { Contract } from '../../common/contract'
 import { User } from '../../common/user'
 import { logInterpolation } from '../../common/util/math'
 import { getRecommendedContracts } from '../../common/recommended-contracts'
-import { useUpdatedContracts } from './use-contracts'
 import { useSeenContracts } from './use-seen-contracts'
 import { useGetUserBetContractIds, useUserBetContracts } from './use-user-bets'
 
@@ -18,6 +17,10 @@ export const useAlgoFeed = (
   recentBets: Bet[] | undefined,
   recentComments: Comment[] | undefined
 ) => {
+  const initialContracts = useMemo(() => contracts, [!!contracts])
+  const initialBets = useMemo(() => recentBets, [!!recentBets])
+  const initialComments = useMemo(() => recentComments, [!!recentComments])
+
   const yourBetContractIds = useGetUserBetContractIds(user?.id)
   // Update user bet contracts in local storage.
   useUserBetContracts(user?.id)
@@ -27,24 +30,28 @@ export const useAlgoFeed = (
   const [algoFeed, setAlgoFeed] = useState<Contract[]>([])
 
   useEffect(() => {
-    if (contracts && recentBets && recentComments) {
-      const eligibleContracts = contracts.filter(
+    if (initialContracts && initialBets && initialComments) {
+      const eligibleContracts = initialContracts.filter(
         (c) => !c.isResolved && (c.closeTime ?? Infinity) > Date.now()
       )
-
-      setAlgoFeed(
-        getAlgoFeed(
-          eligibleContracts,
-          recentBets,
-          recentComments,
-          yourBetContractIds,
-          seenContracts
-        )
+      const contracts = getAlgoFeed(
+        eligibleContracts,
+        initialBets,
+        initialComments,
+        yourBetContractIds,
+        seenContracts
       )
+      setAlgoFeed(contracts)
     }
-  }, [contracts, recentBets, recentComments, seenContracts, yourBetContractIds])
+  }, [
+    initialBets,
+    initialComments,
+    initialContracts,
+    seenContracts,
+    yourBetContractIds,
+  ])
 
-  return useUpdatedContracts(algoFeed)
+  return algoFeed
 }
 
 const getAlgoFeed = (

web/hooks/use-bets.ts

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
 import { Contract } from '../../common/contract'
 import {
   Bet,
-  getRecentBets,
   listenForBets,
   listenForRecentBets,
   withoutAnteBets,
@@ -37,11 +36,3 @@ export const useRecentBets = () => {
   useEffect(() => listenForRecentBets(setRecentBets), [])
   return recentBets
 }
-
-export const useGetRecentBets = () => {
-  const [recentBets, setRecentBets] = useState<Bet[] | undefined>()
-  useEffect(() => {
-    getRecentBets().then(setRecentBets)
-  }, [])
-  return recentBets
-}

web/hooks/use-comments.ts

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import {
   Comment,
-  getRecentComments,
   listenForComments,
   listenForRecentComments,
 } from '../lib/firebase/comments'
@@ -21,11 +20,3 @@ export const useRecentComments = () => {
   useEffect(() => listenForRecentComments(setRecentComments), [])
   return recentComments
 }
-
-export const useGetRecentComments = () => {
-  const [recentComments, setRecentComments] = useState<Comment[] | undefined>()
-  useEffect(() => {
-    getRecentComments().then(setRecentComments)
-  }, [])
-  return recentComments
-}

web/hooks/use-contracts.ts

@@ -2,7 +2,6 @@ import _ from 'lodash'
 import { useEffect, useState } from 'react'
 import {
   Contract,
-  getActiveContracts,
   listenForActiveContracts,
   listenForContracts,
   listenForHotContracts,
@@ -30,16 +29,6 @@ export const useActiveContracts = () => {
   return contracts
 }
 
-export const useGetActiveContracts = () => {
-  const [contracts, setContracts] = useState<Contract[] | undefined>()
-
-  useEffect(() => {
-    getActiveContracts().then(setContracts)
-  }, [])
-
-  return contracts
-}
-
 export const useInactiveContracts = () => {
   const [contracts, setContracts] = useState<Contract[] | undefined>()
 
@@ -50,19 +39,6 @@ export const useInactiveContracts = () => {
   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

@@ -9,27 +9,24 @@ import { Spacer } from '../components/layout/spacer'
 import { Col } from '../components/layout/col'
 import { useUser } from '../hooks/use-user'
 import { LoadingIndicator } from '../components/loading-indicator'
-import { useGetRecentBets, useRecentBets } from '../hooks/use-bets'
-import { useGetActiveContracts } from '../hooks/use-contracts'
-import { useGetRecentComments, useRecentComments } from '../hooks/use-comments'
+import { useRecentBets } from '../hooks/use-bets'
+import { useActiveContracts } from '../hooks/use-contracts'
+import { useRecentComments } from '../hooks/use-comments'
 import { useAlgoFeed } from '../hooks/use-algo-feed'
 
 const Home = () => {
   const user = useUser()
 
-  const initialContracts = useGetActiveContracts()
+  const contracts = useActiveContracts()
+  const contractsDict = _.keyBy(contracts, 'id')
 
-  const initialRecentBets = useGetRecentBets()
-  const recentBets = useRecentBets() ?? initialRecentBets
+  const recentBets = useRecentBets()
+  const recentComments = useRecentComments()
 
-  const initialRecentComments = useGetRecentComments()
-  const recentComments = useRecentComments() ?? initialRecentComments
+  const feedContracts = useAlgoFeed(user, contracts, recentBets, recentComments)
 
-  const feedContracts = useAlgoFeed(
-    user,
-    initialContracts,
-    initialRecentBets,
-    initialRecentComments
+  const updatedContracts = feedContracts.map(
+    (contract) => contractsDict[contract.id] ?? contract
   )
 
   if (user === null) {
@@ -38,9 +35,9 @@ const Home = () => {
   }
 
   const activityContent =
-    initialContracts && recentBets && recentComments ? (
+    contracts && recentBets && recentComments ? (
       <ActivityFeed
-        contracts={feedContracts}
+        contracts={updatedContracts}
         recentBets={recentBets}
         recentComments={recentComments}
         mode="only-recent"