feat: Update conversation/messages when app opens from background state (#904)

* feat: update conversation/messages in background state

* chore: add delay while fetching the conversaions

* chore: remove console logs

Author: muhsin-k

app.config.ts

@@ -4,7 +4,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   return {
     name: 'Chatwoot',
     slug: process.env.EXPO_PUBLIC_APP_SLUG || 'chatwoot-mobile',
-    version: '4.0.10',
+    version: '4.0.11',
     orientation: 'portrait',
     icon: './assets/icon.png',
     userInterfaceStyle: 'light',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/mobile-app",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "main": "expo/AppEntry.js",
   "scripts": {
     "start": "expo start",

src/constants/index.ts

@@ -2,10 +2,12 @@ export const SCREENS = {
   LOGIN: 'Login',
   CONFIG_URL: 'ConfigureURL',
   CONVERSATION: 'ConversationScreen',
+  // Deprecated
   NOTIFICATION: 'NotificationScreen',
   SETTINGS: 'SettingsScreen',
   DETAIL: 'Detail',
   CHAT: 'ChatScreen',
+  INBOX: 'InboxScreen',
 };
 
 export const TAB_BAR_HEIGHT = 83;
@@ -305,3 +307,6 @@ export const MESSAGE_VARIANTS = {
   EMAIL: 'email',
   UNSUPPORTED: 'unsupported',
 };
+
+export const LAST_ACTIVE_TIMESTAMP_KEY = 'lastActiveTimestamp';
+export const LAST_ACTIVE_TIMESTAMP_THRESHOLD = 1000 * 60 * 1; // 1 minute

src/screens/chat-screen/components/message-list/MessagesListContainer.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useAppSelector, useAppDispatch } from '@/hooks';
 import { useChatWindowContext } from '@/context';
-import { Platform } from 'react-native';
+import { AppState, Platform } from 'react-native';
 import { KeyboardGestureArea } from 'react-native-keyboard-controller';
 import { flatMap } from 'lodash';
 import useDeepCompareEffect from 'use-deep-compare-effect';
@@ -18,10 +18,11 @@ import { getGroupedMessages, isAnEmailChannel } from '@/utils';
 import { MessagesList } from './MessagesList';
 import tailwind from 'twrnc';
 import { conversationParticipantActions } from '@/store/conversation-participant/conversationParticipantActions';
-import { MESSAGE_TYPES } from '@/constants';
+import { MESSAGE_TYPES, SCREENS } from '@/constants';
 import { Message } from '@/types';
 import { selectInboxById } from '@/store/inbox/inboxSelectors';
 import { selectUserId } from '@/store/auth/authSelectors';
+import { getCurrentRouteName } from '@/utils/navigationUtils';
 
 type DateSeparator = { date: string; type: 'date' };
 type MessageOrDate = Message | DateSeparator;
@@ -69,6 +70,7 @@ const PlatformSpecificKeyboardWrapperComponent =
   Platform.OS === 'android' ? Animated.View : KeyboardGestureArea;
 
 export const MessagesListContainer = () => {
+  const [appState, setAppState] = useState(AppState.currentState);
   const { conversationId } = useChatWindowContext();
   const dispatch = useAppDispatch();
   const [isFlashListReady, setFlashListReady] = React.useState(false);
@@ -112,6 +114,26 @@ export const MessagesListContainer = () => {
     [conversationId, dispatch, lastMessageId],
   );
 
+  // Update messages when app comes to foreground from background
+  useEffect(() => {
+    const appStateListener = AppState.addEventListener('change', nextAppState => {
+      if (appState.match(/inactive|background/) && nextAppState === 'active') {
+        const routeName = getCurrentRouteName();
+        if (routeName && SCREENS.CHAT === routeName) {
+          dispatch(
+            conversationActions.fetchPreviousMessages({
+              conversationId,
+            }),
+          );
+        }
+      }
+      setAppState(nextAppState);
+    });
+    return () => {
+      appStateListener?.remove();
+    };
+  }, [appState, conversationId, dispatch]);
+
   const onEndReached = () => {
     const shouldFetchMoreMessages = !isAllMessagesFetched && !isLoadingMessages && isFlashListReady;
     if (shouldFetchMoreMessages) {

src/screens/conversations/ConversationScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, RefreshControl, StatusBar } from 'react-native';
+import { ActivityIndicator, AppState, RefreshControl, StatusBar } from 'react-native';
 import Animated, {
   LinearTransition,
   runOnJS,
@@ -22,7 +22,12 @@ import {
 import { ActionTabs, BottomSheetBackdrop, BottomSheetWrapper } from '@/components-next';
 
 import { EmptyStateIcon } from '@/svg-icons';
-import { TAB_BAR_HEIGHT } from '@/constants';
+import {
+  SCREENS,
+  TAB_BAR_HEIGHT,
+  LAST_ACTIVE_TIMESTAMP_KEY,
+  LAST_ACTIVE_TIMESTAMP_THRESHOLD,
+} from '@/constants';
 import {
   ConversationListStateProvider,
   useConversationListStateContext,
@@ -52,6 +57,11 @@ import { clearAssignableAgents } from '@/store/assignable-agent/assignableAgentS
 
 import i18n from '@/i18n';
 import ActionBottomSheet from '@/navigation/tabs/ActionBottomSheet';
+import { getCurrentRouteName } from '@/utils/navigationUtils';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// The screen list thats need to be checked for refreshing the conversations list
+const REFRESH_SCREEN_LIST = [SCREENS.CONVERSATION, SCREENS.INBOX, SCREENS.SETTINGS];
 
 const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
 
@@ -62,6 +72,7 @@ type FlashListRenderItemType = {
 
 const ConversationList = () => {
   const dispatch = useAppDispatch();
+  const [appState, setAppState] = useState(AppState.currentState);
 
   // This is used to prevent the infinite scrolling before the list is ready
   const [isFlashListReady, setFlashListReady] = useState(false);
@@ -93,6 +104,11 @@ const ConversationList = () => {
   const filters = useAppSelector(selectFilters);
   const previousFilters = useRef(filters);
 
+  // Reset last active timestamp when the conversation screen is opened
+  useEffect(() => {
+    AsyncStorage.removeItem(LAST_ACTIVE_TIMESTAMP_KEY);
+  }, []);
+
   useEffect(() => {
     if (previousFilters.current !== filters) {
       previousFilters.current = filters;
@@ -136,6 +152,40 @@ const ConversationList = () => {
     });
   }, [clearAndFetchConversations, filters]);
 
+  const checkAppStateAndFetchConversations = useCallback(async () => {
+    const lastActiveTimestamp = await AsyncStorage.getItem(LAST_ACTIVE_TIMESTAMP_KEY);
+    if (lastActiveTimestamp) {
+      const currentTimestamp = Date.now();
+      const difference = currentTimestamp - parseInt(lastActiveTimestamp);
+      if (difference > LAST_ACTIVE_TIMESTAMP_THRESHOLD) {
+        clearAndFetchConversations(filters);
+      }
+    }
+  }, [clearAndFetchConversations, filters]);
+
+  // Update conversations when app comes to foreground from background
+  useEffect(() => {
+    const appStateListener = AppState.addEventListener('change', nextAppState => {
+      if (appState.match(/inactive|background/) && nextAppState === 'active') {
+        const routeName = getCurrentRouteName();
+        if (routeName && REFRESH_SCREEN_LIST.includes(routeName)) {
+          checkAppStateAndFetchConversations();
+        }
+      }
+
+      if (appState === 'active' && nextAppState.match(/inactive|background/)) {
+        // App is going to background
+        const currentTimestamp = Date.now();
+        AsyncStorage.setItem(LAST_ACTIVE_TIMESTAMP_KEY, currentTimestamp.toString());
+      }
+
+      setAppState(nextAppState);
+    });
+    return () => {
+      appStateListener?.remove();
+    };
+  }, [appState, checkAppStateAndFetchConversations, clearAndFetchConversations, filters]);
+
   const fetchConversations = useCallback(
     async (filters: FilterState, page: number = 1) => {
       const conversationFilters = {