From 16109788516538aaab527e77f994561d76f1fd55 Mon Sep 17 00:00:00 2001 From: vitorguima Date: Mon, 28 Jul 2025 11:19:55 -0300 Subject: [PATCH] feature/react-native-subscriptions-improvement --- packages/authentication/CHANGELOG.md | 7 +++++ packages/authentication/package.json | 2 +- packages/components/CHANGELOG.md | 14 +++++++++ .../useMessagesListSubscription.tsx | 30 +++++++++++++------ packages/components/package.json | 2 +- packages/design-system/CHANGELOG.md | 7 +++++ packages/design-system/package.json | 2 +- packages/graphql/CHANGELOG.md | 8 +++++ packages/graphql/package.json | 2 +- packages/provider/CHANGELOG.md | 7 +++++ packages/provider/package.json | 2 +- packages/utils/CHANGELOG.md | 11 +++---- .../hooks/useAppStateSubscription/index.ts | 23 ++++++++++++++ packages/utils/package.json | 2 +- packages/wagtail/CHANGELOG.md | 9 ++++++ packages/wagtail/package.json | 2 +- 16 files changed, 109 insertions(+), 21 deletions(-) create mode 100644 packages/utils/hooks/useAppStateSubscription/index.ts diff --git a/packages/authentication/CHANGELOG.md b/packages/authentication/CHANGELOG.md index 3a50a7d1..6de378af 100644 --- a/packages/authentication/CHANGELOG.md +++ b/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 diff --git a/packages/authentication/package.json b/packages/authentication/package.json index ba93bc03..328e9f20 100644 --- a/packages/authentication/package.json +++ b/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, diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 41e2f1dd..183e9cab 100644 --- a/packages/components/CHANGELOG.md +++ b/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 diff --git a/packages/components/modules/messages/native/graphql/subscriptions/useMessagesListSubscription.tsx b/packages/components/modules/messages/native/graphql/subscriptions/useMessagesListSubscription.tsx index 651d7550..cdaea6bd 100644 --- a/packages/components/modules/messages/native/graphql/subscriptions/useMessagesListSubscription.tsx +++ b/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(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() + }) } diff --git a/packages/components/package.json b/packages/components/package.json index 92962bc4..fae1be39 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.7", + "version": "1.2.8", "sideEffects": false, "scripts": { "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'", diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index bcae1c9b..c1908099 100644 --- a/packages/design-system/CHANGELOG.md +++ b/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 diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 4f362821..50e91d12 100644 --- a/packages/design-system/package.json +++ b/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", diff --git a/packages/graphql/CHANGELOG.md b/packages/graphql/CHANGELOG.md index b5d2b97a..11a53329 100644 --- a/packages/graphql/CHANGELOG.md +++ b/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 diff --git a/packages/graphql/package.json b/packages/graphql/package.json index 29f976a3..9fc6f852 100644 --- a/packages/graphql/package.json +++ b/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, diff --git a/packages/provider/CHANGELOG.md b/packages/provider/CHANGELOG.md index 8a3379e9..407fe07a 100644 --- a/packages/provider/CHANGELOG.md +++ b/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 diff --git a/packages/provider/package.json b/packages/provider/package.json index cef8dd94..9d0c9f32 100644 --- a/packages/provider/package.json +++ b/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, diff --git a/packages/utils/CHANGELOG.md b/packages/utils/CHANGELOG.md index 4e675990..dd6d5fe1 100644 --- a/packages/utils/CHANGELOG.md +++ b/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 diff --git a/packages/utils/hooks/useAppStateSubscription/index.ts b/packages/utils/hooks/useAppStateSubscription/index.ts new file mode 100644 index 00000000..d9f53d49 --- /dev/null +++ b/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(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]) +} diff --git a/packages/utils/package.json b/packages/utils/package.json index 2a048fac..63ba5c2b 100644 --- a/packages/utils/package.json +++ b/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, diff --git a/packages/wagtail/CHANGELOG.md b/packages/wagtail/CHANGELOG.md index c8e63e16..92df8900 100644 --- a/packages/wagtail/CHANGELOG.md +++ b/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 diff --git a/packages/wagtail/package.json b/packages/wagtail/package.json index f061d490..389e698e 100644 --- a/packages/wagtail/package.json +++ b/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,