react-native-onyx 1.0.120 → 1.0.121

package/lib/utils.js

@@ -1,12 +1,7 @@
 import _ from 'underscore';
 
 function areObjectsEmpty(a, b) {
-    return (
-        typeof a === 'object'
-        && typeof b === 'object'
-        && _.isEmpty(a)
-        && _.isEmpty(b)
-    );
+    return typeof a === 'object' && typeof b === 'object' && _.isEmpty(a) && _.isEmpty(b);
 }
 
 // Mostly copied from https://medium.com/@lubaka.a/how-to-remove-lodash-performance-improvement-b306669ad0e1
@@ -14,22 +9,24 @@ function areObjectsEmpty(a, b) {
 /**
  * @param {mixed} val
  * @returns {boolean}
-*/
+ */
 function isMergeableObject(val) {
     const nonNullObject = val != null ? typeof val === 'object' : false;
-    return (nonNullObject
-        && Object.prototype.toString.call(val) !== '[object RegExp]'
-        && Object.prototype.toString.call(val) !== '[object Date]')
+    return (
+        nonNullObject &&
+        Object.prototype.toString.call(val) !== '[object RegExp]' &&
+        Object.prototype.toString.call(val) !== '[object Date]' &&
         // eslint-disable-next-line rulesdir/prefer-underscore-method
-        && !Array.isArray(val);
+        !Array.isArray(val)
+    );
 }
 
 /**
-* @param {Object} target
-* @param {Object} source
-* @param {Boolean} shouldRemoveNullObjectValues
-* @returns {Object}
-*/
+ * @param {Object} target
+ * @param {Object} source
+ * @param {Boolean} shouldRemoveNullObjectValues
+ * @returns {Object}
+ */
 function mergeObject(target, source, shouldRemoveNullObjectValues = true) {
     const destination = {};
     if (isMergeableObject(target)) {
@@ -65,7 +62,7 @@ function mergeObject(target, source, shouldRemoveNullObjectValues = true) {
             const isSourceKeyMergable = isMergeableObject(source[key]);
 
             if (isSourceKeyMergable && target[key]) {
-                if ((!shouldRemoveNullObjectValues || isSourceKeyMergable)) {
+                if (!shouldRemoveNullObjectValues || isSourceKeyMergable) {
                     // eslint-disable-next-line no-use-before-define
                     destination[key] = fastMerge(target[key], source[key], shouldRemoveNullObjectValues);
                 }
@@ -85,11 +82,11 @@ function mergeObject(target, source, shouldRemoveNullObjectValues = true) {
  * On native, when merging an existing value with new changes, SQLite will use JSON_PATCH, which removes top-level nullish values.
  * To be consistent with the behaviour for merge, we'll also want to remove null values for "set" operations.
  *
-* @param {Object|Array} target
-* @param {Object|Array} source
-* @param {Boolean} shouldRemoveNullObjectValues
-* @returns {Object|Array}
-*/
+ * @param {Object|Array} target
+ * @param {Object|Array} source
+ * @param {Boolean} shouldRemoveNullObjectValues
+ * @returns {Object|Array}
+ */
 function fastMerge(target, source, shouldRemoveNullObjectValues = true) {
     // We have to ignore arrays and nullish values here,
     // otherwise "mergeObject" will throw an error,

package/lib/withOnyx.d.ts

@@ -40,13 +40,7 @@ type EntryBaseMapping<TOnyxKey extends OnyxKey> = {
  * },
  * ```
  */
-type BaseMappingKey<
-    TComponentProps,
-    TOnyxProps,
-    TOnyxProp extends keyof TOnyxProps,
-    TOnyxKey extends OnyxKey,
-    TOnyxValue
-> = IsEqual<TOnyxValue, TOnyxProps[TOnyxProp]> extends true
+type BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey, TOnyxValue> = IsEqual<TOnyxValue, TOnyxProps[TOnyxProp]> extends true
     ? {
           key: TOnyxKey | ((props: Omit<TComponentProps, keyof TOnyxProps>) => TOnyxKey);
       }
@@ -67,12 +61,7 @@ type BaseMappingKey<
  * },
  * ```
  */
-type BaseMappingStringKeyAndSelector<
-    TComponentProps,
-    TOnyxProps,
-    TOnyxProp extends keyof TOnyxProps,
-    TOnyxKey extends OnyxKey
-> = {
+type BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = {
     key: TOnyxKey;
     selector: Selector<TOnyxKey, TOnyxProps[TOnyxProp]>;
 };
@@ -92,12 +81,7 @@ type BaseMappingStringKeyAndSelector<
  * },
  * ```
  */
-type BaseMappingFunctionKeyAndSelector<
-    TComponentProps,
-    TOnyxProps,
-    TOnyxProp extends keyof TOnyxProps,
-    TOnyxKey extends OnyxKey
-> = {
+type BaseMappingFunctionKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = {
     key: (props: Omit<TComponentProps, keyof TOnyxProps>) => TOnyxKey;
     selector: Selector<TOnyxKey, TOnyxProps[TOnyxProp]>;
 };
@@ -105,10 +89,8 @@ type BaseMappingFunctionKeyAndSelector<
 /**
  * Represents the mapping options between an Onyx key and the component's prop with all its possibilities.
  */
-type Mapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = BaseMapping<
-    TComponentProps,
-    TOnyxProps
-> & EntryBaseMapping<TOnyxKey> &
+type Mapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = BaseMapping<TComponentProps, TOnyxProps> &
+    EntryBaseMapping<TOnyxKey> &
     (
         | BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey, OnyxEntry<KeyValueMapping[TOnyxKey]>>
         | BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey>
@@ -118,12 +100,8 @@ type Mapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TO
 /**
  * Represents the mapping options between an Onyx collection key without suffix and the component's prop with all its possibilities.
  */
-type CollectionMapping<
-    TComponentProps,
-    TOnyxProps,
-    TOnyxProp extends keyof TOnyxProps,
-    TOnyxKey extends CollectionKeyBase
-> = BaseMapping<TComponentProps, TOnyxProps> & CollectionBaseMapping<TOnyxKey> &
+type CollectionMapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends CollectionKeyBase> = BaseMapping<TComponentProps, TOnyxProps> &
+    CollectionBaseMapping<TOnyxKey> &
     (
         | BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey, OnyxCollection<KeyValueMapping[TOnyxKey]>>
         | BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey>
@@ -153,9 +131,7 @@ type OnyxPropCollectionMapping<TComponentProps, TOnyxProps, TOnyxProp extends ke
  */
 declare function withOnyx<TComponentProps, TOnyxProps>(
     mapping: {
-        [TOnyxProp in keyof TOnyxProps]:
-            | OnyxPropMapping<TComponentProps, TOnyxProps, TOnyxProp>
-            | OnyxPropCollectionMapping<TComponentProps, TOnyxProps, TOnyxProp>;
+        [TOnyxProp in keyof TOnyxProps]: OnyxPropMapping<TComponentProps, TOnyxProps, TOnyxProp> | OnyxPropCollectionMapping<TComponentProps, TOnyxProps, TOnyxProp>;
     },
     shouldDelayUpdates?: boolean,
 ): (component: React.ComponentType<TComponentProps>) => React.ComponentType<Omit<TComponentProps, keyof TOnyxProps>>;

package/lib/withOnyx.js

@@ -36,7 +36,7 @@ const getOnyxDataFromState = (state, onyxToStateMapping) => _.pick(state, _.keys
 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)
-        .omit(config => config.initWithStoredValues === false)
+        .omit((config) => config.initWithStoredValues === false)
         .keys()
         .value();
     return (WrappedComponent) => {
@@ -74,11 +74,7 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
                          * In reality, Onyx.merge() will only update the subscriber after all merges have been batched and the previous value is retrieved via a get() (returns a promise).
                          * So, we won't use the cache optimization here as it will lead us to arbitrarily defer various actions in the application code.
                          */
-                        if (
-                            (value !== undefined
-                                && !Onyx.hasPendingMergeForKey(key))
-                            || mapping.allowStaleData
-                        ) {
+                        if ((value !== undefined && !Onyx.hasPendingMergeForKey(key)) || mapping.allowStaleData) {
                             // eslint-disable-next-line no-param-reassign
                             resultObj[propertyName] = value;
                         }
@@ -132,9 +128,7 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
                     // (eg. if a user switches chats really quickly). In this case, it's much more stable to always look at the changes to prevProp and prevState to derive the key.
                     // The second case cannot be used all the time because the onyx data doesn't change the first time that `componentDidUpdate()` runs after loading. In this case,
                     // the `mapping.previousKey` must be used for the comparison or else this logic never detects that onyx data could have changed during the loading process.
-                    const previousKey = isFirstTimeUpdatingAfterLoading
-                        ? mapping.previousKey
-                        : Str.result(mapping.key, {...prevProps, ...prevOnyxDataFromState});
+                    const previousKey = isFirstTimeUpdatingAfterLoading ? mapping.previousKey : Str.result(mapping.key, {...prevProps, ...prevOnyxDataFromState});
                     const newKey = Str.result(mapping.key, {...this.props, ...onyxDataFromState});
                     if (previousKey !== newKey) {
                         Onyx.disconnect(this.activeConnectionIDs[previousKey], previousKey);
@@ -202,7 +196,7 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
                 this.tempState[statePropertyName] = val;
 
                 // If some key does not have a value yet, do not update the state yet
-                const tempStateIsMissingKey = _.some(requiredKeysForInit, key => _.isUndefined(this.tempState[key]));
+                const tempStateIsMissingKey = _.some(requiredKeysForInit, (key) => _.isUndefined(this.tempState[key]));
                 if (tempStateIsMissingKey) {
                     return;
                 }
@@ -212,29 +206,33 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
 
                 // Full of hacky workarounds to prevent the race condition described above.
                 this.setState((prevState) => {
-                    const finalState = _.reduce(stateUpdate, (result, value, key) => {
-                        if (key === 'loading') {
+                    const finalState = _.reduce(
+                        stateUpdate,
+                        (result, value, key) => {
+                            if (key === 'loading') {
+                                return result;
+                            }
+
+                            const initialValue = mapOnyxToState[key].initialValue;
+
+                            // If initialValue is there and the state contains something different it means
+                            // an update has already been received and we can discard the value we are trying to hydrate
+                            if (!_.isUndefined(initialValue) && !_.isUndefined(prevState[key]) && prevState[key] !== initialValue) {
+                                // eslint-disable-next-line no-param-reassign
+                                result[key] = prevState[key];
+
+                                // if value is already there (without initial value) then we can discard the value we are trying to hydrate
+                            } else if (!_.isUndefined(prevState[key])) {
+                                // eslint-disable-next-line no-param-reassign
+                                result[key] = prevState[key];
+                            } else {
+                                // eslint-disable-next-line no-param-reassign
+                                result[key] = value;
+                            }
                             return result;
-                        }
-
-                        const initialValue = mapOnyxToState[key].initialValue;
-
-                        // If initialValue is there and the state contains something different it means
-                        // an update has already been received and we can discard the value we are trying to hydrate
-                        if (!_.isUndefined(initialValue) && !_.isUndefined(prevState[key]) && prevState[key] !== initialValue) {
-                            // eslint-disable-next-line no-param-reassign
-                            result[key] = prevState[key];
-
-                            // if value is already there (without initial value) then we can discard the value we are trying to hydrate
-                        } else if (!_.isUndefined(prevState[key])) {
-                            // eslint-disable-next-line no-param-reassign
-                            result[key] = prevState[key];
-                        } else {
-                            // eslint-disable-next-line no-param-reassign
-                            result[key] = value;
-                        }
-                        return result;
-                    }, {});
+                        },
+                        {},
+                    );
 
                     finalState.loading = false;
                     return finalState;
@@ -350,8 +348,13 @@ export default function (mapOnyxToState, shouldDelayUpdates = false) {
         withOnyx.displayName = `withOnyx(${displayName})`;
         return React.forwardRef((props, ref) => {
             const Component = withOnyx;
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            return <Component {...props} forwardedRef={ref} />;
+            return (
+                <Component
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    forwardedRef={ref}
+                />
+            );
         });
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.120",
+  "version": "1.0.121",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -40,7 +40,8 @@
     "build:docs": "node buildDocs.js",
     "e2e": "playwright test",
     "e2e-ui": "playwright test --ui",
-    "postinstall": "cd tests/e2e/app && npm install"
+    "postinstall": "cd tests/e2e/app && npm install",
+    "prettier": "prettier --write ."
   },
   "dependencies": {
     "ascii-table": "0.0.9",
@@ -61,7 +62,8 @@
     "babel-jest": "^26.2.2",
     "babel-loader": "^8.2.5",
     "eslint": "^7.6.0",
-    "eslint-config-expensify": "^2.0.38",
+    "eslint-config-expensify": "^2.0.42",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
     "idb-keyval": "^6.2.1",
@@ -69,6 +71,7 @@
     "jest-cli": "^26.5.2",
     "jsdoc-to-markdown": "^7.1.0",
     "metro-react-native-babel-preset": "^0.72.3",
+    "prettier": "^2.8.8",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-dom": "^18.2.0",