wip move item

Author: softmarshmallow

editor-packages/editor-dashboard/core/action.ts

@@ -1,6 +1,7 @@
 export type Action =
   | NewSectionAction
   | MakeDirAction
+  | MoveAction
   | FilterAction
   | FoldUnfoldAction
   | FoldUnfoldAllAction;
@@ -26,6 +27,12 @@ export type MakeDirAction = {
   name?: string;
 };
 
+export type MoveAction = {
+  type: "hierarchy/mv";
+  source: string[];
+  dest: string;
+};
+
 export type FoldUnfoldAllAction = FoldAllAction | UnfoldAllAction;
 
 export type FoldAllAction = {

editor-packages/editor-dashboard/core/provider.tsx

@@ -147,6 +147,17 @@ export function useDashboard() {
     [dispatch]
   );
 
+  const mv = useCallback(
+    (src: string[], dst: string) => {
+      dispatch({
+        type: "hierarchy/mv",
+        source: src,
+        dest: dst,
+      });
+    },
+    [dispatch]
+  );
+
   return {
     ...state,
     selection: editorState.selectedNodes,
@@ -159,5 +170,6 @@ export function useDashboard() {
     fold,
     unfold,
     mkdir,
+    mv,
   };
 }

editor-packages/editor-dashboard/core/reducer.ts

@@ -1,10 +1,12 @@
 import produce from "immer";
+import path from "path";
 import type {
   Action,
   FilterAction,
   FoldAction,
   FoldAllAction,
   MakeDirAction,
+  MoveAction,
   NewSectionAction,
   UnfoldAction,
   UnfoldAllAction,
@@ -59,6 +61,43 @@ export function reducer(state: DashboardState, action: Action): DashboardState {
       });
     }
 
+    case "hierarchy/mv": {
+      const { source, dest } = <MoveAction>action;
+
+      console.log("move", source, dest);
+      return produce(state, (draft) => {
+        // // 1. check if dest is a valid directory
+        // const destFolder = findFolder(dest, {
+        //   directories: state.hierarchy.sections,
+        // });
+        // console.log("destDir", destFolder);
+        // if (!destFolder) {
+        //   return;
+        // }
+        // // 2. move each source under dest
+        // for (const src of source) {
+        //   console.log("moving", src, "to", dest);
+        //   const srcFolder = draft.hierarchy.sections.find(
+        //     (s) => s.path === src
+        //   );
+        //   const srcParent = draft.hierarchy.sections.find((s) =>
+        //     s.contents.find((c) => c.path === src)
+        //   );
+        //   if (!srcParent) {
+        //     continue;
+        //   }
+        //   // 2.1 remove src from srcParent
+        //   srcParent.contents = srcParent.contents.filter(
+        //     (c) => c.path !== srcFolder.path
+        //   );
+        //   // 2.2 add src to dest
+        //   destFolder.contents.push(srcFolder);
+        //   console.log("srcParent", srcParent);
+        //   console.log("destDir", destFolder);
+        // }
+      });
+    }
+
     case "hierarchy/fold": {
       const { path } = <FoldAction>action;
       return produce(state, (draft) => {
@@ -121,3 +160,41 @@ function newDirName({
     i++;
   }
 }
+
+/**
+ * find item under hierarchy
+ *
+ * @param directories the root directories to begin search with. it will loop recursively through all directories
+ */
+function findFolder(
+  path: string,
+  { directories }: { directories: Array<DashboardFolderItem> }
+) {
+  for (const dir of directories) {
+    if (dir.path === path) {
+      return dir;
+    }
+
+    if (dir.$type === "folder") {
+      const found = findFolder(path, {
+        directories: dir.contents.filter(
+          (d) => d.$type === "folder"
+        ) as Array<DashboardFolderItem>,
+      });
+      if (found) {
+        return found;
+      }
+    }
+  }
+}
+
+// Visual File system
+// mv
+// mkdir
+// rm
+// rename
+// fold
+// unfold
+// order
+// tag
+// search

editor-packages/editor-dashboard/scaffold/editor-dashboard.tsx

@@ -288,6 +288,7 @@ function FolderCard(
   props: DashboardFolderItem &
     Omit<DashboardItemCardProps, "label" | "preview" | "icon">
 ) {
+  const { mv } = useDashboard();
   const [{ isActive }, drop] = useDrop(() => ({
     accept: ["scene", "folder"],
     collect: (monitor) => ({
@@ -297,8 +298,8 @@ function FolderCard(
       return item.id !== props.id;
     },
     drop(item, monitor) {
-      console.log("drop", item, monitor);
-      // todo:
+      // @ts-ignore
+      mv([item.path], props.path);
     },
   }));