react-native-onyx 1.0.103 → 1.0.105

package/lib/Onyx.js

@@ -1422,42 +1422,6 @@ function mergeCollection(collectionKey, collection) {
         });
 }
 
-/**
- * Internal recursive function to execute the functions in the correct order
- *
- * @param {Array} data An array of objects with shape {onyxMethod: oneOf('set', 'merge', 'mergeCollection', 'multiSet', 'clear'), key: string, value: *}
- * @returns {Promise<Void>}
- */
-function innerUpdate(data) {
-    if (data.length === 0) {
-        return Promise.resolve();
-    }
-
-    const {onyxMethod, key, value} = data.shift();
-    let promise = Promise.resolve();
-    switch (onyxMethod) {
-        case METHOD.SET:
-            promise = set(key, value);
-            break;
-        case METHOD.MERGE:
-            promise = merge(key, value);
-            break;
-        case METHOD.MERGE_COLLECTION:
-            promise = mergeCollection(key, value);
-            break;
-        case METHOD.MULTI_SET:
-            promise = multiSet(value);
-            break;
-        case METHOD.CLEAR:
-            promise = clear();
-            break;
-        default:
-            break;
-    }
-
-    return promise.then(() => innerUpdate(data));
-}
-
 /**
  * Insert API responses and lifecycle data into Onyx
  *
@@ -1466,9 +1430,8 @@ function innerUpdate(data) {
  */
 function update(data) {
     // First, validate the Onyx object is in the format we expect
-    const validMethods = [METHOD.CLEAR, METHOD.SET, METHOD.MERGE, METHOD.MERGE_COLLECTION, METHOD.MULTI_SET];
     _.each(data, ({onyxMethod, key, value}) => {
-        if (!_.contains(validMethods, onyxMethod)) {
+        if (!_.contains([METHOD.CLEAR, METHOD.SET, METHOD.MERGE, METHOD.MERGE_COLLECTION, METHOD.MULTI_SET], onyxMethod)) {
             throw new Error(`Invalid onyxMethod ${onyxMethod} in Onyx update.`);
         }
         if (onyxMethod === METHOD.MULTI_SET) {
@@ -1481,10 +1444,32 @@ function update(data) {
         }
     });
 
-    // Put clear operation on top
-    data.sort(a => (a.onyxMethod === METHOD.CLEAR ? -1 : 1));
+    const promises = [];
+    let clearPromise = Promise.resolve();
+
+    _.each(data, ({onyxMethod, key, value}) => {
+        switch (onyxMethod) {
+            case METHOD.SET:
+                promises.push(() => set(key, value));
+                break;
+            case METHOD.MERGE:
+                promises.push(() => merge(key, value));
+                break;
+            case METHOD.MERGE_COLLECTION:
+                promises.push(() => mergeCollection(key, value));
+                break;
+            case METHOD.MULTI_SET:
+                promises.push(() => multiSet(value));
+                break;
+            case METHOD.CLEAR:
+                clearPromise = clear();
+                break;
+            default:
+                break;
+        }
+    });
 
-    return innerUpdate(data);
+    return clearPromise.then(() => Promise.all(_.map(promises, p => p())));
 }
 
 /**

package/lib/withOnyx.js

@@ -20,6 +20,15 @@ function getDisplayName(component) {
     return component.displayName || component.name || 'Component';
 }
 
+/**
+ * Removes all the keys from state that are unrelated to the onyx data being mapped to the component.
+ *
+ * @param {Object} state of the component
+ * @param {Object} onyxToStateMapping the object holding all of the mapping configuration for the component
+ * @returns {Object}
+ */
+const getOnyxDataFromState = (state, onyxToStateMapping) => _.pick(state, _.keys(onyxToStateMapping));
+
 export default function (mapOnyxToState, shouldDelayUpdates = false) {
     // A list of keys that must be present in tempState before we can render the WrappedComponent
     const requiredKeysForInit = _.chain(mapOnyxToState)
@@ -92,16 +101,20 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
                 this.checkEvictableKeys();
             }
 
-            componentDidUpdate(prevProps) {
+            componentDidUpdate() {
+                // When the state is passed to the key functions with Str.result(), omit anything
+                // from state that was not part of the mapped keys.
+                const onyxDataFromState = getOnyxDataFromState(this.state, mapOnyxToState);
+
                 // If any of the mappings use data from the props, then when the props change, all the
                 // connections need to be reconnected with the new props
-                _.each(mapOnyxToState, (mapping, propertyName) => {
-                    const previousKey = Str.result(mapping.key, prevProps);
-                    const newKey = Str.result(mapping.key, this.props);
+                _.each(mapOnyxToState, (mapping, propName) => {
+                    const previousKey = mapping.previousKey;
+                    const newKey = Str.result(mapping.key, {...this.props, ...onyxDataFromState});
                     if (previousKey !== newKey) {
                         Onyx.disconnect(this.activeConnectionIDs[previousKey], previousKey);
                         delete this.activeConnectionIDs[previousKey];
-                        this.connectMappingToOnyx(mapping, propertyName);
+                        this.connectMappingToOnyx(mapping, propName);
                     }
                 });
                 this.checkEvictableKeys();
@@ -110,9 +123,8 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
             componentWillUnmount() {
                 // Disconnect everything from Onyx
                 _.each(mapOnyxToState, (mapping) => {
-                    const key = Str.result(mapping.key, this.props);
-                    const connectionID = this.activeConnectionIDs[key];
-                    Onyx.disconnect(connectionID, key);
+                    const key = Str.result(mapping.key, {...this.props, ...getOnyxDataFromState(this.state, mapOnyxToState)});
+                    Onyx.disconnect(this.activeConnectionIDs[key], key);
                 });
             }
 
@@ -244,7 +256,14 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
              *  component
              */
             connectMappingToOnyx(mapping, statePropertyName) {
-                const key = Str.result(mapping.key, this.props);
+                const key = Str.result(mapping.key, {...this.props, ...getOnyxDataFromState(this.state, mapOnyxToState)});
+
+                // Remember the previous key so that if it ever changes, the component will reconnect to Onyx
+                // in componentDidUpdate
+                if (statePropertyName !== 'initialValue' && mapOnyxToState[statePropertyName]) {
+                    // eslint-disable-next-line no-param-reassign
+                    mapOnyxToState[statePropertyName].previousKey = key;
+                }
 
                 // eslint-disable-next-line rulesdir/prefer-onyx-connect-in-libs
                 this.activeConnectionIDs[key] = Onyx.connect({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.103",
+  "version": "1.0.105",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",