Feature/react native subscriptions improvement (#279)

This PR introduces two key changes to improve the reliability of GraphQL
subscriptions when the app transitions between background and foreground
states:

1. New Hook: `useAppStateSubscription`
Added a reusable hook that listens to app state changes using React
Native’s AppState API. Executes a provided callback (onAppResume) when
the app returns to the foreground (e.g., after being backgrounded or
locked).

Useful for re-subscribing to real-time data or refetching stale content.

Example:

```js
AppStateSubscription(() => {
  refetch({ id: chatRoom.id }, { fetchPolicy: 'store-and-network' })
})
```

2. Improved `useMessagesListSubscription` Hook
Enhanced the subscription lifecycle by subscribing and unsubscribing
based on the app's active/inactive state.
Ensures real-time updates are re-established automatically after app
resumes from the background or device unlock.
Prevents missed events or stale subscriptions due to suspended WebSocket
connections on iOS.

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

* **New Features**
* Introduced a new hook to detect when the app returns to the
foreground.

* **Improvements**
* Enhanced message subscription logic to better handle app state
transitions, providing more reliable updates when the app becomes active
or inactive.

* **Chores**
* Updated several internal dependencies across packages to their latest
versions.
* Incremented package versions and updated changelogs for improved
tracking.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: vitorguima

packages/authentication/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/authentication
 
+## 5.0.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@4.0.1
+
 ## 5.0.1
 
 ### Patch Changes

packages/authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/authentication",
   "description": "Authentication modules.",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/components/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @baseapp-frontend/components
 
+## 1.2.8
+
+### Minor Changes
+
+- Improved the `useMessagesListSubscription` hook to subscribe and unsubscribe based on the application's state — e.g., when the app goes inactive and then returns to the foreground, or vice versa.
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@4.0.1
+  - @baseapp-frontend/authentication@5.0.2
+  - @baseapp-frontend/design-system@1.0.21
+  - @baseapp-frontend/graphql@1.3.3
+
 ## 1.2.7
 
 ### Minor Changes

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

@@ -1,5 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react'
 
+import { useAppStateSubscription } from '@baseapp-frontend/utils/hooks/useAppStateSubscription'
+
 import { useFocusEffect } from 'expo-router'
 import { ConnectionHandler, Disposable, Environment, requestSubscription } from 'react-relay'
 
@@ -11,6 +13,7 @@ export const useMessagesListSubscription = (
   environment: Environment,
 ) => {
   const disposableRef = useRef<Disposable | null>(null)
+
   const connectionID = useMemo(
     () => ConnectionHandler.getConnectionID(roomId, 'chatRoom_allMessages'),
     [roomId],
@@ -29,18 +32,27 @@ export const useMessagesListSubscription = (
     [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
+  const subscribe = useCallback(() => {
+    if (!roomId || !profileId) return
+    disposableRef.current?.dispose?.()
+    disposableRef.current = requestSubscription(environment, config)
+  }, [roomId, profileId, environment, config])
 
-      disposableRef.current = requestSubscription(environment, config)
+  const unsubscribe = useCallback(() => {
+    disposableRef.current?.dispose?.()
+    disposableRef.current = null
+  }, [])
 
+  useFocusEffect(
+    useCallback(() => {
+      subscribe()
       return () => {
-        disposableRef.current?.dispose?.()
-        disposableRef.current = null
+        unsubscribe()
       }
-    }, [config, environment]),
+    }, [subscribe, unsubscribe]),
   )
+
+  useAppStateSubscription(() => {
+    subscribe()
+  })
 }

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

packages/design-system/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/design-system
 
+## 1.0.21
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@4.0.1
+
 ## 1.0.20
 
 ### Patch Changes

packages/design-system/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/design-system",
   "description": "Design System components and configurations.",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "sideEffects": false,
   "scripts": {
     "tsup:bundle": "tsup --tsconfig tsconfig.build.json",

packages/graphql/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @baseapp-frontend/graphql
 
+## 1.3.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@4.0.1
+  - @baseapp-frontend/authentication@5.0.2
+
 ## 1.3.2
 
 ### Patch Changes

packages/graphql/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/graphql",
   "description": "GraphQL configurations and utilities",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/provider/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/provider
 
+## 2.0.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@4.0.1
+
 ## 2.0.14
 
 ### Patch Changes