Refresh on foreground

src/features/liveEvents/context.tsx

@@ -1,6 +1,7 @@
 import {createContext, useContext, useMemo} from 'react'
 import {QueryClient, useQuery} from '@tanstack/react-query'
 
+import {useOnAppStateChange} from '#/lib/appState'
 import {useIsBskyTeam} from '#/lib/hooks/useIsBskyTeam'
 import {
   convertBskyAppUrlIfNeeded,
@@ -35,12 +36,11 @@ const Context = createContext<LiveEventsWorkerResponse>(DEFAULT_LIVE_EVENTS)
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const [isDevMode] = useDevMode()
   const isBskyTeam = useIsBskyTeam()
-  const {data} = useQuery(
+  const {data, refetch} = useQuery(
     {
       // keep this, prefectching handles initial load
       staleTime: 1000 * 15,
       queryKey: liveEventsQueryKey,
-      refetchInterval: 1000 * 60 * 5,
       async queryFn() {
         return fetchLiveEvents()
       },
@@ -48,6 +48,10 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     qc,
   )
 
+  useOnAppStateChange(state => {
+    if (state === 'active') refetch()
+  })
+
   const ctx = useMemo(() => {
     if (!data) return DEFAULT_LIVE_EVENTS
     const feeds = data.feeds.filter(f => {

src/lib/appState.ts

@@ -12,15 +12,15 @@ export function onAppStateChange(cb: (state: AppStateStatus) => void) {
   })
 }
 
+export function useOnAppStateChange(cb: (state: AppStateStatus) => void) {
+  useEffect(() => {
+    const sub = onAppStateChange(next => cb(next))
+    return () => sub.remove()
+  }, [cb])
+}
+
 export function useAppState() {
   const [state, setState] = useState(AppState.currentState)
-
-  useEffect(() => {
-    const sub = onAppStateChange(next => {
-      setState(next)
-    })
-    return () => sub.remove()
-  }, [])
-
+  useOnAppStateChange(setState)
   return state
 }