feature/react-native-roomlist-subscriptions-improvement

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.3.0
+
+### Minor Changes
+
+- Implements native version for `useRoomListSubscription` hook to subscribe and unsubscribe based on the application's state — e.g., when the app goes inactive and then returns to the foreground
+
 ## 1.2.9
 
 ### Patch Changes

packages/components/modules/messages/common/graphql/subscriptions/useRoomListSubscription.tsx

@@ -38,6 +38,58 @@ export const RoomListSubscriptionQuery = graphql`
   }
 `
 
+export const wasRemovedFromChatRoom = (
+  data: useRoomListSubscription$data | null | undefined,
+  profileId: string,
+) =>
+  data?.chatRoomOnRoomUpdate?.removedParticipants?.some((node) => node?.profile?.id === profileId)
+
+export const getRoomListSubscriptionConfig = (
+  profileId: string,
+  connections: string[],
+  selectedRoom: string | undefined,
+  resetChatRoom: VoidFunction,
+  onRemoval?: VoidFunction | undefined,
+) => ({
+  subscription: RoomListSubscriptionQuery,
+  onError: console.error,
+  variables: { profileId, connections },
+  updater: (
+    store: RecordSourceSelectorProxy<unknown>,
+    data: useRoomListSubscription$data | null | undefined,
+  ) => {
+    const roomId = data?.chatRoomOnRoomUpdate?.room?.node?.id
+    if (!roomId) return
+    if (wasRemovedFromChatRoom(data, profileId)) {
+      getChatRoomConnections(store, profileId).forEach((connectionRecord) =>
+        ConnectionHandler.deleteNode(connectionRecord, roomId),
+      )
+    } else {
+      const isArchived = data?.chatRoomOnRoomUpdate?.room?.node?.isArchived
+      getChatRoomConnections(
+        store,
+        profileId,
+        ({ q, archived }) => q === '' && archived === isArchived,
+      ).forEach((connectionRecord) => {
+        ConnectionHandler.deleteNode(connectionRecord, roomId)
+        const serverEdge = store.getRootField('chatRoomOnRoomUpdate')?.getLinkedRecord('room')
+        const edge = ConnectionHandler.buildConnectionEdge(store, connectionRecord, serverEdge)
+        if (edge) {
+          ConnectionHandler.insertEdgeBefore(connectionRecord, edge)
+        }
+      })
+    }
+  },
+  onNext: (data: useRoomListSubscription$data | null | undefined) => {
+    if (wasRemovedFromChatRoom(data, profileId)) {
+      if (selectedRoom && data?.chatRoomOnRoomUpdate?.room?.node?.id === selectedRoom) {
+        resetChatRoom()
+      }
+      onRemoval?.()
+    }
+  },
+})
+
 export const useRoomListSubscription = ({
   connections,
   profileId,
@@ -50,52 +102,11 @@ export const useRoomListSubscription = ({
 }) => {
   const { id: selectedRoom, resetChatRoom } = useChatRoom()
 
-  const config = useMemo(() => {
-    const wasRemovedFromChatRoom = (data: useRoomListSubscription$data | null | undefined) =>
-      data?.chatRoomOnRoomUpdate?.removedParticipants?.some(
-        (node) => node?.profile?.id === profileId,
-      )
-
-    return {
-      subscription: RoomListSubscriptionQuery,
-      onError: console.error,
-      variables: { profileId, connections },
-      updater: (
-        store: RecordSourceSelectorProxy<unknown>,
-        data: useRoomListSubscription$data | null | undefined,
-      ) => {
-        const roomId = data?.chatRoomOnRoomUpdate?.room?.node?.id
-        if (!roomId) return
-        if (wasRemovedFromChatRoom(data)) {
-          getChatRoomConnections(store, profileId).forEach((connectionRecord) =>
-            ConnectionHandler.deleteNode(connectionRecord, roomId),
-          )
-        } else {
-          const isArchived = data?.chatRoomOnRoomUpdate?.room?.node?.isArchived
-          getChatRoomConnections(
-            store,
-            profileId,
-            ({ q, archived }) => q === '' && archived === isArchived,
-          ).forEach((connectionRecord) => {
-            ConnectionHandler.deleteNode(connectionRecord, roomId)
-            const serverEdge = store.getRootField('chatRoomOnRoomUpdate')?.getLinkedRecord('room')
-            const edge = ConnectionHandler.buildConnectionEdge(store, connectionRecord, serverEdge)
-            if (edge) {
-              ConnectionHandler.insertEdgeBefore(connectionRecord, edge)
-            }
-          })
-        }
-      },
-      onNext: (data: useRoomListSubscription$data | null | undefined) => {
-        if (wasRemovedFromChatRoom(data)) {
-          if (selectedRoom && data?.chatRoomOnRoomUpdate?.room?.node?.id === selectedRoom) {
-            resetChatRoom()
-          }
-          onRemoval?.()
-        }
-      },
-    }
-  }, [profileId, connections, onRemoval, selectedRoom, resetChatRoom])
+  const config = useMemo(
+    () =>
+      getRoomListSubscriptionConfig(profileId, connections, selectedRoom, resetChatRoom, onRemoval),
+    [profileId, connections, onRemoval, selectedRoom, resetChatRoom],
+  )
 
   return useSubscription<useRoomListSubscriptionType>(config)
 }

packages/components/modules/messages/native/graphql/subscriptions/useRoomListSubscription.tsx

@@ -0,0 +1,59 @@
+'use-client'
+
+import { useCallback, useMemo, useRef } from 'react'
+
+import { useAppStateSubscription } from '@baseapp-frontend/utils/hooks/useAppStateSubscription'
+
+import { useFocusEffect } from 'expo-router'
+import { Disposable, Environment, requestSubscription } from 'react-relay'
+import { GraphQLSubscriptionConfig } from 'relay-runtime'
+
+import { useRoomListSubscription as useRoomListSubscriptionType } from '../../../../../__generated__/useRoomListSubscription.graphql'
+import { getRoomListSubscriptionConfig } from '../../../common'
+import useChatRoom from '../../../common/context/useChatRoom'
+
+export const useRoomListSubscription = ({
+  connections,
+  profileId,
+  onRemoval,
+  environment,
+}: {
+  connections: string[]
+  profileId: string
+  environment: Environment
+  onRemoval?: VoidFunction
+  isRemoval?: boolean
+}) => {
+  const { id: selectedRoom, resetChatRoom } = useChatRoom()
+  const disposableRef = useRef<Disposable | null>(null)
+
+  const config = useMemo<GraphQLSubscriptionConfig<useRoomListSubscriptionType>>(
+    () =>
+      getRoomListSubscriptionConfig(profileId, connections, selectedRoom, resetChatRoom, onRemoval),
+    [profileId, connections, onRemoval, selectedRoom, resetChatRoom],
+  )
+
+  const subscribe = useCallback(() => {
+    if (!profileId) return
+    disposableRef.current?.dispose?.()
+    disposableRef.current = requestSubscription(environment, config)
+  }, [profileId, environment, config])
+
+  const unsubscribe = useCallback(() => {
+    disposableRef.current?.dispose?.()
+    disposableRef.current = null
+  }, [])
+
+  useFocusEffect(
+    useCallback(() => {
+      subscribe()
+      return () => {
+        unsubscribe()
+      }
+    }, [subscribe, unsubscribe]),
+  )
+
+  useAppStateSubscription(() => {
+    subscribe()
+  })
+}

packages/components/modules/messages/native/index.ts

@@ -1,2 +1,3 @@
 // export native messages components
 export * from './graphql/subscriptions/useMessagesListSubscription'
+export * from './graphql/subscriptions/useRoomListSubscription'

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",