From 8816953e439d5e063b9c865328286bfed10debbd Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Wed, 8 Jul 2020 13:43:20 -0400
Subject: [PATCH] MM-26699 Track open modals (#4539)

---
 app/actions/navigation/index.js      |  11 +++
 app/actions/navigation/index.test.js |   2 +
 app/screens/search/search.js         | 102 ++++++++++++++-------------
 app/store/ephemeral_store.js         |  20 ++++++
 4 files changed, 87 insertions(+), 48 deletions(-)

diff --git a/app/actions/navigation/index.js b/app/actions/navigation/index.js
index 9aa0385ca..02b226ae5 100644
--- a/app/actions/navigation/index.js
+++ b/app/actions/navigation/index.js
@@ -252,6 +252,7 @@ export function showModal(name, title, passProps = {}, options = {}) {
         },
     };
 
+    EphemeralStore.addNavigationModal(name);
     Navigation.showModal({
         stack: {
             children: [{
@@ -324,10 +325,15 @@ export function showSearchModal(initialValue = '') {
 }
 
 export async function dismissModal(options = {}) {
+    if (!EphemeralStore.hasModalsOpened()) {
+        return;
+    }
+
     const componentId = EphemeralStore.getNavigationTopComponentId();
 
     try {
         await Navigation.dismissModal(componentId, options);
+        EphemeralStore.removeNavigationModal(componentId);
     } catch (error) {
         // RNN returns a promise rejection if there is no modal to
         // dismiss. We'll do nothing in this case.
@@ -335,8 +341,13 @@ export async function dismissModal(options = {}) {
 }
 
 export async function dismissAllModals(options = {}) {
+    if (!EphemeralStore.hasModalsOpened()) {
+        return;
+    }
+
     try {
         await Navigation.dismissAllModals(options);
+        EphemeralStore.clearNavigationModals();
     } catch (error) {
         // RNN returns a promise rejection if there are no modals to
         // dismiss. We'll do nothing in this case.
diff --git a/app/actions/navigation/index.test.js b/app/actions/navigation/index.test.js
index 279127f31..8f7b6664d 100644
--- a/app/actions/navigation/index.test.js
+++ b/app/actions/navigation/index.test.js
@@ -17,6 +17,8 @@ jest.unmock('@actions/navigation');
 jest.mock('@store/ephemeral_store', () => ({
     getNavigationTopComponentId: jest.fn(),
     clearNavigationComponents: jest.fn(),
+    addNavigationModal: jest.fn(),
+    hasModalsOpened: jest.fn().mockReturnValue(true),
 }));
 
 const mockStore = configureMockStore([thunk]);
diff --git a/app/screens/search/search.js b/app/screens/search/search.js
index 4ec715cf2..a0f0dd423 100644
--- a/app/screens/search/search.js
+++ b/app/screens/search/search.js
@@ -9,6 +9,7 @@ import {intlShape} from 'react-intl';
 import {
     Keyboard,
     Platform,
+    SafeAreaView,
     SectionList,
     Text,
     View,
@@ -734,61 +735,66 @@ export default class Search extends PureComponent {
         }
 
         return (
-            <KeyboardLayout>
-                <StatusBar/>
-                <View style={[style.header, paddingRes]}>
-                    <SearchBar
-                        ref={this.setSearchBarRef}
-                        placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
-                        cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
-                        backgroundColor='transparent'
-                        inputHeight={Platform.OS === 'ios' ? 33 : 46}
-                        inputStyle={searchBarInput}
-                        placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
-                        selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
-                        tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
-                        tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
-                        titleCancelColor={theme.sidebarHeaderTextColor}
-                        onChangeText={this.handleTextChanged}
-                        onSearchButtonPress={this.handleSearchButtonPress}
-                        onCancelButtonPress={this.cancelSearch}
-                        onSelectionChange={this.handleSelectionChange}
-                        autoCapitalize='none'
-                        showArrow={true}
-                        value={value}
-                        containerStyle={style.searchBarContainer}
-                        backArrowSize={28}
-                        keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
-                        containerHeight={33}
+            <SafeAreaView style={style.flex}>
+                <KeyboardLayout>
+                    <StatusBar/>
+                    <View style={[style.header, paddingRes]}>
+                        <SearchBar
+                            ref={this.setSearchBarRef}
+                            placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
+                            cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
+                            backgroundColor='transparent'
+                            inputHeight={Platform.OS === 'ios' ? 33 : 46}
+                            inputStyle={searchBarInput}
+                            placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
+                            selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
+                            tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
+                            tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
+                            titleCancelColor={theme.sidebarHeaderTextColor}
+                            onChangeText={this.handleTextChanged}
+                            onSearchButtonPress={this.handleSearchButtonPress}
+                            onCancelButtonPress={this.cancelSearch}
+                            onSelectionChange={this.handleSelectionChange}
+                            autoCapitalize='none'
+                            showArrow={true}
+                            value={value}
+                            containerStyle={style.searchBarContainer}
+                            backArrowSize={28}
+                            keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
+                            containerHeight={33}
+                        />
+                    </View>
+                    <SectionList
+                        ref={this.setListRef}
+                        style={style.sectionList}
+                        renderSectionHeader={this.renderSectionHeader}
+                        sections={sections}
+                        keyboardShouldPersistTaps='always'
+                        keyboardDismissMode='interactive'
+                        stickySectionHeadersEnabled={Platform.OS === 'ios'}
+                        onLayout={this.handleLayout}
+                        onScroll={this.handleScroll}
+                        scrollEventThrottle={60}
+                        ListFooterComponent={this.renderFooter}
                     />
-                </View>
-                <SectionList
-                    ref={this.setListRef}
-                    style={style.sectionList}
-                    renderSectionHeader={this.renderSectionHeader}
-                    sections={sections}
-                    keyboardShouldPersistTaps='always'
-                    keyboardDismissMode='interactive'
-                    stickySectionHeadersEnabled={Platform.OS === 'ios'}
-                    onLayout={this.handleLayout}
-                    onScroll={this.handleScroll}
-                    scrollEventThrottle={60}
-                    ListFooterComponent={this.renderFooter}
-                />
-                <Autocomplete
-                    cursorPosition={cursorPosition}
-                    onChangeText={this.handleTextChanged}
-                    isSearch={true}
-                    value={value}
-                    enableDateSuggestion={this.props.enableDateSuggestion}
-                />
-            </KeyboardLayout>
+                    <Autocomplete
+                        cursorPosition={cursorPosition}
+                        onChangeText={this.handleTextChanged}
+                        isSearch={true}
+                        value={value}
+                        enableDateSuggestion={this.props.enableDateSuggestion}
+                    />
+                </KeyboardLayout>
+            </SafeAreaView>
         );
     }
 }
 
 const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
     return {
+        flex: {
+            flex: 1,
+        },
         header: {
             backgroundColor: theme.sidebarHeaderBg,
             width: '100%',
diff --git a/app/store/ephemeral_store.js b/app/store/ephemeral_store.js
index 8cb405be3..22d7fecb2 100644
--- a/app/store/ephemeral_store.js
+++ b/app/store/ephemeral_store.js
@@ -11,6 +11,7 @@ class EphemeralStore {
         this.deviceToken = null;
         this.currentServerUrl = null;
         this.navigationComponentIdStack = [];
+        this.navigationModalStack = [];
         this.safeAreaInsets = {
             [ViewTypes.PORTRAIT]: null,
             [ViewTypes.LANDSCAPE]: null,
@@ -21,14 +22,23 @@ class EphemeralStore {
 
     clearNavigationComponents = () => {
         this.navigationComponentIdStack = [];
+        this.navigationModalStack = [];
         this.allNavigationComponentIds = [];
     };
 
+    clearNavigationModals = () => {
+        this.navigationModalStack = [];
+    }
+
     addNavigationComponentId = (componentId) => {
         this.addToNavigationComponentIdStack(componentId);
         this.addToAllNavigationComponentIds(componentId);
     };
 
+    addNavigationModal = (componentId) => {
+        this.navigationModalStack.unshift(componentId);
+    }
+
     addToNavigationComponentIdStack = (componentId) => {
         const index = this.navigationComponentIdStack.indexOf(componentId);
         if (index > 0) {
@@ -44,6 +54,8 @@ class EphemeralStore {
         }
     }
 
+    hasModalsOpened = () => this.navigationModalStack.length > 0;
+
     removeNavigationComponentId = (componentId) => {
         const index = this.navigationComponentIdStack.indexOf(componentId);
         if (index >= 0) {
@@ -51,6 +63,14 @@ class EphemeralStore {
         }
     }
 
+    removeNavigationModal = (componentId) => {
+        const index = this.navigationModalStack.indexOf(componentId);
+
+        if (index >= 0) {
+            this.navigationModalStack.splice(index, 1);
+        }
+    }
+
     getStartFromNotification = () => {
         return this.appStartedFromPushNotification;
     };