simplifying disconnected state logic

app/client/mobile/src/session/Session.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useEffect} from 'react';
 import {SafeAreaView, Pressable, View, useColorScheme} from 'react-native';
 import {styles} from './Session.styled';
 import {IconButton, Surface, Text, Icon} from 'react-native-paper';
@@ -33,6 +33,7 @@ export function Session() {
   const [tab, setTab] = useState('content');
   const [textCard, setTextCard] = useState({ cardId: null} as {cardId: null|string});
   const [dismissed, setDismissed] = useState(false);
+  const [disconnected, setDisconnected] = useState(false);
 
   const sessionNav = {strings: state.strings};
   const showContent = {display: tab === 'content' ? 'flex' : 'none'};
@@ -54,6 +55,14 @@ export function Session() {
     setTab('content');
   }
 
+  useEffect(() => {
+    if (state.appState && !sdkState) {
+      setDisconnected(true);
+    } else {
+      setDisconnected(false);
+    }
+  }, [state.appState, state.sdkState]);
+
   return (
     <View style={styles.session}>
       {state.layout !== 'large' && (

app/client/mobile/src/session/useSession.hook.ts

@@ -7,12 +7,13 @@ import {ContextType} from '../context/ContextType';
 export function useSession() {
   const display = useContext(DisplayContext) as ContextType;
   const app = useContext(AppContext) as ContextType;
-  const disconnecting = useRef(null);
 
   const [state, setState] = useState({
     layout: null,
     strings: {},
-    disconnected: false,
+    disconnected,
+    appState: true,
+    sdkState: true,
   });
 
   const updateState = (value: any) => {
@@ -20,22 +21,15 @@ export function useSession() {
   };
 
   useEffect(() => {
-    const setStatus = (status: string) => {
-      if (state.appState === 'active' && status === 'disconnected') {
-        disconnecting.current = setTimeout(() => {
-          updateState({ disconnected: true });
-        }, 4000);
-      } if (status === 'connected') {
-        clearTimeout(disconnecting.current);
-        updateState({ disconnected: false });
-      }
+    const setSdkState = (state: string) => {
+      updateState({ sdkState: state === 'connected' });
     }
-    const setAppState = (appState: string) => {
-      updateState({ appState });
+    const setAppState = (state: string) => {
+      updateState({ appState: state === 'active' });
     }
     const session = app.state.session;
     if (session) {
-      session.addStatusListener(setStatus);
+      session.addStatusListener(setSdkState);
       const sub = AppState.addEventListener('change', setAppState);
       return () => {
         session.removeStatusListener();