From b7a98dead98fa74ddc96a05e98a133cd17b1dd49 Mon Sep 17 00:00:00 2001
From: Mylon Suren <23694620+mylonsuren@users.noreply.github.com>
Date: Mon, 21 Feb 2022 06:24:04 -0500
Subject: [PATCH] [MM-39149] Only close sidebar when custom status is set
 successfully (#5988)

---
 .../settings_sidebar.test.js.snap             | 32 +++++++++++++++
 .../settings/settings_sidebar.test.js         | 41 +++++++++++++++++++
 .../settings/settings_sidebar_base.js         | 20 +++++----
 app/constants/custom_status.ts                |  2 +-
 .../custom_status/custom_status_modal.tsx     |  4 +-
 5 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/app/components/sidebars/settings/__snapshots__/settings_sidebar.test.js.snap b/app/components/sidebars/settings/__snapshots__/settings_sidebar.test.js.snap
index b1c058148..f56a457a1 100644
--- a/app/components/sidebars/settings/__snapshots__/settings_sidebar.test.js.snap
+++ b/app/components/sidebars/settings/__snapshots__/settings_sidebar.test.js.snap
@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SettingsSidebar Custom Status should close sidebar when update custom status succeeds 1`] = `
+<DrawerLayoutAdapter
+  drawerPosition="right"
+  drawerWidth={710}
+  forwardRef={
+    Object {
+      "current": null,
+    }
+  }
+  onDrawerClose={[Function]}
+  onDrawerOpen={[Function]}
+  renderNavigationView={[Function]}
+  useNativeAnimations={true}
+/>
+`;
+
+exports[`SettingsSidebar Custom Status should keep sidebar open when update custom status fails 1`] = `
+<DrawerLayoutAdapter
+  drawerPosition="right"
+  drawerWidth={710}
+  forwardRef={
+    Object {
+      "current": null,
+    }
+  }
+  onDrawerClose={[Function]}
+  onDrawerOpen={[Function]}
+  renderNavigationView={[Function]}
+  useNativeAnimations={true}
+/>
+`;
+
 exports[`SettingsSidebar should match snapshot 1`] = `
 <DrawerLayoutAdapter
   drawerPosition="right"
diff --git a/app/components/sidebars/settings/settings_sidebar.test.js b/app/components/sidebars/settings/settings_sidebar.test.js
index 7b74c06b3..55609bccc 100644
--- a/app/components/sidebars/settings/settings_sidebar.test.js
+++ b/app/components/sidebars/settings/settings_sidebar.test.js
@@ -5,6 +5,7 @@ import React from 'react';
 
 import Preferences from '@mm-redux/constants/preferences';
 import {CustomStatusDuration} from '@mm-redux/types/users';
+import EventEmitter from '@mm-redux/utils/event_emitter';
 import {shallowWithIntl} from '@test/intl-test-helper';
 
 import SettingsSidebar from './settings_sidebar.ios';
@@ -67,4 +68,44 @@ describe('SettingsSidebar', () => {
 
         expect(wrapper.getElement()).toMatchSnapshot();
     });
+
+    describe('Custom Status', () => {
+        const tests = [
+            {case: 'should keep sidebar open when update custom status fails', error: 'update custom status fail'},
+            {case: 'should close sidebar when update custom status succeeds', error: undefined},
+        ];
+
+        tests.forEach((test) => {
+            it(test.case, () => {
+                const wrapper = shallowWithIntl(
+                    <SettingsSidebar
+                        {...baseProps}
+                        isCustomStatusEnabled={true}
+                        customStatus={{
+                            ...customStatus,
+                            duration: CustomStatusDuration.DATE_AND_TIME,
+                            expires_at: '2200-04-13T18:09:12.451Z',
+                        }}
+                    />,
+                );
+
+                const instance = wrapper.instance();
+                instance.componentDidMount();
+
+                const spy = jest.spyOn(instance, 'closeSettingsSidebar');
+
+                EventEmitter.emit('set_custom_status', test.error);
+
+                if (test.error) {
+                    expect(spy).not.toBeCalled();
+                    expect(wrapper.state('showRetryMessage')).toBe(true);
+                } else {
+                    expect(spy).toBeCalled();
+                    expect(wrapper.state('showRetryMessage')).toBe(false);
+                }
+
+                expect(wrapper.getElement()).toMatchSnapshot();
+            });
+        });
+    });
 });
diff --git a/app/components/sidebars/settings/settings_sidebar_base.js b/app/components/sidebars/settings/settings_sidebar_base.js
index 185765e8b..55ae837be 100644
--- a/app/components/sidebars/settings/settings_sidebar_base.js
+++ b/app/components/sidebars/settings/settings_sidebar_base.js
@@ -57,7 +57,7 @@ export default class SettingsSidebarBase extends PureComponent {
     componentDidMount() {
         this.mounted = true;
         EventEmitter.on(NavigationTypes.CLOSE_SETTINGS_SIDEBAR, this.closeSettingsSidebar);
-        EventEmitter.on(CustomStatus.SET_CUSTOM_STATUS_FAILURE, this.handleSetCustomStatusFailure);
+        EventEmitter.on(CustomStatus.SET_CUSTOM_STATUS, this.handleSetCustomStatus);
     }
 
     componentDidUpdate(prevProps) {
@@ -67,13 +67,20 @@ export default class SettingsSidebarBase extends PureComponent {
     componentWillUnmount() {
         this.mounted = false;
         EventEmitter.off(NavigationTypes.CLOSE_SETTINGS_SIDEBAR, this.closeSettingsSidebar);
-        EventEmitter.off(CustomStatus.SET_CUSTOM_STATUS_FAILURE, this.handleSetCustomStatusFailure);
+        EventEmitter.off(CustomStatus.SET_CUSTOM_STATUS, this.handleSetCustomStatus);
     }
 
-    handleSetCustomStatusFailure = () => {
-        this.setState({
-            showRetryMessage: true,
-        });
+    handleSetCustomStatus = (error) => {
+        if (error) {
+            this.setState({showRetryMessage: true});
+        } else {
+            this.setState({
+                showStatus: true,
+                showRetryMessage: false,
+            });
+
+            this.closeSettingsSidebar();
+        }
     };
 
     handleCustomStatusChange = (prevCustomStatus, customStatus) => {
@@ -167,7 +174,6 @@ export default class SettingsSidebarBase extends PureComponent {
     };
 
     goToCustomStatusScreen = (intl) => {
-        this.closeSettingsSidebar();
         showModal('CustomStatus', intl.formatMessage({id: 'mobile.routes.custom_status', defaultMessage: 'Set a Status'}));
     };
 
diff --git a/app/constants/custom_status.ts b/app/constants/custom_status.ts
index 855ead848..5977a00e7 100644
--- a/app/constants/custom_status.ts
+++ b/app/constants/custom_status.ts
@@ -45,4 +45,4 @@ export const durationValues = {
     },
 };
 export const CUSTOM_STATUS_TEXT_CHARACTER_LIMIT = 100;
-export const SET_CUSTOM_STATUS_FAILURE = 'set_custom_status_failure';
+export const SET_CUSTOM_STATUS = 'set_custom_status';
diff --git a/app/screens/custom_status/custom_status_modal.tsx b/app/screens/custom_status/custom_status_modal.tsx
index a7a3aff6a..98917ed2b 100644
--- a/app/screens/custom_status/custom_status_modal.tsx
+++ b/app/screens/custom_status/custom_status_modal.tsx
@@ -159,9 +159,7 @@ class CustomStatusModal extends NavigationComponent<Props, State> {
                     status.expires_at = this.calculateExpiryTime(duration);
                 }
                 const {error} = await this.props.actions.setCustomStatus(status);
-                if (error) {
-                    EventEmitter.emit(CustomStatus.SET_CUSTOM_STATUS_FAILURE);
-                }
+                EventEmitter.emit(CustomStatus.SET_CUSTOM_STATUS, error);
             }
         } else if (customStatus?.emoji) {
             this.props.actions.unsetCustomStatus();