Persist feed items to memory, remove unused const

web/components/feed/feed-bets.tsx

@@ -110,9 +110,8 @@ export const SummarizeBets = memo(function SummarizeBets(props: {
   betsBySameUser: Bet[]
   avatarSize?: number | '2xs' | 'xs' | 'sm'
   className?: string
-  onReply?: (bet: Bet) => void
 }) {
-  const { contract, betsBySameUser, avatarSize, className, onReply } = props
+  const { contract, betsBySameUser, avatarSize, className } = props
   let bet = betsBySameUser[0]
   // for simplicity, we should just show buys of yes or buys of no
   if (betsBySameUser.length > 1) {

web/hooks/use-additional-feed-items.ts

@@ -2,10 +2,11 @@ import { User } from 'common/user'
 import { useRecentReplyChainCommentsOnContracts } from 'web/hooks/use-comments-supabase'
 import { DAY_MS } from 'common/util/time'
 import { orderBy, uniqBy } from 'lodash'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { Bet } from 'common/bet'
 import { getBetsOnContracts } from 'web/lib/supabase/bets'
 import { filterDefined } from 'common/util/array'
+import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state'
 
 export const useFeedComments = (
   user: User | null | undefined,
@@ -14,7 +15,8 @@ export const useFeedComments = (
   const cutoff = Date.now() - DAY_MS * 10
   const recentComments = useRecentReplyChainCommentsOnContracts(
     contractIds,
-    cutoff
+    cutoff,
+    user?.id ?? '_'
   )
   return filterDefined(
     recentComments
@@ -38,7 +40,10 @@ export const useFeedBets = (
   user: User | null | undefined,
   contractIds: string[]
 ) => {
-  const [bets, setBets] = useState<Bet[]>([])
+  const [bets, setBets] = usePersistentInMemoryState<Bet[]>(
+    [],
+    `recent-feed-bets-${user?.id ?? '_'}`
+  )
   useEffect(() => {
     if (contractIds.length > 0) {
       getBetsOnContracts(contractIds, {

web/hooks/use-comments-supabase.ts

@@ -8,6 +8,7 @@ import {
 } from 'web/lib/supabase/comments'
 import { db } from 'web/lib/supabase/db'
 import { uniqBy } from 'lodash'
+import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-state'
 
 export function useComments(contractId: string, limit: number) {
   const [comments, setComments] = useState<Json[]>([])
@@ -23,9 +24,13 @@ export function useComments(contractId: string, limit: number) {
 
 export function useRecentReplyChainCommentsOnContracts(
   contractIds: string[],
-  afterTime: number
+  afterTime: number,
+  userId: string
 ) {
-  const [comments, setComments] = useState<ContractComment[]>([])
+  const [comments, setComments] = usePersistentInMemoryState<ContractComment[]>(
+    [],
+    `recent-feed-replies-${userId}`
+  )
 
   useEffect(() => {
     if (contractIds.length > 0) {

web/hooks/use-persistent-in-memory-state.ts

@@ -3,7 +3,11 @@ import { useEffect } from 'react'
 import { useStateCheckEquality } from './use-state-check-equality'
 
 const store: { [key: string]: any } = {}
-
+function isFunction<T>(
+  value: T | ((prevState: T) => T)
+): value is (prevState: T) => T {
+  return typeof value === 'function'
+}
 export const usePersistentInMemoryState = <T>(initialValue: T, key: string) => {
   const [state, setState] = useStateCheckEquality<T>(
     safeJsonParse(store[key]) ?? initialValue
@@ -14,9 +18,12 @@ export const usePersistentInMemoryState = <T>(initialValue: T, key: string) => {
     setState(storedValue as T)
   }, [key])
 
-  const saveState = (newState: T) => {
-    setState(newState)
-    store[key] = JSON.stringify(newState)
+  const saveState = (newState: T | ((prevState: T) => T)) => {
+    setState((prevState) => {
+      const updatedState = isFunction(newState) ? newState(prevState) : newState
+      store[key] = JSON.stringify(updatedState)
+      return updatedState
+    })
   }
 
   return [state, saveState] as const