Merge pull request #8280 from Expensify/chiragsalian-cherry-pick-stag…

…ing-8271

🍒 Cherry pick PR #8271 to staging 🍒

android/app/build.gradle

@@ -152,8 +152,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001014404
-        versionName "1.1.44-4"
+        versionCode 1001014405
+        versionName "1.1.44-5"
     }
     splits {
         abi {

ios/NewExpensify/Info.plist

@@ -31,7 +31,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.1.44.4</string>
+	<string>1.1.44.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.1.44.4</string>
+	<string>1.1.44.5</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.1.44-4",
+  "version": "1.1.44-5",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/GrowlNotification/index.js

@@ -12,6 +12,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import styles from '../../styles/styles';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 import CONST from '../../CONST';
+import * as Growl from '../../libs/Growl';
 
 const types = {
     [CONST.GROWL.SUCCESS]: {
@@ -31,8 +32,8 @@ const types = {
 const INACTIVE_POSITION_Y = -255;
 
 class GrowlNotification extends Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             bodyText: '',
@@ -44,6 +45,10 @@ class GrowlNotification extends Component {
         this.fling = this.fling.bind(this);
     }
 
+    componentDidMount() {
+        Growl.setIsReady();
+    }
+
     /**
      * Show the growl notification
      *

src/libs/ActiveClientManager/index.js

@@ -3,18 +3,16 @@ import Onyx from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as ActiveClients from '../actions/ActiveClients';
+import createOnReadyTask from '../createOnReadyTask';
 
 const clientID = Str.guid();
 const maxClients = 20;
 
 let activeClients;
-let isInitialized;
 
 // Keeps track of the ActiveClientManager's readiness in one place
 // so that multiple calls of isReady resolve the same promise
-const isInitializedPromise = new Promise((resolve) => {
-    isInitialized = resolve;
-});
+const [isReady, setIsReady] = createOnReadyTask();
 
 Onyx.connect({
     key: ONYXKEYS.ACTIVE_CLIENTS,
@@ -32,11 +30,7 @@ Onyx.connect({
  */
 function init() {
     ActiveClients.addClient(clientID)
-        .then(isInitialized);
-}
-
-function isReady() {
-    return isInitializedPromise;
+        .then(setIsReady);
 }
 
 /**

src/libs/Growl.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import CONST from '../CONST';
+import createOnReadyTask from './createOnReadyTask';
 
 const growlRef = React.createRef();
+const [isGrowlReady, setIsReady] = createOnReadyTask();
 
 /**
  * Show the growl notification
@@ -11,7 +13,7 @@ const growlRef = React.createRef();
  * @param {Number} [duration]
 */
 function show(bodyText, type, duration = CONST.GROWL.DURATION) {
-    growlRef.current.show(bodyText, type, duration);
+    isGrowlReady().then(() => growlRef.current.show(bodyText, type, duration));
 }
 
 /**
@@ -42,4 +44,5 @@ export default {
 
 export {
     growlRef,
+    setIsReady,
 };

src/libs/createOnReadyTask.js

@@ -0,0 +1,18 @@
+/**
+ * Helper method to create a task to track the "readiness" of something and defer any actions until after something is "ready".
+ *
+ * @example
+ *
+ *     const [isSomethingReady, setIsReady] = createOnReadyTask();
+ *     isSomethingReady().then(() => doIt());
+ *     setIsReady(); // -> doIt() will now execute
+ *
+ * @returns {Array<Promise, Function>}
+ */
+export default function createOnReadyTask() {
+    let resolveIsReadyPromise;
+    const isReadyPromise = (new Promise((resolve) => {
+        resolveIsReadyPromise = resolve;
+    }));
+    return [() => isReadyPromise, resolveIsReadyPromise];
+}