From 107cc0636f9bbfe0c19336c8f8e6a8b35b09f64a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Tue, 9 Feb 2021 21:56:49 +0100
Subject: [PATCH] fix: should not register duplicate HTML5 backends

---
 .../src/component/common/drag-and-drop.jsx     | 18 ++++++++++++++++++
 .../feature/create/add-feature-container.jsx   |  1 +
 .../strategy/strategies-list-add-component.jsx |  8 +++-----
 .../strategy/strategies-list-component.jsx     |  7 +++----
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/component/common/drag-and-drop.jsx

diff --git a/frontend/src/component/common/drag-and-drop.jsx b/frontend/src/component/common/drag-and-drop.jsx
new file mode 100644
index 0000000000..97f6e3f61f
--- /dev/null
+++ b/frontend/src/component/common/drag-and-drop.jsx
@@ -0,0 +1,18 @@
+import { DndProvider, createDndContext } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import React, { useRef } from 'react';
+
+const RNDContext = createDndContext(HTML5Backend);
+
+function useDNDProviderElement(props) {
+    const manager = useRef(RNDContext);
+
+    if (!props.children) return null;
+
+    return <DndProvider manager={manager.current.dragDropManager}>{props.children}</DndProvider>;
+}
+
+export default function DragAndDrop(props) {
+    const DNDElement = useDNDProviderElement(props);
+    return <React.Fragment>{DNDElement}</React.Fragment>;
+}
diff --git a/frontend/src/component/feature/create/add-feature-container.jsx b/frontend/src/component/feature/create/add-feature-container.jsx
index 0204dee4b6..7003785b5c 100644
--- a/frontend/src/component/feature/create/add-feature-container.jsx
+++ b/frontend/src/component/feature/create/add-feature-container.jsx
@@ -29,6 +29,7 @@ class WrapperComponent extends Component {
                 name,
                 description: '',
                 type: 'release',
+                stale: false,
                 strategies: [],
                 variants: [],
                 enabled: true,
diff --git a/frontend/src/component/feature/strategy/strategies-list-add-component.jsx b/frontend/src/component/feature/strategy/strategies-list-add-component.jsx
index 6838b38380..0a28ea4497 100644
--- a/frontend/src/component/feature/strategy/strategies-list-add-component.jsx
+++ b/frontend/src/component/feature/strategy/strategies-list-add-component.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import arrayMove from 'array-move';
 
 import ConfigureStrategy from './strategy-configure-container';
 import AddStrategy from './strategies-add';
 import { HeaderTitle } from '../../common';
+import DragAndDrop from '../../common/drag-and-drop';
 import { updateIndexInArray } from '../../common/util';
 import styles from './strategy.module.scss';
 
@@ -57,7 +55,7 @@ const StrategiesList = props => {
         />
     ));
     return (
-        <DndProvider backend={HTML5Backend}>
+        <DragAndDrop>
             <div className={styles.strategyListAdd}>
                 <HeaderTitle
                     title="Activation strategies"
@@ -82,7 +80,7 @@ const StrategiesList = props => {
                     )}
                 </div>
             </div>
-        </DndProvider>
+        </DragAndDrop>
     );
 };
 
diff --git a/frontend/src/component/feature/strategy/strategies-list-component.jsx b/frontend/src/component/feature/strategy/strategies-list-component.jsx
index 5eb4285569..0b8c5b169b 100644
--- a/frontend/src/component/feature/strategy/strategies-list-component.jsx
+++ b/frontend/src/component/feature/strategy/strategies-list-component.jsx
@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { cloneDeep } from 'lodash';
 import arrayMove from 'array-move';
 import { Button, Icon } from 'react-mdl';
 
+import DragAndDrop from '../../common/drag-and-drop';
 import ConfigureStrategy from './strategy-configure-container';
 import AddStrategy from './strategies-add';
 import { HeaderTitle } from '../../common';
@@ -123,7 +122,7 @@ const StrategiesList = props => {
         />
     ));
     return (
-        <DndProvider backend={HTML5Backend}>
+        <DragAndDrop>
             {editable && (
                 <HeaderTitle
                     title="Activation strategies"
@@ -147,7 +146,7 @@ const StrategiesList = props => {
                     Clear all
                 </Button>
             </div>
-        </DndProvider>
+        </DragAndDrop>
     );
 };