Add more Live Event refreshing (#9745)

* Refresh on foreground

* Add back interval

(cherry picked from commit 3b7806963a)

src/analytics/metrics/client.ts

@@ -51,7 +51,7 @@ export class MetricsClient<M extends Record<string, any>> {
     }
     this.queue.push(e)
 
-    logger.info(`event: ${e.event as string}`, e)
+    logger.debug(`event: ${e.event as string}`, e)
 
     if (this.queue.length > this.maxBatchSize) {
       this.flush()

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,12 @@ 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,
+      refetchInterval: 1000 * 60 * 5, // refetch every 5 minutes
       async queryFn() {
         return fetchLiveEvents()
       },
@@ -48,6 +49,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)
-
+  useOnAppStateChange(setState)
-  useEffect(() => {
-    const sub = onAppStateChange(next => {
-      setState(next)
-    })
-    return () => sub.remove()
-  }, [])
-
   return state
 }