Feature/messages list subscription (#275)

- Implements a new hook: `useMessagesListSubscriptionOnRn`
- Handles real-time message updates via GraphQL subscription
(chatRoomOnMessage)
- Automatically subscribes/unsubscribes on screen focus using expo
useFocusEffect. Ensures clean disposal of the subscription to avoid
memory leaks or duplicate events
- Uses Relay's ConnectionHandler.getConnectionID and append new messages
to the proper connection

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Introduced a new hook for React Native that manages message list
subscriptions, ensuring updates are received only while the relevant
screen is focused.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: vitorguima

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/components
 
+## 1.2.6
+
+- Implements a new hook: `useMessagesListSubscriptionOnRn`
+- Handles real-time message updates via GraphQL subscription (chatRoomOnMessage)
+- Automatically subscribes/unsubscribes on screen focus using expo useFocusEffect. Ensures clean disposal of the subscription to avoid memory leaks or duplicate events
+- Uses Relay's ConnectionHandler.getConnectionID and append new messages to the proper connection
+
 ## 1.2.5
 
 ### Patch Changes
@@ -8,6 +15,7 @@
   - @baseapp-frontend/design-system@1.0.21
   - @baseapp-frontend/authentication@5.0.1
 
+
 ## 1.2.4
 
 ### Minor Changes

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

@@ -1,6 +1,14 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 
-import { ConnectionHandler, graphql, useSubscription } from 'react-relay'
+import { useFocusEffect } from 'expo-router'
+import {
+  ConnectionHandler,
+  Disposable,
+  Environment,
+  graphql,
+  requestSubscription,
+  useSubscription,
+} from 'react-relay'
 
 export const newMessageSubscription = graphql`
   subscription useMessagesListSubscription($roomId: ID!, $profileId: ID!, $connections: [ID!]!) {
@@ -33,3 +41,43 @@ export const useMessagesListSubscription = (roomId: string, profileId: string) =
 
   return useSubscription(config)
 }
+
+export const useMessagesListSubscriptionOnRn = (
+  roomId: string,
+  profileId: string,
+  environment: Environment,
+) => {
+  const disposableRef = useRef<Disposable | null>(null)
+  const connectionID = useMemo(
+    () => ConnectionHandler.getConnectionID(roomId, 'chatRoom_allMessages'),
+    [roomId],
+  )
+
+  const config = useMemo(
+    () => ({
+      subscription: newMessageSubscription,
+      variables: {
+        roomId,
+        profileId,
+        connections: [connectionID],
+      },
+      onError: console.error,
+    }),
+    [roomId, profileId, connectionID],
+  )
+
+  // Subscribe to the messages list subscription when the component is focused
+  // and clean up the subscription when the component is unfocused
+  useFocusEffect(
+    useCallback(() => {
+      if (!roomId || !profileId) return undefined
+
+      disposableRef.current = requestSubscription(environment, config)
+
+      return () => {
+        disposableRef.current?.dispose?.()
+        disposableRef.current = null
+      }
+    }, [config, environment]),
+  )
+}

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.5",
+  "version": "1.2.6",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",