assign temporary ids, then update from server

(fixes #86)

packages/model/README.md

@@ -366,16 +366,20 @@ Returns a list of all pending form submissions in the outbox that are associated
 
 ### Update APIs
 
+#### `[model].create(item)`
+
+**New in wq.app 1.2.** Create a new record locally.  If no `id` is specified, one will be generated automatically by Redux-ORM.  Note that [@wq/outbox] should be used if the change is intended to be reflected on the server.
+
 #### `[model].update(items)`
-`update()` updates the locally stored list with new and updated items, using the model primary key to differentiate.  Any items that aren't found in the list will be appended.
+`update()` updates the locally stored list with new and/or updated items.  If ids already exist in the local store, the corresponding records are updated.  Otherwise, new records are created.
 
 ```javascript
 var newItem = {'id': 35, 'name': "New Item"};
 var items = [newItem];
 myModel.update(items);
 ```
 
-Note that `[model].update()` is not designed to automatically publish local changes to a remote database.  Instead, [@wq/outbox] can be used to sync changes back to the server.  The typical workflow (configured automatically by [@wq/app]) is to have each `<form>` submission be processed by [@wq/outbox], which will sync the form data to the server and then update any local models with the newly saved data.
+Note that `[model].update()` is not designed to automatically publish local changes to a remote database.  Instead, [@wq/outbox] can be used to handle form submissions and other server-bound updates.  By default, @wq/outbox does not update the local model until the form is successfully synced to the server.  As of wq.app 1.2, @wq/outbox can also optimistically apply the local update immediately, and then sync to the server.
 
 > **Changed in wq.app 1.2:**  update() no longer accepts a custom id column as the second argument.  If the primary key is not `"id"`, specify `idCol` when defining the model.
 
@@ -408,13 +412,13 @@ Completely replace the current locally stored data with a new set of items.
 myModel.overwrite([]);
 ```
 
-#### `[model].dispatch(type, payload)`
+#### `[model].dispatch(type, payload[, meta])`
 
 Constructs and immediately dispatches a Redux action appropriate for the model.  The type argument will be expanded to `ORM_{model}_{type}`.  The built-in reducer recognizes the following actions:
 
 name | effect
 -------|----------------
-`ORM_{model}_CREATE` | Create a new item with the specified object.  If there is no `id` attribute, one will be generated automatically by Redux-ORM.  (Note that this action is not currently used by @wq/app, as IDs are always generated by the server).
+`ORM_{model}_CREATE` | Create a new item with the specified object.  If there is no `id` attribute, one will be generated automatically by Redux-ORM.  Called internally by `[model].create()`
 `ORM_{model}_UPDATE` | Upsert (update or insert) an array of items into the model.  Called internally by `[model].update()`.
 `ORM_{model}_DELETE` | Delete the item with the specified id.  Called internally by `[model].remove()`.
 `ORM_{model}_OVERWRITE` | Replace the entire dataset with a new array of items.  Called internally by `[model].overwrite()`.

packages/model/src/__tests__/model.js

@@ -19,6 +19,11 @@ var itemtypes = model({
     store: ds,
     cache: 'all'
 });
+var localmodel = model({
+    name: 'localmodel',
+    store: ds
+});
+
 ds.init({
     service: 'http://localhost:8080/tests',
     defaults: {
@@ -107,3 +112,73 @@ test('filter by boolean & non-boolean', async () => {
     expect(types1).toHaveLength(1);
     expect(types1).toEqual(types2);
 });
+
+test('create', async () => {
+    await localmodel.overwrite([]);
+
+    // Update is really upsert
+    await localmodel.update([
+        { id: 1, label: 'Test 1' },
+        { id: 2, label: 'Test 2' }
+    ]);
+    expect(await localmodel.info()).toEqual({
+        count: 2,
+        pages: 1,
+        per_page: 2
+    });
+
+    await localmodel.create({ label: 'Test 3' });
+    expect(await localmodel.load()).toEqual({
+        count: 3,
+        pages: 1,
+        per_page: 3,
+        list: [
+            { id: 3, label: 'Test 3' },
+            { id: 2, label: 'Test 2' },
+            { id: 1, label: 'Test 1' }
+        ]
+    });
+});
+
+test('update', async () => {
+    await localmodel.overwrite([]);
+    await localmodel.create({ id: 1, label: 'Test 1' });
+    await localmodel.update([{ id: 1, label: 'Update Test 1' }]);
+    expect(await localmodel.info()).toEqual({
+        count: 1,
+        pages: 1,
+        per_page: 1
+    });
+    expect(await localmodel.find(1)).toEqual({
+        id: 1,
+        label: 'Update Test 1'
+    });
+});
+
+test('update - change ID', async () => {
+    await localmodel.overwrite([]);
+    await localmodel.create({ id: 'local-1', label: 'Test 1' });
+    await localmodel.dispatch(
+        'UPDATE',
+        { id: 1234, label: 'Update Test 1' },
+        { currentId: 'local-1' }
+    );
+    expect(await localmodel.load()).toEqual({
+        count: 1,
+        pages: 1,
+        per_page: 1,
+        list: [{ id: 1234, label: 'Update Test 1' }]
+    });
+});
+
+test('delete', async () => {
+    await localmodel.overwrite([]);
+    await localmodel.create({ id: 1, label: 'Test 1' });
+    await localmodel.remove(1);
+    expect(await localmodel.load()).toEqual({
+        count: 0,
+        pages: 1,
+        per_page: 0,
+        list: []
+    });
+});

packages/model/src/model.js

@@ -10,6 +10,7 @@ const _orms = {};
 
 const CREATE = 'CREATE',
     UPDATE = 'UPDATE',
+    SUCCESS = 'SUCCESS',
     DELETE = 'DELETE',
     OVERWRITE = 'OVERWRITE';
 
@@ -40,29 +41,45 @@ class ORMWithReducer extends ORM {
         if (!cls) {
             return session.state;
         }
+        const currentCount = cls.count();
+        let updateCount;
 
         switch (actName) {
             case CREATE: {
                 cls.create(action.payload);
+                updateCount = true;
                 break;
             }
-            case UPDATE: {
+            case UPDATE:
+            case SUCCESS: {
                 const items = Array.isArray(action.payload)
                     ? action.payload
                     : [action.payload];
-                items.forEach(item => cls.upsert(item));
-                const meta = session._modelmeta.withId(cls.modelName);
-                if (meta) {
-                    var update = { count: meta.count + 1 };
-                    if (meta.pages === 1 && meta.per_page === meta.count) {
-                        update.per_page = update.count;
+
+                if (
+                    action.meta &&
+                    action.meta.currentId &&
+                    action.meta.currentId != items[0].id
+                ) {
+                    const exist = cls.withId(action.meta.currentId);
+                    if (exist) {
+                        // See redux-orm #176
+                        cls.create({
+                            ...exist.ref,
+                            id: items[0].id
+                        });
+                        exist.delete();
                     }
-                    meta.update(update);
                 }
+                items.forEach(item => cls.upsert(item));
+
+                updateCount = true;
+
                 break;
             }
             case DELETE: {
                 cls.withId(action.payload).delete();
+                updateCount = true;
                 break;
             }
             case OVERWRITE: {
@@ -77,6 +94,26 @@ class ORMWithReducer extends ORM {
             }
         }
 
+        if (updateCount) {
+            const meta = session._modelmeta.withId(cls.modelName);
+            if (meta) {
+                // Use delta in case server count != local count.
+                const countChange = cls.count() - currentCount,
+                    update = { count: meta.count + countChange };
+                if (meta.pages === 1 && meta.per_page === meta.count) {
+                    update.per_page = update.count;
+                }
+                meta.update(update);
+            } else {
+                session._modelmeta.create({
+                    id: cls.modelName,
+                    pages: 1,
+                    count: cls.count(),
+                    per_page: cls.count()
+                });
+            }
+        }
+
         return session.state;
     }
 }
@@ -211,11 +248,14 @@ class Model {
         return `${this.orm.prefix}_${this.name.toUpperCase()}_${type}`;
     }
 
-    dispatch(type, payload) {
+    dispatch(type, payload, meta) {
         const action = {
             type: this.expandActionType(type),
             payload: payload
         };
+        if (meta) {
+            action.meta = meta;
+        }
         return this.store.dispatch(action);
     }
 
@@ -426,16 +466,18 @@ class Model {
         return data.list;
     }
 
+    // Create new item
+    async create(object) {
+        this.dispatch(CREATE, object);
+    }
+
     // Merge new/updated items into list
     async update(update, idCol) {
         if (idCol) {
             throw new Error(
                 'Usage: update(items).  To customize id attr use config.idCol'
             );
         }
-        if (!Array.isArray(update)) {
-            throw new Error('Data is not an array!');
-        }
         return this.dispatch(UPDATE, update);
     }
 

packages/outbox/README.md

@@ -5,7 +5,7 @@
 
 **@wq/outbox** is a [wq.app] module providing an offline-cabable "outbox" of unsynced form entries for submission to a web service.  @wq/outbox integrates with [@wq/store] to handle offline storage, and with [@wq/model] for managing collections of editable objects.
 
-By default, @wq/outbox is designed to sync form submissions to the server *before* reflecting the same changes in the local @wq/model state.  Accordingly, [@wq/app] is configured to show unsynced outbox records at the top of model list views and/or in a separate screen.  As of wq.app 1.2, it is also possible to configure @wq/outbox to apply all changes to the local @wq/model state *immediately*, with syncing happening entirely in the background.
+By default, @wq/outbox does not apply changes to the local @wq/model state until *after* form submissions are succesfully synced to the server.  Accordingly, [@wq/app] is configured to show unsynced outbox records at the top of model list views and/or in a separate screen.  As of wq.app 1.2, it is also possible to configure @wq/outbox to optimistically apply @wq/model changes *immediately*, with syncing happening in the background.
 
 As of wq.app 1.2, @wq/outbox is based on [Redux Offline], and leverages its strategies for detecting network state and retrying failed submissions.  Most notably, Redux Offline schedules sync attempts automatically, whereas @wq/outbox in wq.app 1.1 and earlier relied on @wq/app to manage the sync interval.
 
@@ -196,12 +196,12 @@ When `applyState` is set to `"IMMEDIATE"`, form submissions are reflected in the
 
 Form Type | Submit Action | Commit Action | Rollback Action
 ----------|---------------|---------------|------------------
-@wq/model (POST, PUT) | `ORM_{model}_UPDATE`* | `ORM_{model}_SUCCESS` | `ORM_{model}_ERROR`
+@wq/model (POST, PUT) | `ORM_{model}_UPDATE`* | `ORM_{model}_SUCCESS`* | `ORM_{model}_ERROR`
 @wq/model (DELETE) | `ORM_{model}_DELETE`* | `ORM_{model}_DELETESUCCESS` | `ORM_{model}_DELETEERROR`
 
-Note that if the request fails, there is currently no code to process the Rollback Action (e.g. to revert the local change).
+If the record does not already have a server-assigned ID, a temporary local id will be generated.  When `ORM_{model}_SUCCESS` is dispatched, the local record will be updated with the new ID from the server.
 
-> FIXME: Still need to define how local IDs are assigned and how they are updated once the item is synced.
+Note that if the request fails, there is currently no code to process the Rollback Action (e.g. to revert the local change).
 
 ###### applyState = LOCAL_ONLY