[🐴] 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>

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
 

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>
 }

src/state/messages/index.tsx

@@ -2,13 +2,16 @@ import React from 'react'
 
 import {CurrentConvoIdProvider} from '#/state/messages/current-convo-id'
 import {MessagesEventBusProvider} from '#/state/messages/events'
+import {ListConvosProvider} from '#/state/queries/messages/list-converations'
 import {MessageDraftsProvider} from './message-drafts'
 
 export function MessagesProvider({children}: {children: React.ReactNode}) {
   return (
     <CurrentConvoIdProvider>
       <MessageDraftsProvider>
-        <MessagesEventBusProvider>{children}</MessagesEventBusProvider>
+        <MessagesEventBusProvider>
+          <ListConvosProvider>{children}</ListConvosProvider>
+        </MessagesEventBusProvider>
       </MessageDraftsProvider>
     </CurrentConvoIdProvider>
   )