add focus refresh + polling (#3846)

3 files changed, 23 insertions, 2 deletions

diff --git a/src/components/hooks/useRefreshOnFocus.ts b/src/components/hooks/useRefreshOnFocus.ts
new file mode 100644
index 000000000..6bf7ac8b1
--- /dev/null
+++ b/src/components/hooks/useRefreshOnFocus.ts
@@ -0,0 +1,17 @@
+import {useCallback, useRef} from 'react'
+import {useFocusEffect} from '@react-navigation/native'
+
+export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
+  const firstTimeRef = useRef(true)
+
+  useFocusEffect(
+    useCallback(() => {
+      if (firstTimeRef.current) {
+        firstTimeRef.current = false
+        return
+      }
+
+      refetch()
+    }, [refetch]),
+  )
+}
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx
index d97ddc699..25c1a39d5 100644
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/List/index.tsx
@@ -27,6 +27,7 @@ import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {NewChat} from '#/components/dms/NewChat'
 import * as TextField from '#/components/forms/TextField'
+import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
 import {Link} from '#/components/Link'
@@ -75,7 +76,9 @@ export function MessagesScreen({navigation}: Props) {
     fetchNextPage,
     error,
     refetch,
-  } = useListConvos()
+  } = useListConvos({refetchInterval: 15_000})
+
+  useRefreshOnFocus(refetch)
 
   const isError = !!error
 
diff --git a/src/state/queries/messages/list-converations.ts b/src/state/queries/messages/list-converations.ts
index 19f2674bd..1e4ecb6d7 100644
--- a/src/state/queries/messages/list-converations.ts
+++ b/src/state/queries/messages/list-converations.ts
@@ -7,7 +7,7 @@ import {useHeaders} from './temp-headers'
 export const RQKEY = ['convo-list']
 type RQPageParam = string | undefined
 
-export function useListConvos() {
+export function useListConvos({refetchInterval}: {refetchInterval: number}) {
   const headers = useHeaders()
   const {serviceUrl} = useDmServiceUrlStorage()
 
@@ -24,5 +24,6 @@ export function useListConvos() {
     },
     initialPageParam: undefined as RQPageParam,
     getNextPageParam: lastPage => lastPage.cursor,
+    refetchInterval,
   })
 }