fix: useMessagesListSubscription hook (#276)

- Abstract `useMessagesListSubscriptionOnRn` hook to native interface so
it doesn't break web version due to import problems. In this case:
expo-router won't be part of web applications so it will break when
importing through the previous path.

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

## Summary by CodeRabbit

* **New Features**
  * Improved chat room subscription reliability on native platforms.
* **Bug Fixes**
* Resolved issues causing message subscription failures on the web
version.
* **Chores**
  * Updated package version to 1.2.7.
  * Updated changelog to reflect latest changes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: vitorguima

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.2.7
+
+### Minor Changes
+
+- Abstract `useMessagesListSubscriptionOnRn` hook to native interface so it doesn't break web version due to import problems.
+
 ## 1.2.6
 
 - Implements a new hook: `useMessagesListSubscriptionOnRn`
@@ -15,7 +21,6 @@
   - @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,14 +1,6 @@
-import { useCallback, useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 
-import { useFocusEffect } from 'expo-router'
-import {
-  ConnectionHandler,
-  Disposable,
-  Environment,
-  graphql,
-  requestSubscription,
-  useSubscription,
-} from 'react-relay'
+import { ConnectionHandler, graphql, useSubscription } from 'react-relay'
 
 export const newMessageSubscription = graphql`
   subscription useMessagesListSubscription($roomId: ID!, $profileId: ID!, $connections: [ID!]!) {
@@ -41,43 +33,3 @@ 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/modules/messages/native/graphql/subscriptions/useMessagesListSubscription.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useMemo, useRef } from 'react'
+
+import { useFocusEffect } from 'expo-router'
+import { ConnectionHandler, Disposable, Environment, requestSubscription } from 'react-relay'
+
+import { newMessageSubscription } from '../../../common'
+
+export const useMessagesListSubscription = (
+  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/modules/messages/native/index.ts

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

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