From b25eec6c2f1957236157b9e5457777b439f9b81a Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 22 Mar 2022 15:44:03 -1000 Subject: [PATCH 1/2] Add createOnReadyTask. Fix broken growls triggered before init. --- src/components/GrowlNotification/index.js | 9 +++++++-- src/libs/ActiveClientManager/index.js | 12 +++--------- src/libs/Growl.js | 5 ++++- src/libs/createOnReadyTask.js | 18 ++++++++++++++++++ 4 files changed, 32 insertions(+), 12 deletions(-) create mode 100644 src/libs/createOnReadyTask.js diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index d5d8659d307b..3b531add1506 100644 --- a/src/components/GrowlNotification/index.js +++ b/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.setIsGrowlReady(); + } + /** * Show the growl notification * diff --git a/src/libs/ActiveClientManager/index.js b/src/libs/ActiveClientManager/index.js index e0bc5fc5f371..569f29fdcd2e 100644 --- a/src/libs/ActiveClientManager/index.js +++ b/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); } /** diff --git a/src/libs/Growl.js b/src/libs/Growl.js index b4915c22bad4..81f2d3f5fe3e 100644 --- a/src/libs/Growl.js +++ b/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, setIsGrowlReady] = 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, + setIsGrowlReady, }; diff --git a/src/libs/createOnReadyTask.js b/src/libs/createOnReadyTask.js new file mode 100644 index 000000000000..2f4431f5f983 --- /dev/null +++ b/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} + */ +export default function createOnReadyTask() { + let resolveIsReadyPromise; + const isReadyPromise = (new Promise((resolve) => { + resolveIsReadyPromise = resolve; + })); + return [isReadyPromise, resolveIsReadyPromise]; +} From dcf0276a24bb28cdf955893cb46d4ac00d0adf73 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 23 Mar 2022 11:28:03 -1000 Subject: [PATCH 2/2] Fix --- src/components/GrowlNotification/index.js | 2 +- src/libs/Growl.js | 4 ++-- src/libs/createOnReadyTask.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js index 3b531add1506..e3a16b600d13 100644 --- a/src/components/GrowlNotification/index.js +++ b/src/components/GrowlNotification/index.js @@ -46,7 +46,7 @@ class GrowlNotification extends Component { } componentDidMount() { - Growl.setIsGrowlReady(); + Growl.setIsReady(); } /** diff --git a/src/libs/Growl.js b/src/libs/Growl.js index 81f2d3f5fe3e..85ba042b71a0 100644 --- a/src/libs/Growl.js +++ b/src/libs/Growl.js @@ -3,7 +3,7 @@ import CONST from '../CONST'; import createOnReadyTask from './createOnReadyTask'; const growlRef = React.createRef(); -const [isGrowlReady, setIsGrowlReady] = createOnReadyTask(); +const [isGrowlReady, setIsReady] = createOnReadyTask(); /** * Show the growl notification @@ -44,5 +44,5 @@ export default { export { growlRef, - setIsGrowlReady, + setIsReady, }; diff --git a/src/libs/createOnReadyTask.js b/src/libs/createOnReadyTask.js index 2f4431f5f983..3d6546641175 100644 --- a/src/libs/createOnReadyTask.js +++ b/src/libs/createOnReadyTask.js @@ -14,5 +14,5 @@ export default function createOnReadyTask() { const isReadyPromise = (new Promise((resolve) => { resolveIsReadyPromise = resolve; })); - return [isReadyPromise, resolveIsReadyPromise]; + return [() => isReadyPromise, resolveIsReadyPromise]; }