react-native-onyx 1.0.30 → 1.0.32

package/lib/Onyx.js

@@ -778,6 +778,19 @@ function notifySubscribersOnNextTick(key, value, canUpdateSubscriber) {
     Promise.resolve().then(() => keyChanged(key, value, canUpdateSubscriber));
 }
 
+/**
+ * This method is similar to notifySubscribersOnNextTick but it is built for working specifically with collections
+ * so that keysChanged() is triggered for the collection and not keyChanged(). If this was not done, then the
+ * subscriber callbacks receive the data in a different format than they normally expect and it breaks code.
+ *
+ * @param {String} key
+ * @param {*} value
+ */
+// eslint-disable-next-line rulesdir/no-negated-variables
+function notifyCollectionSubscribersOnNextTick(key, value) {
+    Promise.resolve().then(() => keysChanged(key, value));
+}
+
 /**
  * Remove a key from Onyx and update the subscribers
  *
@@ -1038,24 +1051,55 @@ function clear(keysToPreserve = []) {
             const defaultKeys = _.keys(defaultKeyStates);
 
             // The only keys that should not be cleared are:
-            // 1. Anything specifically passed in keysToPreserve (because some keys like language preferences, offline status, or activeClients need to remain in Onyx even when signed out)
-            // 2. Any keys with a default state (because they need to remain in Onyx as their default, and setting them to null would cause unknown behavior)
+            // 1. Anything specifically passed in keysToPreserve (because some keys like language preferences, offline
+            //      status, or activeClients need to remain in Onyx even when signed out)
+            // 2. Any keys with a default state (because they need to remain in Onyx as their default, and setting them
+            //      to null would cause unknown behavior)
             const keysToClear = _.difference(keys, keysToPreserve, defaultKeys);
             keyValuesToReset.push(..._.map(keysToClear, key => [key, null]));
 
-            // Remove any keysToPreserve from the defaultKeyStates because if they are passed in it has been explicitly called out to preserve those values instead of resetting them back
+            // Remove any keysToPreserve from the defaultKeyStates because if they are passed in it has been explicitly
+            // called out to preserve those values instead of resetting them back
             // to the default.
             const defaultKeyValuePairs = _.pairs(_.omit(defaultKeyStates, ...keysToPreserve));
 
-            // Add the default key value pairs to the keyValuesToReset so that they get set back to their default values when we clear Onyx
+            // Add the default key value pairs to the keyValuesToReset so that they get set back to their default values
+            // when we clear Onyx
             keyValuesToReset.push(...defaultKeyValuePairs);
 
+            // We now have all the key/values that need to be reset, but we're not done yet!
+            // There will be two groups of key/values and they each need to be updated a little bit differently.
+            // Collection keys need to be notified differently than non collection keys
+            const keyValuesToResetAsCollection = {};
+            const keyValuesToResetIndividually = {};
+
             // Make sure that we also reset the cache values before clearing the values from storage.
-            // We do this before clearing Storage so that any call to clear() followed by merge() on a key with a default state results in the merged value getting saved, since the update
-            // from the merge() call would happen on the tick after the update from this clear()
+            // We do this before clearing Storage so that any call to clear() followed by merge() on a key with a
+            // default state results in the merged value getting saved, since the update from the merge() call would
+            // happen on the tick after the update from this clear()
             _.each(keyValuesToReset, (keyValue) => {
-                cache.set(keyValue[0], keyValue[1]);
-                notifySubscribersOnNextTick(keyValue[0], keyValue[1]);
+                const key = keyValue[0];
+                const value = keyValue[1];
+                cache.set(key, value);
+
+                const collectionKey = key.substring(0, key.indexOf('_') + 1);
+                if (collectionKey) {
+                    if (!keyValuesToResetAsCollection[collectionKey]) {
+                        keyValuesToResetAsCollection[collectionKey] = {};
+                    }
+                    keyValuesToResetAsCollection[collectionKey][key] = value;
+                    return;
+                }
+
+                keyValuesToResetIndividually[key] = value;
+            });
+
+            // Notify the subscribers for each key/value group so they can receive the new values
+            _.each(keyValuesToResetIndividually, (value, key) => {
+                notifySubscribersOnNextTick(key, value);
+            });
+            _.each(keyValuesToResetAsCollection, (value, key) => {
+                notifyCollectionSubscribersOnNextTick(key, value);
             });
 
             return Storage.multiSet(keyValuesToReset);

package/lib/storage/NativeStorage.js

@@ -1,3 +1,3 @@
-import Storage from './providers/AsyncStorage';
+import SQLiteStorage from './providers/SQLiteStorage';
 
-export default Storage;
+export default SQLiteStorage;

package/lib/storage/providers/SQLiteStorage.js

@@ -0,0 +1,118 @@
+/**
+ * The SQLiteStorage provider stores everything in a key/value store by
+ * converting the value to a JSON string
+ */
+import {open} from 'react-native-quick-sqlite';
+import _ from 'underscore';
+
+const DB_NAME = 'OnyxDB';
+const db = open({name: DB_NAME});
+
+db.execute('CREATE TABLE IF NOT EXISTS keyvaluepairs (record_key TEXT NOT NULL PRIMARY KEY , valueJSON JSON NOT NULL) WITHOUT ROWID;');
+
+// All of the 3 pragmas below were suggested by SQLite team.
+// You can find more info about them here: https://www.sqlite.org/pragma.html
+db.execute('PRAGMA CACHE_SIZE=-20000;');
+db.execute('PRAGMA synchronous=NORMAL;');
+db.execute('PRAGMA journal_mode=WAL;');
+
+const provider = {
+    /**
+    * Get the value of a given key or return `null` if it's not available in storage
+    * @param {String} key
+    * @return {Promise<*>}
+    */
+    getItem(key) {
+        return db.executeAsync('SELECT record_key, valueJSON FROM keyvaluepairs WHERE record_key = ?;', [key]).then(({rows}) => {
+            if (rows.length === 0) {
+                return null;
+            }
+            const result = rows.item(0);
+            return JSON.parse(result.valueJSON);
+        });
+    },
+
+    /**
+    * Get multiple key-value pairs for the given array of keys in a batch
+    * @param {String[]} keys
+    * @return {Promise<Array<[key, value]>>}
+    */
+    multiGet(keys) {
+        const placeholders = _.map(keys, () => '?').join(',');
+        const command = `SELECT record_key, valueJSON FROM keyvaluepairs WHERE record_key IN (${placeholders});`;
+        return db.executeAsync(command, keys)
+            .then(({rows}) => {
+                // eslint-disable-next-line no-underscore-dangle
+                const result = _.map(rows._array, row => [row.record_key, JSON.parse(row.valueJSON)]);
+                return result;
+            });
+    },
+
+    /**
+    * Sets the value for a given key. The only requirement is that the value should be serializable to JSON string
+    * @param {String} key
+    * @param {*} value
+    * @return {Promise<void>}
+    */
+    setItem(key, value) {
+        return db.executeAsync('REPLACE INTO keyvaluepairs (record_key, valueJSON) VALUES (?, ?);', [key, JSON.stringify(value)]);
+    },
+
+    /**
+    * Stores multiple key-value pairs in a batch
+    * @param {Array<[key, value]>} pairs
+    * @return {Promise<void>}
+    */
+    multiSet(pairs) {
+        const stringifiedPairs = _.map(pairs, pair => [
+            pair[0],
+            JSON.stringify(pair[1]),
+        ]);
+        return db.executeBatchAsync([['REPLACE INTO keyvaluepairs (record_key, valueJSON) VALUES (?, json(?));', stringifiedPairs]]);
+    },
+
+    /**
+    * Multiple merging of existing and new values in a batch
+    * @param {Array<[key, value]>} pairs
+    * @return {Promise<void>}
+    */
+    multiMerge(pairs) {
+        // Note: We use `ON CONFLICT DO UPDATE` here instead of `INSERT OR REPLACE INTO`
+        // so the new JSON value is merged into the old one if there's an existing value
+        const query = `INSERT INTO keyvaluepairs (record_key, valueJSON) 
+             VALUES (:key, JSON(:value)) 
+             ON CONFLICT DO UPDATE 
+             SET valueJSON = JSON_PATCH(valueJSON, JSON(:value)); 
+        `;
+        const queryArguments = _.map(pairs, (pair) => {
+            const value = JSON.stringify(pair[1]);
+            return [pair[0], value];
+        });
+        return db.executeBatchAsync([[query, queryArguments]]);
+    },
+
+    /**
+    * Returns all keys available in storage
+    * @returns {Promise<String[]>}
+    */
+    getAllKeys: () => db.executeAsync('SELECT record_key FROM keyvaluepairs;').then(({rows}) => {
+        // eslint-disable-next-line no-underscore-dangle
+        const result = _.map(rows._array, row => row.record_key);
+        return result;
+    }),
+
+    /**
+    * Removes given key and it's value from storage
+    * @param {String} key
+    * @returns {Promise<void>}
+    */
+    removeItem: key => db.executeAsync('DELETE FROM keyvaluepairs WHERE record_key = ?;', [key]),
+
+    /**
+    * Clears absolutely everything from storage
+    * @returns {Promise<void>}
+    */
+    clear: () => db.executeAsync('DELETE FROM keyvaluepairs;', []),
+};
+
+export default provider;

package/lib/storage/providers/__mocks__/SQLiteStorage.js

@@ -0,0 +1,3 @@
+import provider from '../AsyncStorage';
+
+export default provider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -48,7 +48,7 @@
     "@babel/core": "^7.17.10",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/runtime": "^7.11.2",
-    "@react-native-async-storage/async-storage": "^1.15.5",
+    "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/eslint-config": "^2.0.0",
     "@testing-library/jest-native": "^3.4.2",
     "@testing-library/react-native": "^7.0.2",
@@ -60,27 +60,31 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "eslint": "^7.6.0",
     "eslint-config-expensify": "^2.0.24",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.31.10",
     "expensify-common": "git+https://github.com/Expensify/expensify-common.git#427295da130a4eacc184d38693664280d020dffd",
     "jest": "^26.5.2",
     "jest-cli": "^26.5.2",
     "jsdoc-to-markdown": "^7.1.0",
     "localforage": "^1.10.0",
-    "metro-react-native-babel-preset": "^0.61.0",
+    "metro-react-native-babel-preset": "^0.72.3",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-native": "0.64.1",
+    "react": "18.1.0",
+    "react-native": "0.70.0",
     "react-native-performance": "^2.0.0",
-    "react-test-renderer": "16.13.1",
+    "react-native-quick-sqlite": "^5.0.3",
+    "react-test-renderer": "18.1.0",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
-    "@react-native-async-storage/async-storage": "^1.15.5",
+    "@react-native-async-storage/async-storage": "^1.17.11",
     "expensify-common": ">=1",
     "localforage": "^1.10.0",
-    "react": ">=17.0.2",
-    "react-native-performance": "^2.0.0"
+    "react": ">=18.1.0",
+    "react-native-performance": "^4.0.0",
+    "react-native-quick-sqlite": "^5.0.3"
   },
   "peerDependenciesMeta": {
     "react-native-performance": {
@@ -89,10 +93,17 @@
     "@react-native-async-storage/async-storage": {
       "optional": true
     },
+    "react-native-quick-sqlite": {
+      "optional": true
+    },
     "localforage": {
       "optional": true
     }
   },
+  "engines": {
+    "node": "16.15.1",
+    "npm": "8.11.0"
+  },
   "jest": {
     "preset": "react-native",
     "transform": {
@@ -116,7 +127,8 @@
     "timers": "fake",
     "testEnvironment": "jsdom",
     "setupFilesAfterEnv": [
-      "@testing-library/jest-native/extend-expect"
+      "@testing-library/jest-native/extend-expect",
+      "./jestSetup.js"
     ]
   },
   "sideEffects": false