feat: debounceEvents

Author: fratzinger

src/service-module/make-service-plugin.ts

@@ -6,8 +6,14 @@ eslint
 import { FeathersVuexOptions, MakeServicePluginOptions } from './types'
 import makeServiceModule from './make-service-module'
 import { globalModels, prepareAddModel } from './global-models'
-import { makeNamespace, getServicePath, assignIfNotPresent } from '../utils'
+import {
+  makeNamespace,
+  getServicePath,
+  assignIfNotPresent,
+  getId
+} from '../utils'
 import _get from 'lodash/get'
+import _debounce from 'lodash/debounce'
 
 interface ServiceOptionsDefaults {
   servicePath: string
@@ -118,6 +124,42 @@ export default function prepareMakeServicePlugin(
       }
       addModel(Model)
 
+      const debounceMap = {
+        addOrUpdateById: {},
+        removeItemById: {},
+        addOrUpdate(item) {
+          const id = getId(item, options.idField)
+          this.addOrUpdateById[id] = item
+          if (this.removeItemById.hasOwnProperty(id)) {
+            delete this.removeItemById[id]
+          }
+          this.debouncedAddOrUpdate()
+        },
+        removeItem(item) {
+          const id = getId(item, options.idField)
+          this.removeItemById[id] = item
+          if (this.addOrUpdateById.hasOwnProperty(id)) {
+            delete this.addOrUpdateById[id]
+          }
+          this.debouncedRremoveItem()
+        },
+        debouncedAddOrUpdate: _debounce(async function () {
+          const values = Object.values(this.addOrUpdateById)
+          if (values.length === 0) return
+          await store.dispatch(`${options.namespace}/addOrUpdateList`, {
+            data: values,
+            disableRemove: true
+          })
+          this.addOrUpdateById = {}
+        }, options.debounceEventsTime || 20),
+        debouncedRremoveItem: _debounce(function () {
+          const values = Object.values(this.removeItemById)
+          if (values.length === 0) return
+          store.commit(`${options.namespace}/removeItems`, values)
+          this.removeItemById = {}
+        }, options.debounceEventsTime || 20)
+      }
+
       // (3^) Setup real-time events
       if (options.enableEvents) {
         const handleEvent = (eventName, item, mutationName) => {
@@ -130,9 +172,19 @@ export default function prepareMakeServicePlugin(
             ? confirmOrArray
             : [confirmOrArray]
           if (affectsStore) {
-            eventName === 'removed'
-              ? store.commit(`${options.namespace}/removeItem`, modified)
-              : store.dispatch(`${options.namespace}/${mutationName}`, modified)
+            if (!options.debounceEventsTime) {
+              eventName === 'removed'
+                ? store.commit(`${options.namespace}/removeItem`, modified)
+                : store.dispatch(
+                    `${options.namespace}/${mutationName}`,
+                    modified
+                  )
+            } else {
+              const id = getId(item, options.idField)
+              eventName === 'removed'
+                ? debounceMap.removeItem(item)
+                : debounceMap.addOrUpdate(item)
+            }
           }
         }