diff --git a/native/data/sqlite-context.js b/native/data/sqlite-context.js deleted file mode 100644 index 474c26e5c..000000000 --- a/native/data/sqlite-context.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import * as React from 'react'; - -export type SQLiteContextType = { - +storeLoaded: boolean, -}; - -const SQLiteContext: React.Context = React.createContext( - null, -); - -export { SQLiteContext }; diff --git a/native/data/sqlite-context-provider.js b/native/data/sqlite-data-handler.js similarity index 79% rename from native/data/sqlite-context-provider.js rename to native/data/sqlite-data-handler.js index 4de6e5951..aa3931413 100644 --- a/native/data/sqlite-context-provider.js +++ b/native/data/sqlite-data-handler.js @@ -1,178 +1,158 @@ // @flow import * as React from 'react'; import { Alert } from 'react-native'; import ExitApp from 'react-native-exit-app'; import { useDispatch } from 'react-redux'; -import { setDraftStoreDrafts } from 'lib/actions/draft-actions'; -import { setMessageStoreMessages } from 'lib/actions/message-actions.js'; -import { setThreadStoreActionType } from 'lib/actions/thread-actions'; +import { setClientDBStoreActionType } from 'lib/actions/client-db-store-actions'; import { isLoggedIn } from 'lib/selectors/user-selectors'; import { logInActionSources } from 'lib/types/account-types'; import { fetchNewCookieFromNativeCredentials } from 'lib/utils/action-utils'; import { getMessageForException } from 'lib/utils/errors'; import { convertClientDBThreadInfosToRawThreadInfos } from 'lib/utils/thread-ops-utils'; import { commCoreModule } from '../native-modules'; +import { setStoreLoadedActionType } from '../redux/action-types'; import { useSelector } from '../redux/redux-utils'; import { StaffContext } from '../staff/staff-context'; import { isTaskCancelledError } from '../utils/error-handling'; import { useStaffCanSee } from '../utils/staff-utils'; -import { SQLiteContext } from './sqlite-context'; -type Props = { - +children: React.Node, -}; - -function SQLiteContextProvider(props: Props): React.Node { - const [storeLoaded, setStoreLoaded] = React.useState(false); +function SQLiteDataHandler(): React.Node { + const storeLoaded = useSelector(state => state.storeLoaded); const dispatch = useDispatch(); const rehydrateConcluded = useSelector( state => !!(state._persist && state._persist.rehydrated), ); const cookie = useSelector(state => state.cookie); const urlPrefix = useSelector(state => state.urlPrefix); const staffCanSee = useStaffCanSee(); const { staffUserHasBeenLoggedIn } = React.useContext(StaffContext); const loggedIn = useSelector(isLoggedIn); const currentLoggedInUserID = useSelector(state => state.currentUserInfo?.anonymous ? undefined : state.currentUserInfo?.id, ); const handleSensitiveData = React.useCallback(async () => { try { const databaseCurrentUserInfoID = await commCoreModule.getCurrentUserID(); if ( databaseCurrentUserInfoID && databaseCurrentUserInfoID !== currentLoggedInUserID ) { if (staffCanSee || staffUserHasBeenLoggedIn) { Alert.alert('Starting SQLite database deletion process'); } await commCoreModule.clearSensitiveData(); if (staffCanSee || staffUserHasBeenLoggedIn) { Alert.alert( 'SQLite database successfully deleted', 'SQLite database deletion was triggered by change in logged-in user credentials', ); } } if (currentLoggedInUserID) { await commCoreModule.setCurrentUserID(currentLoggedInUserID); } const databaseDeviceID = await commCoreModule.getDeviceID(); if (!databaseDeviceID) { await commCoreModule.setDeviceID('MOBILE'); } } catch (e) { if (isTaskCancelledError(e)) { return; } if (__DEV__) { throw e; } else { console.log(e); ExitApp.exitApp(); } } }, [currentLoggedInUserID, staffCanSee, staffUserHasBeenLoggedIn]); React.useEffect(() => { if (!rehydrateConcluded) { return; } const sensitiveDataHandled = handleSensitiveData(); if (storeLoaded) { return; } if (!loggedIn) { - setStoreLoaded(true); + dispatch({ type: setStoreLoadedActionType }); return; } (async () => { await sensitiveDataHandled; try { const [threads, messages, drafts] = await Promise.all([ commCoreModule.getAllThreads(), commCoreModule.getAllMessages(), commCoreModule.getAllDrafts(), ]); const threadInfosFromDB = convertClientDBThreadInfosToRawThreadInfos( threads, ); dispatch({ - type: setThreadStoreActionType, - payload: { threadInfos: threadInfosFromDB }, - }); - dispatch({ - type: setMessageStoreMessages, - payload: messages, - }); - dispatch({ - type: setDraftStoreDrafts, - payload: drafts, + type: setClientDBStoreActionType, + payload: { + drafts, + messages, + threadStore: { threadInfos: threadInfosFromDB }, + currentUserID: currentLoggedInUserID, + }, }); - setStoreLoaded(true); } catch (setStoreException) { if (isTaskCancelledError(setStoreException)) { - setStoreLoaded(true); + dispatch({ type: setStoreLoadedActionType }); return; } if (staffCanSee) { Alert.alert( `Error setting threadStore or messageStore: ${ getMessageForException(setStoreException) ?? '{no exception message}' }`, ); } try { await fetchNewCookieFromNativeCredentials( dispatch, cookie, urlPrefix, logInActionSources.sqliteLoadFailure, ); - setStoreLoaded(true); + dispatch({ type: setStoreLoadedActionType }); } catch (fetchCookieException) { if (staffCanSee) { Alert.alert( `Error fetching new cookie from native credentials: ${ getMessageForException(fetchCookieException) ?? '{no exception message}' }. Please kill the app.`, ); } else { ExitApp.exitApp(); } } } })(); }, [ + currentLoggedInUserID, handleSensitiveData, loggedIn, cookie, dispatch, rehydrateConcluded, staffCanSee, storeLoaded, urlPrefix, ]); - const contextValue = React.useMemo( - () => ({ - storeLoaded, - }), - [storeLoaded], - ); - - return ( - - {props.children} - - ); + return null; } -export { SQLiteContextProvider }; +export { SQLiteDataHandler }; diff --git a/native/navigation/app-navigator.react.js b/native/navigation/app-navigator.react.js index 69844948c..a9434d536 100644 --- a/native/navigation/app-navigator.react.js +++ b/native/navigation/app-navigator.react.js @@ -1,144 +1,141 @@ // @flow import * as SplashScreen from 'expo-splash-screen'; import * as React from 'react'; +import { useSelector } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import MultimediaMessageTooltipModal from '../chat/multimedia-message-tooltip-modal.react'; import RobotextMessageTooltipModal from '../chat/robotext-message-tooltip-modal.react'; import ThreadSettingsMemberTooltipModal from '../chat/settings/thread-settings-member-tooltip-modal.react'; import TextMessageTooltipModal from '../chat/text-message-tooltip-modal.react'; -import { type SQLiteContextType, SQLiteContext } from '../data/sqlite-context'; import KeyboardStateContainer from '../keyboard/keyboard-state-container.react'; import CameraModal from '../media/camera-modal.react'; import ImageModal from '../media/image-modal.react'; import VideoPlaybackModal from '../media/video-playback-modal.react'; import RelationshipListItemTooltipModal from '../profile/relationship-list-item-tooltip-modal.react'; import PushHandler from '../push/push-handler.react'; import { getPersistor } from '../redux/persist'; import { RootContext } from '../root-context'; import { waitForInteractions } from '../utils/timers'; import ActionResultModal from './action-result-modal.react'; import { createOverlayNavigator } from './overlay-navigator.react'; import type { OverlayNavigationProp, OverlayNavigationHelpers, } from './overlay-navigator.react'; import type { RootNavigationProp } from './root-navigator.react'; import { TabNavigatorRouteName, ImageModalRouteName, MultimediaMessageTooltipModalRouteName, ActionResultModalRouteName, TextMessageTooltipModalRouteName, ThreadSettingsMemberTooltipModalRouteName, RelationshipListItemTooltipModalRouteName, RobotextMessageTooltipModalRouteName, CameraModalRouteName, VideoPlaybackModalRouteName, type ScreenParamList, type OverlayParamList, } from './route-names'; import TabNavigator from './tab-navigator.react'; let splashScreenHasHidden = false; export type AppNavigationProp< RouteName: $Keys = $Keys, > = OverlayNavigationProp; const App = createOverlayNavigator< ScreenParamList, OverlayParamList, OverlayNavigationHelpers, >(); type AppNavigatorProps = { navigation: RootNavigationProp<'App'>, ... }; function AppNavigator(props: AppNavigatorProps): React.Node { const { navigation } = props; const rootContext = React.useContext(RootContext); - const localDatabaseContext: ?SQLiteContextType = React.useContext( - SQLiteContext, - ); - const storeLoadedFromLocalDatabase = localDatabaseContext?.storeLoaded; + const storeLoadedFromLocalDatabase = useSelector(state => state.storeLoaded); const setNavStateInitialized = rootContext && rootContext.setNavStateInitialized; React.useEffect(() => { setNavStateInitialized && setNavStateInitialized(); }, [setNavStateInitialized]); const [ localSplashScreenHasHidden, setLocalSplashScreenHasHidden, ] = React.useState(splashScreenHasHidden); React.useEffect(() => { if (localSplashScreenHasHidden) { return; } splashScreenHasHidden = true; (async () => { await waitForInteractions(); try { await SplashScreen.hideAsync(); } finally { setLocalSplashScreenHasHidden(true); } })(); }, [localSplashScreenHasHidden]); let pushHandler; if (localSplashScreenHasHidden) { pushHandler = ( ); } if (!storeLoadedFromLocalDatabase) { return null; } return ( {pushHandler} ); } export default AppNavigator; diff --git a/native/root.react.js b/native/root.react.js index 9ce076b7f..fd68fd26d 100644 --- a/native/root.react.js +++ b/native/root.react.js @@ -1,291 +1,290 @@ // @flow import { ActionSheetProvider } from '@expo/react-native-action-sheet'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { useReduxDevToolsExtension } from '@react-navigation/devtools'; import { NavigationContainer } from '@react-navigation/native'; import type { PossiblyStaleNavigationState } from '@react-navigation/native'; import * as SplashScreen from 'expo-splash-screen'; import invariant from 'invariant'; import * as React from 'react'; import { Platform, UIManager, View, StyleSheet, LogBox } from 'react-native'; import Orientation from 'react-native-orientation-locker'; import { SafeAreaProvider, initialWindowMetrics, } from 'react-native-safe-area-context'; import { Provider } from 'react-redux'; import { PersistGate as ReduxPersistGate } from 'redux-persist/integration/react'; import { actionLogger } from 'lib/utils/action-logger'; import ChatContextProvider from './chat/chat-context-provider.react'; import PersistedStateGate from './components/persisted-state-gate'; import ConnectedStatusBar from './connected-status-bar.react'; -import { SQLiteContextProvider } from './data/sqlite-context-provider'; +import { SQLiteDataHandler } from './data/sqlite-data-handler'; import ErrorBoundary from './error-boundary.react'; import InputStateContainer from './input/input-state-container.react'; import LifecycleHandler from './lifecycle/lifecycle-handler.react'; import { defaultNavigationState } from './navigation/default-state'; import DisconnectedBarVisibilityHandler from './navigation/disconnected-bar-visibility-handler.react'; import { setGlobalNavContext } from './navigation/icky-global'; import { NavContext } from './navigation/navigation-context'; import NavigationHandler from './navigation/navigation-handler.react'; import { validNavState } from './navigation/navigation-utils'; import OrientationHandler from './navigation/orientation-handler.react'; import { navStateAsyncStorageKey } from './navigation/persistance'; import RootNavigator from './navigation/root-navigator.react'; import ConnectivityUpdater from './redux/connectivity-updater.react'; import { DimensionsUpdater } from './redux/dimensions-updater.react'; import { getPersistor } from './redux/persist'; import { store } from './redux/redux-setup'; import { useSelector } from './redux/redux-utils'; import { RootContext } from './root-context'; import Socket from './socket.react'; import { StaffContextProvider } from './staff/staff-context.provider.react'; import { DarkTheme, LightTheme } from './themes/navigation'; import ThemeHandler from './themes/theme-handler.react'; import './themes/fonts'; LogBox.ignoreLogs([ // react-native-reanimated 'Please report: Excessive number of pending callbacks', ]); if (Platform.OS === 'android') { UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); } const navInitAction = Object.freeze({ type: 'NAV/@@INIT' }); const navUnknownAction = Object.freeze({ type: 'NAV/@@UNKNOWN' }); SplashScreen.preventAutoHideAsync().catch(console.log); function Root() { const navStateRef = React.useRef(); const navDispatchRef = React.useRef(); const navStateInitializedRef = React.useRef(false); const [navContext, setNavContext] = React.useState(null); const updateNavContext = React.useCallback(() => { if ( !navStateRef.current || !navDispatchRef.current || !navStateInitializedRef.current ) { return; } const updatedNavContext = { state: navStateRef.current, dispatch: navDispatchRef.current, }; setNavContext(updatedNavContext); setGlobalNavContext(updatedNavContext); }, []); const [initialState, setInitialState] = React.useState( __DEV__ ? undefined : defaultNavigationState, ); React.useEffect(() => { Orientation.lockToPortrait(); (async () => { let loadedState = initialState; if (__DEV__) { try { const navStateString = await AsyncStorage.getItem( navStateAsyncStorageKey, ); if (navStateString) { const savedState = JSON.parse(navStateString); if (validNavState(savedState)) { loadedState = savedState; } } } catch {} } if (!loadedState) { loadedState = defaultNavigationState; } if (loadedState !== initialState) { setInitialState(loadedState); } navStateRef.current = loadedState; updateNavContext(); actionLogger.addOtherAction('navState', navInitAction, null, loadedState); })(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [updateNavContext]); const setNavStateInitialized = React.useCallback(() => { navStateInitializedRef.current = true; updateNavContext(); }, [updateNavContext]); const [rootContext, setRootContext] = React.useState(() => ({ setNavStateInitialized, })); const detectUnsupervisedBackgroundRef = React.useCallback( (detectUnsupervisedBackground: ?(alreadyClosed: boolean) => boolean) => { setRootContext(prevRootContext => ({ ...prevRootContext, detectUnsupervisedBackground, })); }, [], ); const frozen = useSelector(state => state.frozen); const queuedActionsRef = React.useRef([]); const onNavigationStateChange = React.useCallback( (state: ?PossiblyStaleNavigationState) => { invariant(state, 'nav state should be non-null'); const prevState = navStateRef.current; navStateRef.current = state; updateNavContext(); const queuedActions = queuedActionsRef.current; queuedActionsRef.current = []; if (queuedActions.length === 0) { queuedActions.push(navUnknownAction); } for (const action of queuedActions) { actionLogger.addOtherAction('navState', action, prevState, state); } if (!__DEV__ || frozen) { return; } (async () => { try { await AsyncStorage.setItem( navStateAsyncStorageKey, JSON.stringify(state), ); } catch (e) { console.log('AsyncStorage threw while trying to persist navState', e); } })(); }, [updateNavContext, frozen], ); const navContainerRef = React.useRef(); const containerRef = React.useCallback( (navContainer: ?React.ElementRef) => { navContainerRef.current = navContainer; if (navContainer && !navDispatchRef.current) { navDispatchRef.current = navContainer.dispatch; updateNavContext(); } }, [updateNavContext], ); useReduxDevToolsExtension(navContainerRef); const navContainer = navContainerRef.current; React.useEffect(() => { if (!navContainer) { return; } return navContainer.addListener('__unsafe_action__', event => { const { action, noop } = event.data; const navState = navStateRef.current; if (noop) { actionLogger.addOtherAction('navState', action, navState, navState); return; } queuedActionsRef.current.push({ ...action, type: `NAV/${action.type}`, }); }); }, [navContainer]); const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); const theme = (() => { if (activeTheme === 'light') { return LightTheme; } else if (activeTheme === 'dark') { return DarkTheme; } return undefined; })(); const gated: React.Node = ( <> ); let navigation; if (initialState) { navigation = ( ); } return ( - - - - {gated} - - - - - {navigation} - - + + + + {gated} + + + + + {navigation} + ); } const styles = StyleSheet.create({ app: { flex: 1, }, }); function AppRoot(): React.Node { return ( ); } export default AppRoot; diff --git a/native/selectors/app-state-selectors.js b/native/selectors/app-state-selectors.js index 49f880a9f..a1bcc3dcf 100644 --- a/native/selectors/app-state-selectors.js +++ b/native/selectors/app-state-selectors.js @@ -1,15 +1,12 @@ // @flow -import * as React from 'react'; import { useSelector } from 'react-redux'; -import { SQLiteContext } from '../data/sqlite-context'; - function usePersistedStateLoaded(): boolean { const rehydrateConcluded = useSelector(state => !!state._persist?.rehydrated); - const localDatabaseContext = React.useContext(SQLiteContext); + const storeLoaded = useSelector(state => state.storeLoaded); - return rehydrateConcluded && !!localDatabaseContext?.storeLoaded; + return rehydrateConcluded && storeLoaded; } export { usePersistedStateLoaded };