From 158b573728c8fc3b3c0f1f93522f096afe428c06 Mon Sep 17 00:00:00 2001
From: vitorguima <vitorguima@gmail.com>
Date: Wed, 23 Jul 2025 12:29:02 -0300
Subject: [PATCH] fix: useMessagesListSubscription hook

---
 packages/components/CHANGELOG.md              |  7 ++-
 .../useMessagesListSubscription.tsx           | 52 +------------------
 .../useMessagesListSubscription.tsx           | 46 ++++++++++++++++
 .../modules/messages/native/index.ts          |  2 +
 packages/components/package.json              |  2 +-
 5 files changed, 57 insertions(+), 52 deletions(-)
 create mode 100644 packages/components/modules/messages/native/graphql/subscriptions/useMessagesListSubscription.tsx

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9e6a62cb..41e2f1dd 100644
--- a/packages/components/CHANGELOG.md
+++ b/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
diff --git a/packages/components/modules/messages/common/graphql/subscriptions/useMessagesListSubscription.tsx b/packages/components/modules/messages/common/graphql/subscriptions/useMessagesListSubscription.tsx
index 92eb0132..bff82a7b 100644
--- a/packages/components/modules/messages/common/graphql/subscriptions/useMessagesListSubscription.tsx
+++ b/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]),
-  )
-}
diff --git a/packages/components/modules/messages/native/graphql/subscriptions/useMessagesListSubscription.tsx b/packages/components/modules/messages/native/graphql/subscriptions/useMessagesListSubscription.tsx
new file mode 100644
index 00000000..651d7550
--- /dev/null
+++ b/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]),
+  )
+}
diff --git a/packages/components/modules/messages/native/index.ts b/packages/components/modules/messages/native/index.ts
index e69de29b..6c865c48 100644
--- a/packages/components/modules/messages/native/index.ts
+++ b/packages/components/modules/messages/native/index.ts
@@ -0,0 +1,2 @@
+// export native messages components
+export * from './graphql/subscriptions/useMessagesListSubscription'
diff --git a/packages/components/package.json b/packages/components/package.json
index b0f8c7b3..92962bc4 100644
--- a/packages/components/package.json
+++ b/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__/**'",