fixing issues with appstate listener

Author: vishalnarkhede

src/components/Channel/Channel.tsx

@@ -883,8 +883,8 @@ const ChannelWithContext = <
   const resyncChannel = async () => {
     if (!channel) return;
 
+    setError(false);
     try {
-      setError(false);
       /**
        * Allow a buffer of 30 new messages, so that MessageList won't move its scroll position,
        * giving smooth user experience.
@@ -935,7 +935,7 @@ const ChannelWithContext = <
         newListBottomMessageCreatedAt >= oldListBottomMessageCreatedAt
       ) {
         const index = state.messages.findIndex(
-          (m) => m.id === oldListTopMessageId,
+          (message) => message.id === oldListTopMessageId,
         );
         finalMessages = state.messages.slice(index);
       } else {

src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -94,7 +94,9 @@ export const usePaginatedChannels = <
         newOptions,
       );
 
-      channelQueryResponse.forEach((c) => c.state.setIsUpToDate(true));
+      channelQueryResponse.forEach((channel) =>
+        channel.state.setIsUpToDate(true),
+      );
 
       const newChannels =
         queryType === 'reload' || queryType === 'refresh'

src/components/Chat/hooks/useAppStateListener.ts

@@ -1,35 +1,32 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
 
 export const useAppStateListener = (
   onForeground?: () => void,
   onBackground?: () => void,
 ) => {
-  const appState = useRef(AppState.currentState);
-  const listenerExists = onForeground || onBackground;
-
-  useEffect(() => {
-    listenerExists && AppState.addEventListener('change', handleAppStateChange);
-
-    return () =>
-      listenerExists &&
-      AppState.removeEventListener('change', handleAppStateChange);
-  }, []);
+  const [appState, setAppState] = useState(AppState.currentState);
 
   const handleAppStateChange = (nextAppState: AppStateStatus) => {
     if (
-      appState.current === 'background' &&
+      appState === 'background' &&
       nextAppState === 'active' &&
       onForeground
     ) {
       onForeground();
     } else if (
-      appState.current.match(/active|inactive/) &&
+      appState.match(/active|inactive/) &&
       nextAppState === 'background' &&
       onBackground
     ) {
       onBackground();
     }
-    appState.current = nextAppState;
+    setAppState(nextAppState);
   };
+
+  useEffect(() => {
+    AppState.addEventListener('change', handleAppStateChange);
+
+    return () => AppState.removeEventListener('change', handleAppStateChange);
+  }, [handleAppStateChange]);
 };