From f38227b4ec3a1e22f68d2c01d786c32e86685833 Mon Sep 17 00:00:00 2001 From: Serhii Date: Sat, 21 Sep 2024 17:50:15 +0300 Subject: [PATCH] fix_reorder_grid --- frontend/package-lock.json | 177 +++++++++++++++++------------- frontend/package.json | 3 +- frontend/src/components/Audio.tsx | 2 +- frontend/src/pages/Collection.tsx | 94 +++++++--------- 4 files changed, 140 insertions(+), 136 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cfb1571..a36d312 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -21,7 +21,7 @@ "holderjs": "^2.9.9", "nth-check": "^2.1.1", "react": "^18.3.1", - "react-beautiful-dnd": "^13.1.1", + "react-beautiful-dnd-grid": "^0.1.3-alpha", "react-bootstrap-icons": "^1.11.4", "react-dom": "^18.3.1", "react-icons": "^5.3.0", @@ -41,7 +41,6 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@react-oauth/google": "^0.12.1", "@types/jest": "^29.5.12", - "@types/react-beautiful-dnd": "^13.1.8", "axios": "^1.7.2", "babel-eslint": "*", "bootstrap": "^5.3.3", @@ -1971,6 +1970,25 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/runtime-corejs2": { + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.25.6.tgz", + "integrity": "sha512-24uCmOJPrsnS7HtRamCibYabHRV0bscPJNFFcyKgj7FqUA0V5XcbZUmz9PVNDW4L+euMsZtCIetU1LxTmUaIlA==", + "dependencies": { + "core-js": "^2.6.12", + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/runtime-corejs2/node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", + "hasInstallScript": true + }, "node_modules/@babel/template": { "version": "7.25.0", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz", @@ -4846,15 +4864,6 @@ "@types/node": "*" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", - "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", - "dependencies": { - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0" - } - }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -5006,15 +5015,6 @@ "csstype": "^3.0.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, - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-dom": { "version": "18.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz", @@ -5023,17 +5023,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-redux": { - "version": "7.1.33", - "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.33.tgz", - "integrity": "sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==", - "dependencies": { - "@types/hoist-non-react-statics": "^3.3.0", - "@types/react": "*", - "hoist-non-react-statics": "^3.3.0", - "redux": "^4.0.0" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.11", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", @@ -11009,7 +10998,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "dependencies": { "loose-envify": "^1.0.0" } @@ -18194,22 +18182,86 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, - "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==", + "node_modules/react-beautiful-dnd-grid": { + "version": "0.1.3-alpha", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd-grid/-/react-beautiful-dnd-grid-0.1.3-alpha.tgz", + "integrity": "sha512-614h6gcVlJ1ubrZ/joy1NhRogC45Mt3in3tc5mPdhtHxqj8n6PUhrvUuHvF7J/6VB1v4TfBBKCxmcbGjpHlZHQ==", "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" + "object-hash": "^1.3.1", + "react": "^16.7.0", + "react-beautiful-dnd": "^10.0.3", + "uuid": "^3.3.2" + } + }, + "node_modules/react-beautiful-dnd-grid/node_modules/object-hash": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz", + "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==", + "engines": { + "node": ">= 0.10.0" + } + }, + "node_modules/react-beautiful-dnd-grid/node_modules/react": { + "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-beautiful-dnd-grid/node_modules/react-beautiful-dnd": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-10.1.1.tgz", + "integrity": "sha512-TdE06Shfp56wm28EzjgC56EEMgGI5PDHejJ2bxuAZvZr8CVsbksklsJC06Hxf0MSL7FHbflL/RpkJck9isuxHg==", + "dependencies": { + "@babel/runtime-corejs2": "^7.4.2", + "css-box-model": "^1.1.1", + "memoize-one": "^5.0.1", + "prop-types": "^15.6.1", + "raf-schd": "^4.0.0", + "react-redux": "^5.0.7", + "redux": "^4.0.1", + "tiny-invariant": "^1.0.4" }, "peerDependencies": { - "react": "^16.8.5 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0" + "react": "^16.3.1" + } + }, + "node_modules/react-beautiful-dnd-grid/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==" + }, + "node_modules/react-beautiful-dnd-grid/node_modules/react-redux": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.1.2.tgz", + "integrity": "sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "loose-envify": "^1.1.0", + "prop-types": "^15.6.1", + "react-is": "^16.6.0", + "react-lifecycles-compat": "^3.0.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0", + "redux": "^2.0.0 || ^3.0.0 || ^4.0.0-0" + } + }, + "node_modules/react-beautiful-dnd-grid/node_modules/uuid": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz", + "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==", + "deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.", + "bin": { + "uuid": "bin/uuid" } }, "node_modules/react-bootstrap": { @@ -18416,32 +18468,7 @@ "node_modules/react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", - "dev": true - }, - "node_modules/react-redux": { - "version": "7.2.9", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", - "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", - "dependencies": { - "@babel/runtime": "^7.15.4", - "@types/react-redux": "^7.1.20", - "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" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "node_modules/react-refresh": { "version": "0.11.0", @@ -23651,14 +23678,6 @@ "node": ">=0.10.0" } }, - "node_modules/use-memo-one": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", - "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 0925a59..838caec 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,7 +16,7 @@ "holderjs": "^2.9.9", "nth-check": "^2.1.1", "react": "^18.3.1", - "react-beautiful-dnd": "^13.1.1", + "react-beautiful-dnd-grid": "^0.1.3-alpha", "react-bootstrap-icons": "^1.11.4", "react-dom": "^18.3.1", "react-icons": "^5.3.0", @@ -58,7 +58,6 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@react-oauth/google": "^0.12.1", "@types/jest": "^29.5.12", - "@types/react-beautiful-dnd": "^13.1.8", "axios": "^1.7.2", "babel-eslint": "*", "bootstrap": "^5.3.3", diff --git a/frontend/src/components/Audio.tsx b/frontend/src/components/Audio.tsx index 8fa86b6..d48e484 100644 --- a/frontend/src/components/Audio.tsx +++ b/frontend/src/components/Audio.tsx @@ -16,7 +16,7 @@ interface AudioPlayerProps { const AudioPlayer: React.FC = ({ currentImage, index }) => { const audioRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); - const [playbackRate, setPlaybackRate] = useState(0.9); + const [playbackRate, setPlaybackRate] = useState(1); const [volume, setVolume] = useState(1); const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); diff --git a/frontend/src/pages/Collection.tsx b/frontend/src/pages/Collection.tsx index 2cbf22b..8ce541f 100644 --- a/frontend/src/pages/Collection.tsx +++ b/frontend/src/pages/Collection.tsx @@ -8,8 +8,8 @@ import { useAuth } from "contexts/AuthContext"; import { useLoading } from "contexts/LoadingContext"; import { useAlertQueue } from "hooks/alerts"; import React, { useEffect, useMemo, useState } from "react"; -import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; -import { Col, Row } from "react-bootstrap"; +import { ListManager } from "react-beautiful-dnd-grid"; +import { Col } from "react-bootstrap"; import { ArrowLeft, CaretLeft, @@ -215,13 +215,12 @@ const CollectionPage: React.FC = () => { }; // Inside your CollectionPage component /* eslint-disable */ - const handleDragEnd = (result: any) => { + const handleDragEnd = (sourceIndex: number, destinationIndex: number) => { /* eslint-enable */ - if (!result.destination || !reorderImageIds) return; - const [removed] = reorderImageIds.splice(result.source.index, 1); - reorderImageIds.splice(result.destination.index, 0, removed); + if (!reorderImageIds) return; + const [removed] = reorderImageIds.splice(sourceIndex, 1); + reorderImageIds.splice(destinationIndex, 0, removed); setReorderImageIds([...reorderImageIds]); - // Optionally, you can save the new order to your backend here }; @@ -384,54 +383,41 @@ const CollectionPage: React.FC = () => { - {/* Drag and Drop for Images */} - - - {(provided) => ( - - {reorderImageIds ? ( - reorderImageIds.map((id, index) => { - const image = images?.find((item) => item.id === id); - if (image) { - return ( - - {(provided) => ( - - - - )} - - ); - } - return null; // Prevent rendering undefined - }) - ) : ( - <> - )} - {provided.placeholder} {/* Important for drag and drop */} - - )} - - + {reorderImageIds && ( + { + const image = images?.find((item) => item.id === id); + return ( + + {image ? ( + + ) : ( + + )} + + ); + }} + /> + )} );