Merge pull request #404 from powerhouse-inc/feat-fix-drag-and-drop-ac…

…cidental-rename feat: fix drag and drop accidental rename
powerhouse-inc · Jun 28, 2024 · 1b84e20 · 1b84e20
2 parents 484d94e + 8d322c1
commit 1b84e20
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -94,7 +94,7 @@
         "xvfb-maybe": "^0.2.1"
     },
     "dependencies": {
-        "@powerhousedao/design-system": "1.0.0-alpha.139",
+        "@powerhousedao/design-system": "1.0.0-alpha.140",
         "@sentry/react": "^7.109.0",
         "did-key-creator": "^1.2.0",
         "document-drive": "1.0.0-alpha.79",
@@ -104,6 +104,7 @@
         "electron-squirrel-startup": "^1.0.0",
         "electron-store": "^8.1.0",
         "graphql": "^16.8.1",
+        "history": "^5.3.0",
         "i18next": "^23.7.6",
         "jotai": "^2.1.0",
         "localforage": "^1.10.0",

diff --git a/src/components/editors.tsx b/src/components/editors.tsx
@@ -9,6 +9,7 @@ import {
     Operation,
     actions,
 } from 'document-model/document';
+import { Action as HistoryAction } from 'history';
 import { useAtomValue } from 'jotai';
 import { useEffect, useMemo, useState } from 'react';
 import { useConnectDid } from 'src/hooks/useConnectCrypto';
@@ -20,6 +21,7 @@ import { themeAtom } from 'src/store/theme';
 import { useUser } from 'src/store/user';
 import { useDocumentDispatch } from 'src/utils/document-model';
 import Button from './button';
+import history from './history';
 
 export interface EditorProps<
     T = unknown,
@@ -118,6 +120,14 @@ export const DocumentEditor: React.FC<IProps> = ({
         onChange?.(document);
     }, [document]);
 
+    useEffect(() => {
+        history.listen(update => {
+            if (update.action === HistoryAction.Pop) {
+                onClose();
+            }
+        });
+    }, [onClose]);
+
     function undo() {
         dispatch(actions.undo());
     }

diff --git a/src/components/history.ts b/src/components/history.ts
@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+const history = createBrowserHistory();
+
+export default history;
diff --git a/src/hooks/useDrivesContainer.ts b/src/hooks/useDrivesContainer.ts
@@ -105,6 +105,7 @@ export function useDrivesContainer() {
         actions.newVirtualItem({
             id: uuid(),
             label: virtualFolderName,
+            parentFolder,
             path: path.join(item.path, virtualPathName),
             type: 'FOLDER',
             action: 'NEW',
@@ -114,9 +115,8 @@ export function useDrivesContainer() {
     }
 
     async function addNewFolder(item: TreeItem, driveID: string) {
-        const basePathComponents = item.path.split('/').slice(1, -1);
-
         const decodedDriveID = decodeID(driveID);
+        const basePathComponents = item.path.split('/').slice(1, -1);
         const parentFolder = basePathComponents.pop();
         await addFolder(
             decodedDriveID,
@@ -268,6 +268,7 @@ export function useDrivesContainer() {
             id: id,
             label: name,
             path: driveID,
+            parentFolder: null,
             type: driveBaseItemType,
             icon,
             sharingType: sharingType?.toUpperCase() as TreeItemSharingType,
@@ -298,6 +299,7 @@ export function useDrivesContainer() {
                 id: node.id,
                 label: node.name,
                 path: path.join(driveID, getNodePath(node, driveNodes)),
+                parentFolder: node.parentFolder,
                 type: node.kind === 'folder' ? 'FOLDER' : 'FILE',
                 sharingType: sharingType?.toUpperCase() as TreeItemSharingType,
                 availableOffline,
@@ -327,6 +329,7 @@ export function useDrivesContainer() {
                 id: node.id,
                 label: node.name,
                 path: folderPath,
+                parentFolder: node.parentFolder,
                 type: 'FOLDER',
                 sharingType: sharingType?.toUpperCase() as TreeItemSharingType,
                 availableOffline,

diff --git a/src/hooks/useOnDropEvent.ts b/src/hooks/useOnDropEvent.ts
@@ -54,9 +54,20 @@ export const useOnDropEvent = () => {
 
             const isMoveOperation = event.dropOperation === 'move';
             const srcId = item.data.id;
-            const srcName = item.data.label
+            const srcName = item.data.label;
+            const itemParentIsDrive =
+                item.data.parentFolder === '' ||
+                item.data.parentFolder === undefined ||
+                item.data.parentFolder === null;
+            const targetIsDrive = decodedTargetId === '';
 
             if (isMoveOperation) {
+                if (itemParentIsDrive && targetIsDrive) {
+                    return;
+                }
+                if (item.data.parentFolder === decodedTargetId) {
+                    return;
+                }
                 await moveNode({
                     decodedDriveId,
                     srcId,