Update react-dnd (plus minor & patch updates)

package.json

@@ -37,9 +37,9 @@
   },
   "dependencies": {
     "immutability-helper": "^3.1.1",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
-    "react-select": "^4.0.0",
+    "react-dnd": "^14.0.2",
+    "react-dnd-html5-backend": "^14.0.0",
+    "react-select": "^4.3.0",
     "react-tippy": "^1.4.0"
   },
   "peerDependencies": {
@@ -50,19 +50,19 @@
     "react": ">= 16.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
+    "@babel/cli": "^7.13.14",
+    "@babel/core": "^7.13.14",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-config-sanity": "^4.0.2",
+    "eslint": "^7.23.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-sanity": "^5.1.0",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react": "^7.23.1",
     "prettier": "^2.2.1",
     "react-hot-loader": "4.13.0"
   }

src/components/molecules/Card.jsx

@@ -16,56 +16,79 @@ const style = {
 
 export const Card = ({ id, index, moveCard, jsx }) => {
   const ref = useRef(null);
-  const [, drop] = useDrop({
+
+  const [{ handlerId }, drop] = useDrop({
     accept: ItemTypes.CARD,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
     hover(item, monitor) {
       if (!ref.current) {
         return;
       }
       const dragIndex = item.index;
       const hoverIndex = index;
+
       // Don't replace items with themselves
       if (dragIndex === hoverIndex) {
         return;
       }
+
       // Determine rectangle on screen
-      const hoverBoundingRect = ref.current && ref.current.getBoundingClientRect();
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
       // Get vertical middle
       const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
       // Determine mouse position
       const clientOffset = monitor.getClientOffset();
+
       // Get pixels to the top
       const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
       // Only perform the move when the mouse has crossed half of the items height
       // When dragging downwards, only move when the cursor is below 50%
       // When dragging upwards, only move when the cursor is above 50%
+
       // Dragging downwards
       if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
         return;
       }
+
       // Dragging upwards
       if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
         return;
       }
+
       // Time to actually perform the action
       moveCard(dragIndex, hoverIndex);
+
       // Note: we're mutating the monitor item here!
       // Generally it's better to avoid mutations,
       // but it's good here for the sake of performance
       // to avoid expensive index searches.
       item.index = hoverIndex;
     },
   });
+
   const [{ isDragging }, drag] = useDrag({
-    item: { type: ItemTypes.CARD, id, index },
+    type: ItemTypes.CARD,
+    item: () => {
+      return { id, index };
+    },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
   });
+
   const opacity = isDragging ? 0 : 1;
+
   drag(drop(ref));
+
   return (
-    <div ref={ref} style={{ ...style, opacity }}>
+    <div ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId}>
       <span style={{ paddingRight: "1rem" }}>{index + 1}.</span> {jsx}
     </div>
   );