react-native-onyx 1.0.119 → 1.0.121

package/lib/ActiveClientManager/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Determines when the client is ready. We need to wait till the init method is called and the leader message is sent.
+ */
+declare function isReady(): Promise<void>;
+
+/**
+ * Subscribes to the broadcast channel to listen for messages from other tabs, so that
+ * all tabs agree on who the leader is, which should always be the last tab to open.
+ */
+declare function init(): void;
+
+/**
+ * Returns a boolean indicating if the current client is the leader.
+ */
+declare function isClientTheLeader(): boolean;
+
+/**
+ * Subscribes to when the client changes.
+ */
+declare function subscribeToClientChange(callback: () => {}): void;
+
+export {isReady, init, isClientTheLeader, subscribeToClientChange};

package/lib/ActiveClientManager/index.native.js

@@ -0,0 +1,23 @@
+/**
+ * For native devices, there will never be more than one
+ * client running at a time, so this lib is a big no-op
+ */
+
+function isReady() {
+    return Promise.resolve();
+}
+
+function isClientTheLeader() {
+    return true;
+}
+
+function init() {}
+
+function subscribeToClientChange() {}
+
+export {
+    isClientTheLeader,
+    init,
+    isReady,
+    subscribeToClientChange,
+};

package/lib/ActiveClientManager/index.web.js

@@ -0,0 +1,99 @@
+/**
+ * When you have many tabs in one browser, the data of Onyx is shared between all of them. Since we persist write requests in Onyx, we need to ensure that
+ * only one tab is processing those saved requests or we would be duplicating data (or creating errors).
+ * This file ensures exactly that by tracking all the clientIDs connected, storing the most recent one last and it considers that last clientID the "leader".
+ */
+
+import * as Str from '../Str';
+import * as Broadcast from '../broadcast';
+
+const NEW_LEADER_MESSAGE = 'NEW_LEADER';
+const REMOVED_LEADER_MESSAGE = 'REMOVE_LEADER';
+
+const clientID = Str.guid();
+const subscribers = [];
+let timestamp = null;
+
+let activeClientID = null;
+let setIsReady = () => {};
+const isReadyPromise = new Promise((resolve) => {
+    setIsReady = resolve;
+});
+
+/**
+ * Determines when the client is ready. We need to wait both till we saved our ID in onyx AND the init method was called
+ * @returns {Promise}
+ */
+function isReady() {
+    return isReadyPromise;
+}
+
+/**
+ * Returns a boolean indicating if the current client is the leader.
+ *
+ * @returns {Boolean}
+ */
+function isClientTheLeader() {
+    return activeClientID === clientID;
+}
+
+/**
+ * Subscribes to when the client changes.
+ * @param {Function} callback
+ */
+function subscribeToClientChange(callback) {
+    subscribers.push(callback);
+}
+
+/**
+ * Subscribe to the broadcast channel to listen for messages from other tabs, so that
+ * all tabs agree on who the leader is, which should always be the last tab to open.
+ */
+function init() {
+    Broadcast.subscribe((message) => {
+        switch (message.data.type) {
+            case NEW_LEADER_MESSAGE: {
+                // Only update the active leader if the message received was from another
+                // tab that initialized after the current one; if the timestamps are the
+                // same, it uses the client ID to tie-break
+                const isTimestampEqual = timestamp === message.data.timestamp;
+                const isTimestampNewer = timestamp > message.data.timestamp;
+                if (isClientTheLeader() && (isTimestampNewer || (isTimestampEqual && clientID > message.data.clientID))) {
+                    return;
+                }
+                activeClientID = message.data.clientID;
+
+                subscribers.forEach(callback => callback());
+                break;
+            }
+            case REMOVED_LEADER_MESSAGE:
+                activeClientID = clientID;
+                timestamp = Date.now();
+                Broadcast.sendMessage({type: NEW_LEADER_MESSAGE, clientID, timestamp});
+                subscribers.forEach(callback => callback());
+                break;
+            default:
+                break;
+        }
+    });
+
+    activeClientID = clientID;
+    timestamp = Date.now();
+
+    Broadcast.sendMessage({type: NEW_LEADER_MESSAGE, clientID, timestamp});
+    setIsReady();
+
+    window.addEventListener('beforeunload', () => {
+        if (!isClientTheLeader()) {
+            return;
+        }
+        Broadcast.sendMessage({type: REMOVED_LEADER_MESSAGE, clientID});
+    });
+}
+
+export {
+    isClientTheLeader,
+    init,
+    isReady,
+    subscribeToClientChange,
+};

package/lib/Logger.js

@@ -28,8 +28,4 @@ function logInfo(message) {
     logger({message: `[Onyx] ${message}`, level: 'info'});
 }
 
-export {
-    registerLogger,
-    logInfo,
-    logAlert,
-};
+export {registerLogger, logInfo, logAlert};

package/lib/MDTable.js

@@ -24,17 +24,16 @@ class MDTable extends AsciTable {
     toString() {
         // Ignore modifying the first |---| for titled tables
         let idx = this.getTitle() ? -2 : -1;
-        const ascii = super.toString()
-            .replace(/-\|/g, () => {
-                /* we replace "----|" with "---:|" to align the data to the right in MD */
-                idx++;
+        const ascii = super.toString().replace(/-\|/g, () => {
+            /* we replace "----|" with "---:|" to align the data to the right in MD */
+            idx++;
 
-                if (idx < 0 || this.leftAlignedCols.includes(idx)) {
-                    return '-|';
-                }
+            if (idx < 0 || this.leftAlignedCols.includes(idx)) {
+                return '-|';
+            }
 
-                return ':|';
-            });
+            return ':|';
+        });
 
         // strip the top and the bottom row (----) to make an MD table
         const md = ascii.split('\n').slice(1, -1).join('\n');
@@ -52,16 +51,14 @@ class MDTable extends AsciTable {
  * @param {Array} [options.rows] The table can be initialized with row. Rows can also be added by `addRow`
  * @returns {MDTable}
  */
-MDTable.factory = ({
-    title, heading, leftAlignedCols = [], rows = [],
-}) => {
+MDTable.factory = ({title, heading, leftAlignedCols = [], rows = []}) => {
     const table = new MDTable({title, heading, rows});
     table.leftAlignedCols = leftAlignedCols;
 
     /* By default we want everything aligned to the right as most values are numbers
-         * we just override the columns that are not right aligned */
+     * we just override the columns that are not right aligned */
     heading.forEach((name, idx) => table.setAlign(idx, AsciTable.RIGHT));
-    leftAlignedCols.forEach(idx => table.setAlign(idx, AsciTable.LEFT));
+    leftAlignedCols.forEach((idx) => table.setAlign(idx, AsciTable.LEFT));
 
     return table;
 };

package/lib/Onyx.d.ts

@@ -1,5 +1,6 @@
 import {Component} from 'react';
 import * as Logger from './Logger';
+import * as ActiveClientManager from './ActiveClientManager';
 import {CollectionKey, CollectionKeyBase, DeepRecord, KeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey} from './types';
 
 /**
@@ -243,10 +244,7 @@ declare function clear(keysToPreserve?: OnyxKey[]): Promise<void>;
  * @param collectionKey e.g. `ONYXKEYS.COLLECTION.REPORT`
  * @param collection Object collection keyed by individual collection member keys and values
  */
-declare function mergeCollection<TKey extends CollectionKeyBase, TMap>(
-    collectionKey: TKey,
-    collection: Collection<TKey, TMap, NullishDeep<KeyValueMapping[TKey]>>,
-): Promise<void>;
+declare function mergeCollection<TKey extends CollectionKeyBase, TMap>(collectionKey: TKey, collection: Collection<TKey, TMap, NullishDeep<KeyValueMapping[TKey]>>): Promise<void>;
 
 /**
  * Insert API responses and lifecycle data into Onyx
@@ -293,6 +291,11 @@ declare function hasPendingMergeForKey(key: OnyxKey): boolean;
  */
 declare function setMemoryOnlyKeys(keyList: OnyxKey[]): void;
 
+/**
+ * Sets the callback to be called when the clear finishes executing.
+ */
+declare function onClear(callback: () => void): void;
+
 declare const Onyx: {
     connect: typeof connect;
     disconnect: typeof disconnect;
@@ -311,6 +314,10 @@ declare const Onyx: {
     isSafeEvictionKey: typeof isSafeEvictionKey;
     METHOD: typeof METHOD;
     setMemoryOnlyKeys: typeof setMemoryOnlyKeys;
+    onClear: typeof onClear;
+    isClientManagerReady: typeof ActiveClientManager.isReady,
+    isClientTheLeader: typeof ActiveClientManager.isClientTheLeader,
+    subscribeToClientChange: typeof ActiveClientManager.subscribeToClientChange,
 };
 
 export default Onyx;