Call setupInstance before storing data.

marshallswain · marshallswain · commit 9cc1ae6d2235 · 2019-07-21T00:16:19.000-07:00
This update is for scenarios when using Model classes.  Any incoming data will be converted to Model instances before it is added to the store.  This also makes it so that the model data is setup properly when updates are received from the API server.
diff --git a/src/service-module/make-model.ts b/src/service-module/make-model.ts
@@ -94,13 +94,15 @@ export default function makeModel(options: FeathersVuexOptions) {
 
       data = data || {}
 
+      const existingItem = hasValidId && !options.clone
+        ? getFromStore.call(this.constructor, id)
+        : null
+
       // If it already exists, update the original and return
-      if (hasValidId && !options.clone) {
-        const existingItem = getFromStore.call(this.constructor, id)
-        if (existingItem) {
-          _commit.call(this.constructor, 'updateItem', data)
-          return existingItem
-        }
+      if (existingItem) {
+        data = setupInstance.call(this, data, { models, store }) || data
+        _commit.call(this.constructor, 'mergeInstance', data)
+        return existingItem
       }
 
       // Mark as a clone
@@ -111,7 +113,7 @@ export default function makeModel(options: FeathersVuexOptions) {
         })
       }
 
-      // Setup instanceDefaults, separate out accessors
+      // Setup instanceDefaults
       if (instanceDefaults && typeof instanceDefaults === 'function') {
         const defaults = instanceDefaults.call(this, data, { models, store }) || data
         mergeWithAccessors(this, defaults)
diff --git a/src/service-module/service-module.actions.ts b/src/service-module/service-module.actions.ts
@@ -8,7 +8,7 @@ import { getId } from '../utils'
 
 export default function makeServiceActions(service) {
   const serviceActions = {
-    find({ commit, dispatch }, params) {
+    async find({ commit, dispatch }, params) {
       params = params || {}
       params = fastCopy(params)
 
@@ -23,7 +23,7 @@ export default function makeServiceActions(service) {
     // Two query syntaxes are supported, since actions only receive one argument.
     //   1. Just pass the id: `get(1)`
     //   2. Pass arguments as an array: `get([null, params])`
-    get({ state, getters, commit, dispatch }, args) {
+    async get({ state, getters, commit, dispatch }, args) {
       let id
       let params
       let skipRequestIfExists
@@ -49,8 +49,8 @@ export default function makeServiceActions(service) {
         commit('setPending', 'get')
         return service
           .get(id, params)
-          .then(item => {
-            dispatch('addOrUpdate', item)
+          .then(async item => {
+            await dispatch('addOrUpdate', item)
             commit('unsetPending', 'get')
             return state.keyedById[id]
           })
@@ -62,15 +62,14 @@ export default function makeServiceActions(service) {
       }
 
       // If the records is already in store, return it
-      const existedItem = getters.get(id, params)
-      if (existedItem) {
-        if (!skipRequestIfExists) getFromRemote()
-        return Promise.resolve(existedItem)
+      const existingItem = getters.get(id, params)
+      if (existingItem && skipRequestIfExists) {
+        return Promise.resolve(existingItem)
       }
       return getFromRemote()
     },
 
-    create({ commit, dispatch, state }, dataOrArray) {
+    async create({ commit, dispatch, state }, dataOrArray) {
       const { idField, tempIdField } = state
       let data
       let params
@@ -97,9 +96,9 @@ export default function makeServiceActions(service) {
 
       return service
         .create(data, params)
-        .then(response => {
+        .then(async response => {
           if (Array.isArray(response)) {
-            dispatch('addOrUpdateList', response)
+            await dispatch('addOrUpdateList', response)
             response = response.map(item => {
               const id = getId(item, idField)
 
@@ -108,7 +107,7 @@ export default function makeServiceActions(service) {
           } else {
             const id = getId(response, idField)
 
-            dispatch('addOrUpdate', response)
+            await dispatch('addOrUpdate', response)
 
             response = state.keyedById[id]
           }
@@ -123,16 +122,16 @@ export default function makeServiceActions(service) {
         })
     },
 
-    update({ commit, dispatch, state }, [id, data, params]) {
+    async update({ commit, dispatch, state }, [id, data, params]) {
 
       commit('setPending', 'update')
 
       params = fastCopy(params)
 
       return service
         .update(id, data, params)
-        .then(item => {
-          dispatch('addOrUpdate', item)
+        .then(async item => {
+          await dispatch('addOrUpdate', item)
           commit('unsetPending', 'update')
           return state.keyedById[id]
         })
@@ -143,7 +142,7 @@ export default function makeServiceActions(service) {
         })
     },
 
-    patch({ commit, dispatch, state }, [id, data, params]) {
+    async patch({ commit, dispatch, state }, [id, data, params]) {
       commit('setPending', 'patch')
 
       params = fastCopy(params)
@@ -154,8 +153,8 @@ export default function makeServiceActions(service) {
 
       return service
         .patch(id, data, params)
-        .then(item => {
-          dispatch('addOrUpdate', item)
+        .then(async item => {
+          await dispatch('addOrUpdate', item)
           commit('unsetPending', 'patch')
           return state.keyedById[id]
         })
@@ -166,7 +165,7 @@ export default function makeServiceActions(service) {
         })
     },
 
-    remove({ commit }, idOrArray) {
+    async remove({ commit }, idOrArray) {
       let id
       let params
 
@@ -206,11 +205,11 @@ export default function makeServiceActions(service) {
      *         Feathers client.  The client modifies the params object.
      *   @param response
      */
-    handleFindResponse({ state, commit, dispatch }, { params, response }) {
+    async handleFindResponse({ state, commit, dispatch }, { params, response }) {
       const { qid = 'default', query } = params
       const { idField } = state
 
-      dispatch('addOrUpdateList', response)
+      await dispatch('addOrUpdateList', response)
       commit('unsetPending', 'find')
 
       const mapItemFromState = item => {
@@ -232,17 +231,22 @@ export default function makeServiceActions(service) {
           : (response = mappedFromState)
       }
 
-      dispatch('afterFind', response)
+      response = await await dispatch('afterFind', response)
 
       return response
     },
-    handleFindError({ commit }, { params, error }) {
+
+    async handleFindError({ commit }, { params, error }) {
       commit('setError', { method: 'find', params, error })
       commit('unsetPending', 'find')
       return Promise.reject(error)
     },
-    afterFind() {},
-    addOrUpdateList({ state, commit }, response) {
+
+    async afterFind({}, response) {
+      return response
+    },
+
+    async addOrUpdateList({ state, commit }, response) {
       const list = response.data || response
       const isPaginated = response.hasOwnProperty('total')
       const toAdd = []
@@ -282,8 +286,11 @@ export default function makeServiceActions(service) {
 
       commit('addItems', toAdd)
       commit('updateItems', toUpdate)
+
+      return response
     },
-    addOrUpdate({ state, commit }, item) {
+
+    async addOrUpdate({ state, commit }, item) {
       const { idField } = state
       let id = getId(item, idField)
       let existingItem = state.keyedById[id]
@@ -300,8 +307,12 @@ export default function makeServiceActions(service) {
       if (isIdOk) {
         existingItem ? commit('updateItem', item) : commit('addItem', item)
       }
+      return item
     }
   }
+  /**
+   * Only add a method to the store if the service actually has that same method.
+   */
   Object.keys(serviceActions).map(method => {
     if (service[method] && typeof service[method] === 'function') {
       actions[method] = serviceActions[method]
diff --git a/src/service-module/service-module.mutations.ts b/src/service-module/service-module.mutations.ts
@@ -59,7 +59,7 @@ export default function makeServiceMutations() {
   function updateItems(state, items) {
     const { idField, replaceItems, addOnUpsert, serverAlias, modelName } = state
     const Model = _get(models, `[${serverAlias}][${modelName}]`)
-    // const BaseModel = _get(models, `[${state.serverAlias}].BaseModel`)
+    const BaseModel = _get(models, `[${state.serverAlias}].BaseModel`)
 
     for (let item of items) {
       const id = getId(item, idField)
@@ -71,18 +71,6 @@ export default function makeServiceMutations() {
 
       // Update the record
       if (id !== null && id !== undefined) {
-
-
-
-
-        // if (Model && !(item instanceof BaseModel) && !(item instanceof Model)) {
-        //   item = new Model(item)
-        // }
-
-
-
-
-
         if (state.ids.includes(id)) {
           // Completely replace the item
           if (replaceItems) {
@@ -92,6 +80,16 @@ export default function makeServiceMutations() {
             Vue.set(state.keyedById, id, item)
             // Merge in changes
           } else {
+            /**
+             * If we have a Model class, calling new Model(incomingData) will call update
+             * the original record with the accessors and setupInstance data.
+             * This means that date objects and relationships will be preserved.
+             *
+             * If there's no Model class, just call updateOriginal on the incoming data.
+             */
+            if (Model && !(item instanceof BaseModel) && !(item instanceof Model)) {
+              item = new Model(item)
+            }
             const original = state.keyedById[id]
             updateOriginal(original, item)
           }
@@ -106,7 +104,17 @@ export default function makeServiceMutations() {
     }
   }
 
+  function mergeInstance(state, item) {
+    const { serverAlias, idField, tempIdField, modelName } = state
+    const id = getId(item, idField)
+    const existingItem = state.keyedById[id]
+    if (existingItem) {
+      mergeWithAccessors(existingItem, item)
+    }
+  }
+
   return {
+    mergeInstance,
     addItem(state, item) {
       addItems(state, [item])
     },
diff --git a/test/service-module/service-module.actions.test.ts b/test/service-module/service-module.actions.test.ts
@@ -552,7 +552,7 @@ describe('Service Module - Actions', () => {
   })
 
   describe('Get', function () {
-    it('updates store list state on service success', done => {
+    it('updates store list state on service success', async () => {
       const { makeServicePlugin, Todo } = makeContext()
       const store = new Vuex.Store<RootState>({
         plugins: [
@@ -571,68 +571,47 @@ describe('Service Module - Actions', () => {
       assert(todoState.isGetPending === false)
       assert(todoState.idField === 'id')
 
-      actions.get.call({ $store: store }, 0).then(() => {
-        assert(todoState.ids.length === 1, 'only one item is in the store')
-        assert(todoState.errorOnGet === null, 'there was no errorOnGet')
-        assert(todoState.isGetPending === false, 'isGetPending is set to false')
-
-        let expectedKeyedById: NumberedList = {
-          0: { id: 0, description: 'Do the first' }
-        }
-        assert.deepEqual(
-          JSON.parse(JSON.stringify(todoState.keyedById)),
-          expectedKeyedById
-        )
-
-        // Make a request with the array syntax that allows passing params
-        actions.get.call({ $store: store }, [1, {}]).then(response2 => {
-          expectedKeyedById = {
-            0: { id: 0, description: 'Do the first' },
-            1: { id: 1, description: 'Do the second' }
-          }
-          assert(response2.description === 'Do the second')
-          assert.deepEqual(
-            JSON.parse(JSON.stringify(todoState.keyedById)),
-            expectedKeyedById
-          )
+      const todo1 = await actions.get.call({ $store: store }, 0)
+      assert(todoState.ids.length === 1, 'only one item is in the store')
+      assert(todoState.errorOnGet === null, 'there was no errorOnGet')
+      assert(todoState.isGetPending === false, 'isGetPending is set to false')
 
-          // Make a request to an existing record and return the existing data first, then update `keyedById`
-          todoState.keyedById = {
-            0: { id: 0, description: 'Do the FIRST' }, // twist the data to see difference
-            1: { id: 1, description: 'Do the second' }
-          }
-          actions.get.call({ $store: store }, [0, {}]).then(response3 => {
-            expectedKeyedById = {
-              0: { id: 0, description: 'Do the FIRST' },
-              1: { id: 1, description: 'Do the second' }
-            }
-            assert(response3.description === 'Do the FIRST')
-            assert.deepEqual(
-              JSON.parse(JSON.stringify(todoState.keyedById)),
-              expectedKeyedById
-            )
+      let expectedKeyedById: NumberedList = {
+        0: { id: 0, description: 'Do the first' }
+      }
+      assert.deepEqual(
+        JSON.parse(JSON.stringify(todoState.keyedById)),
+        expectedKeyedById
+      )
 
-            // Wait for the remote data to arriive
-            setTimeout(() => {
-              expectedKeyedById = {
-                0: { id: 0, description: 'Do the first' },
-                1: { id: 1, description: 'Do the second' }
-              }
-              assert.deepEqual(
-                JSON.parse(JSON.stringify(todoState.keyedById)),
-                expectedKeyedById
-              )
-              done()
-            }, 100)
-          })
-        })
-      })
+      // Make a request with the array syntax that allows passing params
+      const response2 = await actions.get.call({ $store: store }, [1, {}])
+      expectedKeyedById = {
+        0: { id: 0, description: 'Do the first' },
+        1: { id: 1, description: 'Do the second' }
+      }
+      assert(response2.description === 'Do the second')
+      assert.deepEqual(
+        JSON.parse(JSON.stringify(todoState.keyedById)),
+        expectedKeyedById
+      )
 
-      // Make sure proper state changes occurred before response
-      assert(todoState.ids.length === 0)
-      assert(todoState.errorOnCreate === null)
-      assert(todoState.isGetPending === true)
-      assert.deepEqual(todoState.keyedById, {})
+    // Edit the first record in the store so the data is different.
+    // Make a request for the first record again, and it should be updated.
+      const clone1 = todo1.clone()
+      clone1.description = 'MODIFIED IN THE VUEX STORE'
+      clone1.commit()
+
+      assert.strictEqual(todoState.keyedById[0].description, clone1.description, 'the store instance was updated')
+
+      const response3 = await actions.get.call({ $store: store }, [0, {}])
+      const todo0 = Todo.getFromStore(0)
+      assert(response3.description === 'Do the first')
+      assert.deepEqual(
+        JSON.parse(JSON.stringify(todoState.keyedById)),
+        expectedKeyedById,
+        'The data is back as it was on the API server'
+      )
     })
 
     it('does not make remote call when skipRequestIfExists=true', done => {
