Expensify.js

import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
import {AppState, Linking} from 'react-native';
import Onyx, {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import ConfirmModal from './components/ConfirmModal';
import DeeplinkWrapper from './components/DeeplinkWrapper';
import EmojiPicker from './components/EmojiPicker/EmojiPicker';
import FocusModeNotification from './components/FocusModeNotification';
import GrowlNotification from './components/GrowlNotification';
import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
import SplashScreenHider from './components/SplashScreenHider';
import UpdateAppModal from './components/UpdateAppModal';
import withLocalize, {withLocalizePropTypes} from './components/withLocalize';
import CONST from './CONST';
import * as EmojiPickerAction from './libs/actions/EmojiPickerAction';
import * as Report from './libs/actions/Report';
import * as User from './libs/actions/User';
import * as ActiveClientManager from './libs/ActiveClientManager';
import BootSplash from './libs/BootSplash';
import compose from './libs/compose';
import * as Growl from './libs/Growl';
import Log from './libs/Log';
import migrateOnyx from './libs/migrateOnyx';
import Navigation from './libs/Navigation/Navigation';
import NavigationRoot from './libs/Navigation/NavigationRoot';
import NetworkConnection from './libs/NetworkConnection';
import PushNotification from './libs/Notification/PushNotification';
// eslint-disable-next-line no-unused-vars
import subscribePushNotification from './libs/Notification/PushNotification/subscribePushNotification';
import StartupTimer from './libs/StartupTimer';
// This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
// eslint-disable-next-line no-unused-vars
import UnreadIndicatorUpdater from './libs/UnreadIndicatorUpdater';
import Visibility from './libs/Visibility';
import ONYXKEYS from './ONYXKEYS';
import PopoverReportActionContextMenu from './pages/home/report/ContextMenu/PopoverReportActionContextMenu';
import * as ReportActionContextMenu from './pages/home/report/ContextMenu/ReportActionContextMenu';

Onyx.registerLogger(({level, message}) => {
    if (level === 'alert') {
        Log.alert(message);
        console.error(message);
    } else {
        Log.info(message);
    }
});

const propTypes = {
    /* Onyx Props */

    /** Session info for the currently logged in user. */
    session: PropTypes.shape({
        /** Currently logged in user authToken */
        authToken: PropTypes.string,

        /** Currently logged in user accountID */
        accountID: PropTypes.number,
    }),

    /** Whether a new update is available and ready to install. */
    updateAvailable: PropTypes.bool,

    /** Tells us if the sidebar has rendered - TODO: We don't use it as temporary solution to fix not hidding splashscreen */
    // eslint-disable-next-line react/no-unused-prop-types
    isSidebarLoaded: PropTypes.bool,

    /** Information about a screen share call requested by a GuidesPlus agent */
    screenShareRequest: PropTypes.shape({
        /** Access token required to join a screen share room, generated by the backend */
        accessToken: PropTypes.string,

        /** Name of the screen share room to join */
        roomName: PropTypes.string,
    }),

    /** Whether the app is waiting for the server's response to determine if a room is public */
    isCheckingPublicRoom: PropTypes.bool,

    /** True when the user must update to the latest minimum version of the app */
    updateRequired: PropTypes.bool,

    /** Whether we should display the notification alerting the user that focus mode has been auto-enabled */
    focusModeNotification: PropTypes.bool,

    /** Last visited path in the app */
    lastVisitedPath: PropTypes.string,

    ...withLocalizePropTypes,
};

const defaultProps = {
    session: {
        authToken: null,
        accountID: null,
    },
    updateAvailable: false,
    isSidebarLoaded: false,
    screenShareRequest: null,
    isCheckingPublicRoom: true,
    updateRequired: false,
    focusModeNotification: false,
    lastVisitedPath: undefined,
};

const SplashScreenHiddenContext = React.createContext({});

function Expensify(props) {
    const appStateChangeListener = useRef(null);
    const [isNavigationReady, setIsNavigationReady] = useState(false);
    const [isOnyxMigrated, setIsOnyxMigrated] = useState(false);
    const [isSplashHidden, setIsSplashHidden] = useState(false);
    const [hasAttemptedToOpenPublicRoom, setAttemptedToOpenPublicRoom] = useState(false);
    const [initialUrl, setInitialUrl] = useState(null);

    useEffect(() => {
        if (props.isCheckingPublicRoom) {
            return;
        }
        setAttemptedToOpenPublicRoom(true);
    }, [props.isCheckingPublicRoom]);

    const isAuthenticated = useMemo(() => Boolean(lodashGet(props.session, 'authToken', null)), [props.session]);
    const autoAuthState = useMemo(() => lodashGet(props.session, 'autoAuthState', ''), [props.session]);

    const contextValue = useMemo(
        () => ({
            isSplashHidden,
        }),
        [isSplashHidden],
    );

    const shouldInit = isNavigationReady && hasAttemptedToOpenPublicRoom;
    const shouldHideSplash = shouldInit && !isSplashHidden;

    const initializeClient = () => {
        if (!Visibility.isVisible()) {
            return;
        }

        ActiveClientManager.init();
    };

    const setNavigationReady = useCallback(() => {
        setIsNavigationReady(true);

        // Navigate to any pending routes now that the NavigationContainer is ready
        Navigation.setIsNavigationReady();
    }, []);

    const onSplashHide = useCallback(() => {
        setIsSplashHidden(true);
    }, []);

    useLayoutEffect(() => {
        // Initialize this client as being an active client
        ActiveClientManager.init();

        // Used for the offline indicator appearing when someone is offline
        NetworkConnection.subscribeToNetInfo();
    }, []);

    useEffect(() => {
        setTimeout(() => {
            BootSplash.getVisibilityStatus().then((status) => {
                const appState = AppState.currentState;
                Log.info('[BootSplash] splash screen status', false, {appState, status});

                if (status === 'visible') {
                    const propsToLog = _.omit(props, ['children', 'session']);
                    propsToLog.isAuthenticated = isAuthenticated;
                    Log.alert('[BootSplash] splash screen is still visible', {propsToLog}, false);
                }
            });
        }, 30 * 1000);

        // This timer is set in the native layer when launching the app and we stop it here so we can measure how long
        // it took for the main app itself to load.
        StartupTimer.stop();

        // Run any Onyx schema migrations and then continue loading the main app
        migrateOnyx().then(() => {
            // In case of a crash that led to disconnection, we want to remove all the push notifications.
            if (!isAuthenticated) {
                PushNotification.clearNotifications();
            }

            setIsOnyxMigrated(true);
        });

        appStateChangeListener.current = AppState.addEventListener('change', initializeClient);

        // If the app is opened from a deep link, get the reportID (if exists) from the deep link and navigate to the chat report
        Linking.getInitialURL().then((url) => {
            setInitialUrl(url);
            Report.openReportFromDeepLink(url, isAuthenticated);
        });

        // Open chat report from a deep link (only mobile native)
        Linking.addEventListener('url', (state) => {
            Report.openReportFromDeepLink(state.url, isAuthenticated);
        });

        return () => {
            if (!appStateChangeListener.current) {
                return;
            }
            appStateChangeListener.current.remove();
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
    }, []);

    // Display a blank page until the onyx migration completes
    if (!isOnyxMigrated) {
        return null;
    }

    if (props.updateRequired) {
        throw new Error(CONST.ERROR.UPDATE_REQUIRED);
    }

    return (
        <DeeplinkWrapper
            isAuthenticated={isAuthenticated}
            autoAuthState={autoAuthState}
        >
            {shouldInit && (
                <>
                    <GrowlNotification ref={Growl.growlRef} />
                    <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
                    <EmojiPicker ref={EmojiPickerAction.emojiPickerRef} />
                    {/* We include the modal for showing a new update at the top level so the option is always present. */}
                    {/* If the update is required we won't show this option since a full screen update view will be displayed instead. */}
                    {props.updateAvailable && !props.updateRequired ? <UpdateAppModal /> : null}
                    {props.screenShareRequest ? (
                        <ConfirmModal
                            title={props.translate('guides.screenShare')}
                            onConfirm={() => User.joinScreenShare(props.screenShareRequest.accessToken, props.screenShareRequest.roomName)}
                            onCancel={User.clearScreenShareRequest}
                            prompt={props.translate('guides.screenShareRequest')}
                            confirmText={props.translate('common.join')}
                            cancelText={props.translate('common.decline')}
                            isVisible
                        />
                    ) : null}
                    {props.focusModeNotification ? <FocusModeNotification /> : null}
                </>
            )}

            <AppleAuthWrapper />
            {hasAttemptedToOpenPublicRoom && (
                <SplashScreenHiddenContext.Provider value={contextValue}>
                    <NavigationRoot
                        onReady={setNavigationReady}
                        authenticated={isAuthenticated}
                        lastVisitedPath={props.lastVisitedPath}
                        initialUrl={initialUrl}
                    />
                </SplashScreenHiddenContext.Provider>
            )}

            {shouldHideSplash && <SplashScreenHider onHide={onSplashHide} />}
        </DeeplinkWrapper>
    );
}

Expensify.propTypes = propTypes;
Expensify.defaultProps = defaultProps;
export default compose(
    withLocalize,
    withOnyx({
        isCheckingPublicRoom: {
            key: ONYXKEYS.IS_CHECKING_PUBLIC_ROOM,
            initWithStoredValues: false,
        },
        session: {
            key: ONYXKEYS.SESSION,
        },
        updateAvailable: {
            key: ONYXKEYS.UPDATE_AVAILABLE,
            initWithStoredValues: false,
        },
        isSidebarLoaded: {
            key: ONYXKEYS.IS_SIDEBAR_LOADED,
        },
        screenShareRequest: {
            key: ONYXKEYS.SCREEN_SHARE_REQUEST,
        },
        updateRequired: {
            key: ONYXKEYS.UPDATE_REQUIRED,
            initWithStoredValues: false,
        },
        focusModeNotification: {
            key: ONYXKEYS.FOCUS_MODE_NOTIFICATION,
            initWithStoredValues: false,
        },
        lastVisitedPath: {
            key: ONYXKEYS.LAST_VISITED_PATH,
        },
    }),
)(Expensify);

export {SplashScreenHiddenContext};