Merge pull request #1406 from gzzhanghao/fix36

[web] Update view with sortedUpdate

6 files changed, 51 insertions, 19 deletions

diff --git a/web/src/js/__tests__/ducks/flowView.js b/web/src/js/__tests__/ducks/flowViewSpec.js
index d5d9a6d9..d5d9a6d9 100644
--- a/web/src/js/__tests__/ducks/flowView.js
+++ b/web/src/js/__tests__/ducks/flowViewSpec.js
diff --git a/web/src/js/__tests__/ducks/flows.js b/web/src/js/__tests__/ducks/flowsSpec.js
index 2b261cb1..2b261cb1 100644
--- a/web/src/js/__tests__/ducks/flows.js
+++ b/web/src/js/__tests__/ducks/flowsSpec.js
diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui/headerSpec.js
index d3242815..8968e636 100644
--- a/web/src/js/__tests__/ducks/ui.js
+++ b/web/src/js/__tests__/ducks/ui/headerSpec.js
@@ -1,10 +1,10 @@
-jest.unmock('../../ducks/ui')
-jest.unmock('../../ducks/flows')
+jest.unmock('../../../ducks/ui/header')
+jest.unmock('../../../ducks/flows')
 
-import reducer, { setActiveMenu } from '../../ducks/ui'
-import * as flowActions from '../../ducks/flows'
+import reducer, { setActiveMenu } from '../../../ducks/ui/header'
+import * as flowActions from '../../../ducks/flows'
 
-describe('ui reducer', () => {
+describe('header reducer', () => {
     it('should return the initial state', () => {
         expect(reducer(undefined, {}).activeMenu).toEqual('Start')
     })
diff --git a/web/src/js/__tests__/ducks/utils/list.js b/web/src/js/__tests__/ducks/utils/listSpec.js
index 72d162f2..72d162f2 100644
--- a/web/src/js/__tests__/ducks/utils/list.js
+++ b/web/src/js/__tests__/ducks/utils/listSpec.js
diff --git a/web/src/js/__tests__/ducks/utils/view.js b/web/src/js/__tests__/ducks/utils/viewSpec.js
index f0b147da..af3da173 100644
--- a/web/src/js/__tests__/ducks/utils/view.js
+++ b/web/src/js/__tests__/ducks/utils/viewSpec.js
@@ -66,11 +66,13 @@ describe('view reduce', () => {
     it('should update item', () => {
         const state = createState([
             { id: 1, val: 1 },
-            { id: 2, val: 2 }
+            { id: 2, val: 2 },
+            { id: 3, val: 3 }
         ])
         const result = createState([
             { id: 1, val: 1 },
-            { id: 2, val: 3 }
+            { id: 2, val: 3 },
+            { id: 3, val: 3 }
         ])
         expect(reduce(state, view.update({ id: 2, val: 3 }))).toEqual(result)
     })
diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js
index c00f00bd..6bf0a63e 100755
--- a/web/src/js/ducks/utils/view.js
+++ b/web/src/js/ducks/utils/view.js
@@ -54,21 +54,29 @@ export default function reduce(state = defaultState, action) {
             }
 
         case UPDATE:
-            if (state.indexOf[action.item.id] == null) {
-                return
+            let hasOldItem = state.indexOf[action.item.id] !== null && state.indexOf[action.item.id] !== undefined
+            let hasNewItem = action.filter(action.item)
+            if (!hasNewItem && !hasOldItem) {
+                return state
             }
-            const nextState = {
-                ...state,
-                ...sortedRemove(state, action.item.id),
+            if (hasNewItem && !hasOldItem) {
+                return {
+                    ...state,
+                    ...sortedInsert(state, action.item, action.sort)
+                }
             }
-            if (!action.filter(action.item)) {
-                return nextState
+            if (!hasNewItem && hasOldItem) {
+                return {
+                    ...state,
+                    ...sortedRemove(state, action.item.id)
+                }
             }
-            return {
-                ...nextState,
-                ...sortedInsert(nextState, action.item, action.sort)
+            if (hasNewItem && hasOldItem) {
+                return {
+                    ...state,
+                    ...sortedUpdate(state, action.item, action.sort),
+                }
             }
-
         case RECEIVE:
         {
             const data = action.list.filter(action.filter).sort(action.sort)
@@ -110,7 +118,7 @@ export function receive(list, filter = defaultFilter, sort = defaultSort) {
 
 function sortedInsert(state, item, sort) {
     const index = sortedIndex(state.data, item, sort)
-    const data = [...state.data]
+    const data = [ ...state.data ]
     const indexOf = { ...state.indexOf }
 
     data.splice(index, 0, item)
@@ -134,6 +142,28 @@ function sortedRemove(state, id) {
     return { data, indexOf }
 }
 
+function sortedUpdate(state, item, sort) {
+    let data = [ ...state.data ]
+    let indexOf = { ...state.indexOf }
+    let index = indexOf[item.id]
+    data[index] = item
+    while (index + 1 < data.length && sort(data[index], data[index + 1]) > 0) {
+        data[index] = data[index + 1]
+        data[index + 1] = item
+        indexOf[item.id] = index + 1
+        indexOf[data[index].id] = index
+        ++index
+    }
+    while (index > 0 && sort(data[index], data[index - 1]) < 0) {
+        data[index] = data[index - 1]
+        data[index - 1] = item
+        indexOf[item.id] = index - 1
+        indexOf[data[index].id] = index
+        --index
+    }
+    return { data, indexOf }
+}
+
 function sortedIndex(list, item, sort) {
     let low = 0
     let high = list.length