upgrade react-dnd and remove monkeypatch (#1192)

Another monkeypatch bites the dust.

AFAIK there is no regression in functionality. But please test
yourselves too to double check.

packages/desktop-client/package.json

@@ -42,8 +42,8 @@
     "pikaday": "1.8.0",
     "react": "18.2.0",
     "react-app-rewired": "^2.2.1",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.16.1",

packages/desktop-client/src/components/FinancesApp.js

 import React, { useEffect, useMemo } from 'react';
 import { DndProvider } from 'react-dnd';
-import Backend from 'react-dnd-html5-backend';
+import { HTML5Backend as Backend } from 'react-dnd-html5-backend';
 import { connect } from 'react-redux';
 import {
   Route,

packages/desktop-client/src/components/sort.js

@@ -29,30 +29,23 @@ function useMergedRefs(ref1, ref2) {
   }, [ref1, ref2]);
 }
 
-export function useDraggable({
-  item,
-  type,
-  makePreview,
-  children,
-  canDrag,
-  onDragChange,
-}) {
+export function useDraggable({ item, type, canDrag, onDragChange }) {
   let _onDragChange = useRef(onDragChange);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [{ isDragging }, dragRef] = useDrag({
-    item: { type, item },
-    collect: monitor => ({ isDragging: monitor.isDragging() }),
-
-    begin(monitor) {
+  const [, dragRef] = useDrag({
+    type,
+    item: () => {
       _onDragChange.current({ state: 'start-preview', type, item });
 
       setTimeout(() => {
         _onDragChange.current({ state: 'start' });
       }, 0);
+
+      return { type, item };
     },
+    collect: monitor => ({ isDragging: monitor.isDragging() }),
 
-    end(item, monitor) {
+    end(item) {
       _onDragChange.current({ state: 'end', type, item });
     },
 
@@ -74,10 +67,10 @@ export function useDroppable({ types, id, onDrop, onLongHover }) {
 
   let [{ isOver }, dropRef] = useDrop({
     accept: types,
-    drop({ item }, monitor) {
+    drop({ item }) {
       onDrop(item.id, dropPos, id);
     },
-    hover({ item, type }, monitor) {
+    hover(_, monitor) {
       let hoverBoundingRect = ref.current.getBoundingClientRect();
       let hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
       let clientOffset = monitor.getClientOffset();

patches/react-dnd-html5-backend+10.0.2.patch

-diff --git a/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js b/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js
-index 942091b..7378aa0 100644
---- a/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js
-+++ b/node_modules/react-dnd-html5-backend/dist/esm/HTML5Backend.js
-@@ -280,9 +280,9 @@ function () {
-         // Show user-specified drop effect.
-         e.preventDefault();
- 
--        if (e.dataTransfer) {
--          e.dataTransfer.dropEffect = _this.getCurrentDropEffect();
--        }
-+        // if (e.dataTransfer) {
-+        //   e.dataTransfer.dropEffect = _this.getCurrentDropEffect();
-+        // }
-       } else if (_this.isDraggingNativeItem()) {
-         // Don't show a nice cursor but still prevent default
-         // "drop and blow away the whole document" action.
-@@ -290,9 +290,9 @@ function () {
-       } else {
-         e.preventDefault();
- 
--        if (e.dataTransfer) {
--          e.dataTransfer.dropEffect = 'none';
--        }
-+        // if (e.dataTransfer) {
-+        //   e.dataTransfer.dropEffect = 'none';
-+        // }
-       }
-     };
- 

upcoming-release-notes/1192.md

+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Upgrade `react-dnd` dependency from v10.0.2 to v16.0.1 and remove monkeypatch

yarn.lock

@@ -105,8 +105,8 @@ __metadata:
     pikaday: 1.8.0
     react: 18.2.0
     react-app-rewired: ^2.2.1
-    react-dnd: ^10.0.2
-    react-dnd-html5-backend: ^10.0.2
+    react-dnd: ^16.0.1
+    react-dnd-html5-backend: ^16.0.1
     react-dom: 18.2.0
     react-merge-refs: ^1.1.0
     react-modal: 3.16.1
@@ -3053,24 +3053,24 @@ __metadata:
   languageName: node
   linkType: hard
-"@react-dnd/asap@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "@react-dnd/asap@npm:4.0.1"
-  checksum: 757db3b5c436a95383b74f187f503321092909401ce9665d9cc1999308a44de22809bf8dbe82c9126bd73b72dd6665bbc4a788e864fc3c243c59f65057a4f87f
+"@react-dnd/asap@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "@react-dnd/asap@npm:5.0.2"
+  checksum: 18f040e53512983f11c542ef21e6e4cac605d585a10cd764b13bc1b2f3ac7490e0fa40503adc348d8387aa45bc8e7eebe9cb33003b960a30bb5fde666ff2adde
   languageName: node
   linkType: hard
-"@react-dnd/invariant@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@react-dnd/invariant@npm:2.0.0"
-  checksum: ef1e989920d70b15c80dccb01af9b598081d76993311aa22d2e9a3ec41d10a88540eeec4b4de7a8b2a2ea52dfc3495ab45e39192c2d27795a9258bd6b79d000e
+"@react-dnd/invariant@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "@react-dnd/invariant@npm:4.0.2"
+  checksum: 594f6d78896c19bb8f023e101334fd91a9fdff686117bd8e830ba53737ec0a6042dab66971d3d63c7afbc622103909aff7a64c5c6767e0aa8d9561fd42705016
   languageName: node
   linkType: hard
-"@react-dnd/shallowequal@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@react-dnd/shallowequal@npm:2.0.0"
-  checksum: b5bbdc795d65945bb7ba2322bed5cf8d4c6fe91dced98c3b10e3d16822c438f558751135ff296f8d1aa1eaa9d0037dacab2b522ca5eb812175123b9996966dcb
+"@react-dnd/shallowequal@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "@react-dnd/shallowequal@npm:4.0.2"
+  checksum: 7f21d691bddbfd4d2830948cbeefecca1600b2b46bcb1934926795f07ae8a1fa60a3dfd3a2112be5ef682c3820c80a99711e9fa15843f7e300acb25a4ecb70ab
   languageName: node
   linkType: hard
@@ -4139,16 +4139,6 @@ __metadata:
   languageName: node
   linkType: hard
-"@types/hoist-non-react-statics@npm:^3.3.1":
-  version: 3.3.1
-  resolution: "@types/hoist-non-react-statics@npm:3.3.1"
-  dependencies:
-    "@types/react": "*"
-    hoist-non-react-statics: ^3.3.0
-  checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -7753,14 +7743,14 @@ __metadata:
   languageName: node
   linkType: hard
-"dnd-core@npm:^10.0.2":
-  version: 10.0.2
-  resolution: "dnd-core@npm:10.0.2"
+"dnd-core@npm:^16.0.1":
+  version: 16.0.1
+  resolution: "dnd-core@npm:16.0.1"
   dependencies:
-    "@react-dnd/asap": ^4.0.0
-    "@react-dnd/invariant": ^2.0.0
-    redux: ^4.0.4
-  checksum: 58771aef103219eccc3a4f1695b6993edad0a922bd50cb66faaf706da69c5fd9dbc59fa786d2581b9adfad09ff1b63994ff6619f54f7ee8ee855e2ad01ae5be6
+    "@react-dnd/asap": ^5.0.1
+    "@react-dnd/invariant": ^4.0.1
+    redux: ^4.2.0
+  checksum: b7d3ef4664f433af796f440ddd27ad9d7fef0205f26c4b7c0af6ebf612ffa9b33e64d095d3e79190c4baaed34aa36570f321ebe0d2cc8ff1031ff158a0907b3f
   languageName: node
   linkType: hard
@@ -9980,7 +9970,7 @@ __metadata:
   languageName: node
   linkType: hard
-"hoist-non-react-statics@npm:^3.3.0":
+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -15151,27 +15141,37 @@ __metadata:
   languageName: node
   linkType: hard
-"react-dnd-html5-backend@npm:^10.0.2":
-  version: 10.0.2
-  resolution: "react-dnd-html5-backend@npm:10.0.2"
+"react-dnd-html5-backend@npm:^16.0.1":
+  version: 16.0.1
+  resolution: "react-dnd-html5-backend@npm:16.0.1"
   dependencies:
-    dnd-core: ^10.0.2
-  checksum: a3f5d41e71216c52460f9c0f719d08458ff8744ac95c6374d355bb59fbca8263ddadab275b7100336d2085214a0c5bbc03d307ec2161eebb94052922534b51ba
+    dnd-core: ^16.0.1
+  checksum: e2368bf85d5632a5cd867b743feb54c9052d909ea5331608860fa455edf3c633ac791f5b338e3db29b19ea8670c0ba5fb43c9c1c2510760bea030811d726cdfa
   languageName: node
   linkType: hard
-"react-dnd@npm:^10.0.2":
-  version: 10.0.2
-  resolution: "react-dnd@npm:10.0.2"
+"react-dnd@npm:^16.0.1":
+  version: 16.0.1
+  resolution: "react-dnd@npm:16.0.1"
   dependencies:
-    "@react-dnd/shallowequal": ^2.0.0
-    "@types/hoist-non-react-statics": ^3.3.1
-    dnd-core: ^10.0.2
-    hoist-non-react-statics: ^3.3.0
+    "@react-dnd/invariant": ^4.0.1
+    "@react-dnd/shallowequal": ^4.0.1
+    dnd-core: ^16.0.1
+    fast-deep-equal: ^3.1.3
+    hoist-non-react-statics: ^3.3.2
   peerDependencies:
-    react: ">= 16.8"
-    react-dom: ">= 16.8"
-  checksum: 4ce085a4b09bed8453b50403669495332cd273a892ec8ae0037ad37102afdaf04fbade55b6b1db88f0b21149b7fe7cafceeba697bb0c9aa73244baa8464c963b
+    "@types/hoist-non-react-statics": ">= 3.3.1"
+    "@types/node": ">= 12"
+    "@types/react": ">= 16"
+    react: ">= 16.14"
+  peerDependenciesMeta:
+    "@types/hoist-non-react-statics":
+      optional: true
+    "@types/node":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: e8da2186aaafcd5bb41c090a995c963a7c3c73c20991667a2cfc0c800d7f7f73913414b2e61c437cdb6221bb2151bd5174088b8b42c17056a896fc4d1da5729f
   languageName: node
   linkType: hard
@@ -15541,7 +15541,7 @@ __metadata:
   languageName: node
   linkType: hard
-"redux@npm:^4.0.4, redux@npm:^4.0.5":
+"redux@npm:^4.0.5, redux@npm:^4.2.0":
   version: 4.2.1
   resolution: "redux@npm:4.2.1"
   dependencies: