Feature/react native subscriptions improvement

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

packages/provider/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/provider",
   "description": "Providers for React Query and Emotion.",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/utils/CHANGELOG.md

@@ -1,33 +1,34 @@
 # @baseapp-frontend/utils
 
+## 4.0.1
+
+### Minor Changes
+
+- Introduced a new `useAppStateSubscription` hook that allows developers to register a callback (onAppResume) which runs whenever the app returns to the foreground. E.g. after a user unlocks their device or switches back to the app.
+
 ## 4.0.0
 
 ### Major Changes
 
 - **BREAKING:** Removed SSR support from cookie and token functions
-
   - Added `'use client'` directive to `getCookie`, `getToken`, `setTokenAsync`, and `removeTokenAsync` - these are now client-side only
   - Removed `noSSR` parameter from `getCookie`, `getToken`, and related types
   - Removed `getCookieAsync` function entirely
   - For server-side token retrieval, use the new `getTokenSSR` function instead
 
 - **BREAKING:** Removed deprecated `getTokenAsync` function
-
   - Deleted `getTokenAsync` function and all related tests
 
 - **BREAKING:** Removed deprecated cookie constants
-
   - Deleted `ACCESS_COOKIE_NAME` and `REFRESH_COOKIE_NAME` constants
   - These were already deprecated in favor of `ACCESS_KEY_NAME` and `REFRESH_KEY_NAME`
 
 - **BREAKING:** Updated `refreshAccessToken` API
-
   - Now requires explicit `refreshToken` parameter object
   - Updated function signature: `refreshAccessToken({ refreshToken, accessKeyName, refreshKeyName })`
   - No longer retrieves refresh token internally
 
 - **BREAKING:** Removed `ServerSideRenderingOption` type
-
   - Deleted `types/server.ts` file entirely
   - Updated all function signatures to remove SSR-related options
 

packages/utils/hooks/useAppStateSubscription/index.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react'
+
+import { AppState, AppStateStatus } from 'react-native'
+
+// Executes a callable when the app resumes.
+// E.g. user blocks the app and unblock it later.
+export const useAppStateSubscription = (onAppResume: () => void) => {
+  const appState = useRef<AppStateStatus>(AppState.currentState)
+
+  useEffect(() => {
+    const handleAppStateChange = (nextAppState: AppStateStatus) => {
+      if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
+        onAppResume()
+      }
+      appState.current = nextAppState
+    }
+
+    const stateChangeSubscription = AppState.addEventListener('change', handleAppStateChange)
+    return () => {
+      stateChangeSubscription.remove()
+    }
+  }, [onAppResume])
+}

packages/utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/utils",
   "description": "Util functions, constants and types.",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/wagtail/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @baseapp-frontend/wagtail
 
+## 1.0.35
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@4.0.1
+  - @baseapp-frontend/design-system@1.0.21
+  - @baseapp-frontend/graphql@1.3.3
+
 ## 1.0.34
 
 ### Patch Changes

packages/wagtail/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/wagtail",
   "description": "BaseApp Wagtail",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,