implemented a simple draft of how optimistic operations could look like in DataSync

The latency from the US to the IHP Backend server is just too much for me

Author: mpscholten

lib/IHP/DataSync/ihp-datasync.js

@@ -38,6 +38,11 @@ class DataSyncController {
         // We store messages here that cannot be send because the connection is not available
         this.outbox = [];
         this.reconnectTimeout = null;
+
+        this.dataSubscriptions = [];
+
+        // Ids of records that are visible in the UI already, but yet still have to be confirmed by the server
+        this.optimisticCreatedPendingRecordIds = [];
     }
 
     async startConnection() {
@@ -205,15 +210,16 @@ class DataSubscription {
         this.onDataSyncReconnect = this.onDataSyncReconnect.bind(this);
         this.onMessage = this.onMessage.bind(this);
 
-
         // When a new record is inserted, do we put it at the end or at the beginning?
         this.newRecordBehaviour = this.detectNewRecordBehaviour();
+        
+        this.optimisticCreatedPendingRecordIds = [];
     }
 
     detectNewRecordBehaviour() {
         // If the query is ordered by the createdAt column, and the latest is at the top
         // we want to prepend new record
-        const isOrderByCreatedAtDesc = this.query.orderByClause.length > 0 && this.query.orderByClause[0].orderByColumn === 'createdAt' && this.query.orderByClause[0].orderByDirection === 'Desc';
+        const isOrderByCreatedAtDesc = this.query.orderByClause.length > 0 && this.query.orderByClause[0].orderByColumn === 'createdAt' && this.query.orderByClause[0].orderByColumn === 'createdAt';
 
         if (isOrderByCreatedAtDesc) {
             return PREPEND_NEW_RECORD;
@@ -236,6 +242,7 @@ class DataSubscription {
                 dataSyncController.addEventListener('message', this.onMessage);
                 dataSyncController.addEventListener('close', this.onDataSyncClosed);
                 dataSyncController.addEventListener('reconnect', this.onDataSyncReconnect);
+                dataSyncController.dataSubscriptions.push(this);
             }
 
             this.isConnected = true;
@@ -289,6 +296,7 @@ class DataSubscription {
         dataSyncController.removeEventListener('message', this.onMessage);
         dataSyncController.removeEventListener('close', this.onDataSyncClosed);
         dataSyncController.removeEventListener('reconnect', this.onDataSyncReconnect);
+        dataSyncController.dataSubscriptions.splice(dataSyncController.dataSubscriptions.indexOf(this), 1);
 
         this.isClosed = true;
         this.isConnected = false;
@@ -319,10 +327,27 @@ class DataSubscription {
 
     onCreate(newRecord) {
         const shouldAppend = this.newRecordBehaviour === APPEND_NEW_RECORD;
-        this.records = shouldAppend ? [...this.records, newRecord] : [newRecord, ...this.records];
+
+        const isOptimisticallyCreatedAlready = this.optimisticCreatedPendingRecordIds.indexOf(newRecord.id) !== -1;
+        if (isOptimisticallyCreatedAlready) {
+            this.onUpdate(newRecord.id, newRecord);
+            this.optimisticCreatedPendingRecordIds.slice(this.optimisticCreatedPendingRecordIds.indexOf(newRecord.id), 1);
+        } else {
+            this.records = shouldAppend ? [...this.records, newRecord] : [newRecord, ...this.records];
+        }
+
         this.updateSubscribers();
     }
 
+    onCreateOptimistic(newRecord) {
+        if (!('id' in newRecord)) {
+            throw new Error('Requires the record to have an id');
+        }
+
+        this.onCreate(newRecord);
+        this.optimisticCreatedPendingRecordIds.push(newRecord.id);
+    }
+
     onDelete(id) {
         this.records = this.records.filter(record => record.id !== id);
         this.updateSubscribers();
@@ -391,9 +416,14 @@ export async function createRecord(table, record, options = {}) {
     const request = { tag: 'CreateRecordMessage', table, record, transactionId };
 
     try {
+        createOptimisticRecord(table, record);
+        await waitPendingChanges(table, record);
+
         const response = await DataSyncController.getInstance().sendMessage(request);
         return response.record;
     } catch (e) {
+        undoCreateOptimisticRecord(table, record);
+
         // We rethrow the error here for improved callstacks
         // Without this, the error location in the callstack would show the error to be caused
         // somewhere in DataSyncController. But the user is not really using DataSyncController
@@ -459,11 +489,13 @@ export async function deleteRecord(table, id, options = {}) {
     const transactionId = 'transactionId' in options ? options.transactionId : null;
     const request = { tag: 'DeleteRecordMessage', table, id, transactionId };
 
+    let undoOptimisticDeleteRecord = deleteRecordOptimistic(table, id);;
     try {
         const response = await DataSyncController.getInstance().sendMessage(request);
 
         return;
     } catch (e) {
+        undoOptimisticDeleteRecord();
         throw new Error(e.message);
     }
 }
@@ -508,4 +540,99 @@ export async function createRecords(table, records, options = {}) {
     }
 }
 
+function createOptimisticRecord(table, record) {
+    // Ensure that the record has an ID
+    if (record.id === null || record.id === undefined) {
+        record.id = crypto.randomUUID();
+    }
+    if (record.createdAt === null || record.createdAt === undefined) {
+        record.createdAt = new Date();
+    }
+
+    const dataSyncController = DataSyncController.getInstance();
+    for (const dataSubscription of dataSyncController.dataSubscriptions) {
+        if (dataSubscription.query.table !== table) {
+            continue;
+        }
+
+        // TODO: we need to check that this data subscription's WHERE condition matches the new record
+        dataSubscription.onCreateOptimistic(record);
+    }
+
+    dataSyncController.optimisticCreatedPendingRecordIds.push(record.id);
+}
+
+function undoCreateOptimisticRecord(table, record) {
+    const dataSyncController = DataSyncController.getInstance();
+    for (const dataSubscription of dataSyncController.dataSubscriptions) {
+        if (dataSubscription.query.table !== table) {
+            continue;
+        }
+
+        dataSubscription.onDelete(record.id);
+    }
+
+    dataSyncController.optimisticCreatedPendingRecordIds.slice(dataSyncController.optimisticCreatedPendingRecordIds.indexOf(record.id), 1);
+}
+
+function deleteRecordOptimistic(table, id) {
+    const dataSyncController = DataSyncController.getInstance();
+    const undoOperations = [];
+    for (const dataSubscription of dataSyncController.dataSubscriptions) {
+        if (dataSubscription.query.table !== table) {
+            continue;
+        }
+
+        const deletedRecord = dataSubscription.records.find(record => record.id === id);
+        if (deletedRecord) {
+            dataSubscription.onDelete(id);
+            undoOperations.push(() => dataSubscription.onCreate(deleteRecord));
+        }
+    }
+
+    return () => {
+        for (const undoOperation of undoOperations) {
+            undoOperation();
+        }
+    }
+}
+
+
+function doesRecordReferencePendingOptimisticRecord(record) {
+    const dataSyncController = DataSyncController.getInstance();
+    const optimisticIds = dataSyncController.optimisticCreatedPendingRecordIds;
+
+    for (const attribute in record) {
+        if (attribute === 'id') {
+            continue; // The current record's id is always optimistic
+        }
+        if (optimisticIds.indexOf(record[attribute]) !== -1) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+async function waitPendingChanges(table, record) {
+    if (doesRecordReferencePendingOptimisticRecord(record)) {
+        return waitForMessageMatching(message => message.tag === 'DidCreateRecord' && message.record && message.record.id === record.id);
+    }
+}
+
+function waitForMessageMatching(condition) {
+    const dataSyncController = DataSyncController.getInstance();
+        
+    return new Promise((resolve, reject) => {
+        const callback = () => {
+            if (condition()) {
+                dataSyncController.removeEventListener('message', callback);        
+                resolve();
+            }
+        }
+
+        dataSyncController.addEventListener('message', callback);
+    });
+}
+
 export { DataSyncController, DataSubscription, initIHPBackend };