[🐴] update convo list from message bus (#4189)

* update convo list from message bus

* don't increase unread count if you're the sender

* add refetch interval back

* Fix deleted message state copy

* only enable if `hasSession`

* Fix logged out handling

* increase refetch interval to 60s

* request 10s interval when message screen active

* use useAppState hook for convo resume/background

* Combine forces

* fix useFocusEffect logic

---------

Co-authored-by: Eric Bailey <git@esb.lol>

2 files changed, 13 insertions, 29 deletions

diff --git a/src/state/messages/convo/const.ts b/src/state/messages/convo/const.ts
index 17f206c7b..5491d066e 100644
--- a/src/state/messages/convo/const.ts
+++ b/src/state/messages/convo/const.ts
@@ -1,4 +1,5 @@
 export const ACTIVE_POLL_INTERVAL = 3e3
+export const MESSAGE_SCREEN_POLL_INTERVAL = 10e3
 export const BACKGROUND_POLL_INTERVAL = 60e3
 export const INACTIVE_TIMEOUT = 60e3 * 5
 
diff --git a/src/state/messages/convo/index.tsx b/src/state/messages/convo/index.tsx
index 79e61f88a..7ba337e45 100644
--- a/src/state/messages/convo/index.tsx
+++ b/src/state/messages/convo/index.tsx
@@ -1,8 +1,8 @@
 import React, {useContext, useState, useSyncExternalStore} from 'react'
-import {AppState} from 'react-native'
-import {useFocusEffect, useIsFocused} from '@react-navigation/native'
+import {useFocusEffect} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {useAppState} from '#/lib/hooks/useAppState'
 import {Convo} from '#/state/messages/convo/agent'
 import {
   ConvoParams,
@@ -58,7 +58,6 @@ export function ConvoProvider({
   convoId,
 }: Pick<ConvoParams, 'convoId'> & {children: React.ReactNode}) {
   const queryClient = useQueryClient()
-  const isScreenFocused = useIsFocused()
   const {getAgent} = useAgent()
   const events = useMessagesEventBus()
   const [convo] = useState(
@@ -72,16 +71,20 @@ export function ConvoProvider({
   const service = useSyncExternalStore(convo.subscribe, convo.getSnapshot)
   const {mutate: markAsRead} = useMarkAsReadMutation()
 
+  const appState = useAppState()
+  const isActive = appState === 'active'
   useFocusEffect(
     React.useCallback(() => {
-      convo.resume()
-      markAsRead({convoId})
-
-      return () => {
-        convo.background()
+      if (isActive) {
+        convo.resume()
         markAsRead({convoId})
+
+        return () => {
+          convo.background()
+          markAsRead({convoId})
+        }
       }
-    }, [convo, convoId, markAsRead]),
+    }, [isActive, convo, convoId, markAsRead]),
   )
 
   React.useEffect(() => {
@@ -101,25 +104,5 @@ export function ConvoProvider({
     })
   }, [convo, queryClient])
 
-  React.useEffect(() => {
-    const handleAppStateChange = (nextAppState: string) => {
-      if (isScreenFocused) {
-        if (nextAppState === 'active') {
-          convo.resume()
-        } else {
-          convo.background()
-        }
-
-        markAsRead({convoId})
-      }
-    }
-
-    const sub = AppState.addEventListener('change', handleAppStateChange)
-
-    return () => {
-      sub.remove()
-    }
-  }, [convoId, convo, isScreenFocused, markAsRead])
-
   return <ChatContext.Provider value={service}>{children}</ChatContext.Provider>
 }