Remove react-dnd wrapper lib.

`react-simple-dnd` is just a wrapper for `react-dnd`, and it doesn't
support React 16. This PR changes to using the underlying library
directly.

src/components/UI/dndHelpers.js

@@ -0,0 +1,51 @@
+import ReactDNDHTML5Backend from 'react-dnd-html5-backend';
+import { DragDropContext as ReactDNDDragDropContext, DragSource as ReactDNDDragSource, DropTarget as ReactDNDDropTarget } from 'react-dnd';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const DragSource = ({ namespace, ...props }) => {
+  const DragComponent = ReactDNDDragSource(
+    namespace,
+    {
+      beginDrag({ children, isDragging, connectDragComponent, ...ownProps }) {
+        // We return the rest of the props as the ID of the element being dragged.
+        return ownProps;
+      },
+    },
+    (connect, monitor) => ({
+      connectDragComponent: connect.dragSource(),
+    }),
+  )(
+    ({ children, connectDragComponent }) => children(connectDragComponent)
+  );
+
+  return React.createElement(DragComponent, props, props.children);
+};
+DragSource.propTypes = {
+  children: PropTypes.func.isRequired,
+};
+
+export const DropTarget = ({ onDrop, namespace, ...props }) => {
+  const DropComponent = ReactDNDDropTarget(
+    namespace,
+    {
+      drop(ownProps, monitor) {
+        onDrop(monitor.getItem());
+      },
+    },
+    (connect, monitor) => ({
+      connectDropTarget: connect.dropTarget(),
+      isHovered: monitor.isOver(),
+    }),
+  )(
+    ({ children, connectDropTarget, isHovered }) => children(connectDropTarget, { isHovered })
+  );
+
+  return React.createElement(DropComponent, props, props.children);
+};
+DropTarget.propTypes = {
+  onDrop: PropTypes.func.isRequired,
+  children: PropTypes.func.isRequired,
+};
+
+export const HTML5DragDrop = component => ReactDNDDragDropContext(ReactDNDHTML5Backend)(component);

src/components/UnpublishedListing/UnpublishedListing.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { DragSource, DropTarget, HTML5DragDrop } from 'react-simple-dnd';
+import { DragSource, DropTarget, HTML5DragDrop } from '../UI/dndHelpers';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
@@ -11,6 +11,9 @@ import Button from 'react-toolbox/lib/button';
 import UnpublishedListingCardMeta from './UnpublishedListingCardMeta.js';
 import { status, statusDescriptions } from '../../constants/publishModes';
 
+// This is a namespace so that we can only drop these elements on a DropTarget with the same
+const DNDNamespace = 'cms-unpublished-entries';
+
 class UnpublishedListing extends React.Component {
   static propTypes = {
     entries: ImmutablePropTypes.orderedMap,
@@ -44,12 +47,13 @@ class UnpublishedListing extends React.Component {
     if (!column) {
       return entries.entrySeq().map(([currColumn, currEntries]) => (
         <DropTarget
+          namespace={DNDNamespace}
           key={currColumn}
           /* eslint-disable */
           onDrop={this.handleChangeStatus.bind(this, currColumn)}
           /* eslint-enable */
         >
-          {isHovered => (
+          {(connect, { isHovered }) => connect(
             <div className={classnames(
               'nc-unpublishedListing-column',
               { 'nc-unpublishedListing-column-hovered' : isHovered },
@@ -77,11 +81,13 @@ class UnpublishedListing extends React.Component {
             const isModification = entry.get('isModification');
             return (
               <DragSource
+                namespace={DNDNamespace}
                 key={slug}
                 slug={slug}
                 collection={collection}
                 ownStatus={ownStatus}
               >
+              {connect => connect(
                 <div className="nc-unpublishedListing-draggable">
                   <Card className="nc-unpublishedListing-card">
                     <UnpublishedListingCardMeta
@@ -118,6 +124,7 @@ class UnpublishedListing extends React.Component {
                     </CardActions>
                   </Card>
                 </div>
+              )}
               </DragSource>
             );
           })