From bad6c95fa2a2e26f48e3510f9727d6f6195992fc Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Sat, 31 Dec 2016 09:55:07 +0100
Subject: [PATCH] have a random somewhat uid per entry for sort to work

---
 .../component/feature/form-add-container.jsx  |  1 +
 .../component/feature/form-edit-container.jsx |  8 +++++++-
 .../feature/form/strategies-list.jsx          |  2 +-
 .../feature/form/strategy-configure.jsx       | 20 +++++++++++++------
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/feature/form-add-container.jsx b/frontend/src/component/feature/form-add-container.jsx
index e153aee10c..cf2aca15e6 100644
--- a/frontend/src/component/feature/form-add-container.jsx
+++ b/frontend/src/component/feature/form-add-container.jsx
@@ -32,6 +32,7 @@ const prepare = (methods, dispatch) => {
     };
 
     methods.addStrategy = (v) => {
+        v.id = Math.round(Math.random() * 10000000);
         methods.pushToList('strategies', v);
     };
 
diff --git a/frontend/src/component/feature/form-edit-container.jsx b/frontend/src/component/feature/form-edit-container.jsx
index 7605b994af..f19d36c67a 100644
--- a/frontend/src/component/feature/form-edit-container.jsx
+++ b/frontend/src/component/feature/form-edit-container.jsx
@@ -13,7 +13,12 @@ function getId (props) {
 // best is to emulate the "input-storage"?
 const mapStateToProps = createMapper({
     id: getId,
-    getDefault: (state, ownProps) => ownProps.featureToggle,
+    getDefault: (state, ownProps) => {
+        ownProps.featureToggle.strategies.forEach((strategy, index) => {
+            strategy.id = Math.round(Math.random() * 1000000 * (1 + index));
+        });
+        return ownProps.featureToggle;
+    },
     prepare: (props) => {
         props.editmode = true;
         return props;
@@ -38,6 +43,7 @@ const prepare =  (methods, dispatch) => {
     };
 
     methods.addStrategy = (v) => {
+        v.id = Math.round(Math.random() * 10000000);
         methods.pushToList('strategies', v);
     };
 
diff --git a/frontend/src/component/feature/form/strategies-list.jsx b/frontend/src/component/feature/form/strategies-list.jsx
index 3bf2d8d84a..d8d752ae5f 100644
--- a/frontend/src/component/feature/form/strategies-list.jsx
+++ b/frontend/src/component/feature/form/strategies-list.jsx
@@ -32,7 +32,7 @@ class StrategiesList extends React.Component {
         const blocks = configuredStrategies.map((strategy, i) => (
             <ConfigureStrategy
                 index={i}
-                key={`${strategy.name}-${i}`}
+                key={strategy.id}
                 strategy={strategy}
                 moveStrategy={moveStrategy}
                 removeStrategy={removeStrategy.bind(null, i)}
diff --git a/frontend/src/component/feature/form/strategy-configure.jsx b/frontend/src/component/feature/form/strategy-configure.jsx
index 12e09944a2..d484169fe4 100644
--- a/frontend/src/component/feature/form/strategy-configure.jsx
+++ b/frontend/src/component/feature/form/strategy-configure.jsx
@@ -26,18 +26,26 @@ const helpText = {
 const dragSource = {
     beginDrag (props) {
         return {
+            id: props.id,
             index: props.index,
         };
     },
+    endDrag (props, monitor) {
+        if (!monitor.didDrop()) {
+            return;
+        }
+        const result = monitor.getDropResult();
+        if (typeof result.index === 'number' && props.index !== result.index) {
+            props.moveStrategy(props.index, result.index);
+        }
+    },
 };
 
 const dragTarget = {
-    drop (props, monitor) {
-        const dragIndex = monitor.getItem().index;
-        const toIndex = props.index;
-        if (dragIndex !== toIndex) {
-            props.moveStrategy(dragIndex, toIndex);
-        }
+    drop (props) {
+        return {
+            index: props.index,
+        };
     },
 };