change react component

client/package-lock.json

@@ -8,15 +8,14 @@
       "name": "focus-app-client",
       "version": "0.1.0",
       "dependencies": {
+        "@hello-pangea/dnd": "^18.0.1",
         "axios": "^1.6.0",
         "react": "^18.2.0",
-        "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
         "@types/node": "^20.0.0",
         "@types/react": "^18.2.0",
-        "@types/react-beautiful-dnd": "^13.1.5",
         "@types/react-dom": "^18.2.0",
         "@vitejs/plugin-react": "^4.2.0",
         "typescript": "^5.0.0",
@@ -258,9 +257,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.6",
+      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
-      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -705,6 +704,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1164,18 +1180,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
-      "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
-      "license": "MIT",
-      "dependencies": {
-        "hoist-non-react-statics": "^3.3.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/node": {
       "version": "20.19.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
@@ -1190,28 +1194,20 @@
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
       }
     },
-    "node_modules/@types/react-beautiful-dnd": {
-      "version": "13.1.8",
-      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.8.tgz",
-      "integrity": "sha512-E3TyFsro9pQuK4r8S/OL6G99eq7p8v29sX0PM7oT8Z+PJfZvSQTx4zTQbUJ+QZXioAF0e7TGBEcA1XhYhCweyQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-dom": {
       "version": "18.3.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
@@ -1222,17 +1218,11 @@
         "@types/react": "^18.0.0"
       }
     },
-    "node_modules/@types/react-redux": {
+    "node_modules/@types/use-sync-external-store": {
-      "version": "7.1.34",
+      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
-      "license": "MIT",
+      "license": "MIT"
-      "dependencies": {
-        "@types/hoist-non-react-statics": "^3.3.0",
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0",
-        "redux": "^4.0.0"
-      }
     },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
@@ -1382,6 +1372,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -1684,21 +1675,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1762,12 +1738,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
-      "license": "MIT"
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1822,15 +1792,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1867,23 +1828,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -1908,26 +1852,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-beautiful-dnd": {
-      "version": "13.1.1",
-      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz",
-      "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==",
-      "deprecated": "react-beautiful-dnd is now deprecated. Context and options: https://github.com/atlassian/react-beautiful-dnd/issues/2672",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2",
-        "css-box-model": "^1.2.0",
-        "memoize-one": "^5.1.1",
-        "raf-schd": "^4.0.2",
-        "react-redux": "^7.2.0",
-        "redux": "^4.0.4",
-        "use-memo-one": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -1941,33 +1865,25 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "license": "MIT"
-    },
     "node_modules/react-redux": {
-      "version": "7.2.9",
+      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
-      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.15.4",
+        "@types/use-sync-external-store": "^0.0.6",
-        "@types/react-redux": "^7.1.20",
+        "use-sync-external-store": "^1.4.0"
-        "hoist-non-react-statics": "^3.3.2",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^17.0.2"
       },
       "peerDependencies": {
-        "react": "^16.8.3 || ^17 || ^18"
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
       },
       "peerDependenciesMeta": {
-        "react-dom": {
+        "@types/react": {
           "optional": true
         },
-        "react-native": {
+        "redux": {
           "optional": true
         }
       }
@@ -1983,13 +1899,10 @@
       }
     },
     "node_modules/redux": {
-      "version": "4.2.1",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
-      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
+      "license": "MIT"
-      "dependencies": {
-        "@babel/runtime": "^7.9.2"
-      }
     },
     "node_modules/rollup": {
       "version": "4.57.0",
@@ -2123,13 +2036,13 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/use-memo-one": {
+    "node_modules/use-sync-external-store": {
-      "version": "1.1.3",
+      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/vite": {

client/package.json

@@ -3,19 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
+    "axios": "^1.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.0"
-    "react-beautiful-dnd": "^13.1.1",
-    "axios": "^1.6.0"
   },
   "devDependencies": {
+    "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/react-beautiful-dnd": "^13.1.5",
+    "@vitejs/plugin-react": "^4.2.0",
-    "@types/node": "^20.0.0",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
+    "vite": "^5.0.0"
-    "@vitejs/plugin-react": "^4.2.0"
   },
   "scripts": {
     "dev": "vite",

client/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
 import { focusTaskApi } from './api';
 import { FocusTask } from './types';
 import TaskCard from './components/TaskCard';