From 1adb50621c9cd727b3e07f33e26f796cf6360072 Mon Sep 17 00:00:00 2001
From: mhsh312 <mahesh.khatri.0312@gmail.com>
Date: Thu, 8 Feb 2024 21:00:21 +0530
Subject: [PATCH 1/2] ui changes

---
 client/modules/IDE/components/FileNode.jsx | 47 +++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 0b6424a783..42c7c52830 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -230,6 +230,45 @@ class FileNode extends React.Component {
     this.props.hideFolderChildren(this.props.id);
   };
 
+  handleDrag = (e) => {
+    e.dataTransfer.setData('text', `${this.props.id} ${this.props.parentId}`);
+  };
+
+  handleDragOver = (e) => {
+    e.preventDefault();
+    if (this.props.fileType === 'folder') {
+      e.target.parentNode.parentNode.style.border = '1px solid #ed225d';
+    } else if (this.props.fileType === 'file') {
+      e.target.parentNode.parentNode.parentNode.parentNode.parentNode.style.border =
+        '1px solid #ed225d';
+    }
+  };
+
+  handleDragLeave = (e) => {
+    e.preventDefault();
+    if (this.props.fileType === 'folder') {
+      e.target.parentNode.parentNode.style.border = null;
+    } else if (this.props.fileType === 'file') {
+      e.target.parentNode.parentNode.parentNode.parentNode.parentNode.style.border = null;
+    }
+  };
+
+  handleDrop = (e) => {
+    e.preventDefault();
+    const dragPayload = e.dataTransfer.getData('text');
+    const [id, oldParentId] = dragPayload.split(' ');
+    let newParentId = null;
+    if (this.props.fileType === 'folder') {
+      newParentId = this.props.id;
+      this.props.showFolderChildren(this.props.id);
+      e.target.parentNode.parentNode.style.border = null;
+    } else if (this.props.fileType === 'file') {
+      e.target.parentNode.parentNode.parentNode.parentNode.parentNode.style.border = null;
+      newParentId = this.props.parentId;
+    }
+    this.props.changeParent(id, oldParentId, newParentId);
+  };
+
   renderChild = (childId) => (
     <li key={childId}>
       <ConnectedFileNode
@@ -258,10 +297,15 @@ class FileNode extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className={itemClass}>
+      <div className={itemClass} onLoad={() => this.getRootID()}>
         {!isRoot && (
           <div
             className="file-item__content"
+            draggable
+            onDragStart={(e) => this.handleDrag(e)}
+            onDrop={(e) => this.handleDrop(e)}
+            onDragOver={(e) => this.handleDragOver(e)}
+            onDragLeave={(e) => this.handleDragLeave(e)}
             onContextMenu={this.toggleFileOptions}
           >
             <span className="file-item__spacer"></span>
@@ -418,6 +462,7 @@ FileNode.propTypes = {
   deleteFile: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
   resetSelectedFile: PropTypes.func.isRequired,
+  changeParent: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
   newFolder: PropTypes.func.isRequired,
   showFolderChildren: PropTypes.func.isRequired,

From 5d0ad992530655d0587a0c9d766611035fe1b8da Mon Sep 17 00:00:00 2001
From: mhsh312 <mahesh.khatri.0312@gmail.com>
Date: Thu, 8 Feb 2024 21:07:07 +0530
Subject: [PATCH 2/2] redux changes

---
 client/constants.js                  |  1 +
 client/modules/IDE/actions/files.js  | 10 ++++++++++
 client/modules/IDE/reducers/files.js | 17 +++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/client/constants.js b/client/constants.js
index 9c5f9ae353..73b58b820d 100644
--- a/client/constants.js
+++ b/client/constants.js
@@ -63,6 +63,7 @@ export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
 export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';
+export const CHANGE_PARENT = 'CHANGE_PARENT';
 export const DELETE_FILE = 'DELETE_FILE';
 
 export const SET_AUTOSAVE = 'SET_AUTOSAVE';
diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js
index f87f5d1c6d..69318d5107 100644
--- a/client/modules/IDE/actions/files.js
+++ b/client/modules/IDE/actions/files.js
@@ -53,6 +53,16 @@ export function createFile(file, parentId) {
   };
 }
 
+export function changeParent(id, oldParentId, newParentId) {
+  return (dispatch) =>
+    dispatch({
+      type: ActionTypes.CHANGE_PARENT,
+      id,
+      oldParentId,
+      newParentId
+    });
+}
+
 export function submitFile(formProps, files, parentId, projectId) {
   if (projectId) {
     const postParams = {
diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js
index de1b9b1aa7..65a4dfe8fd 100644
--- a/client/modules/IDE/reducers/files.js
+++ b/client/modules/IDE/reducers/files.js
@@ -108,6 +108,20 @@ function updateParent(state, action) {
   });
 }
 
+function changeParent(state, action) {
+  return state.map((file) => {
+    // Add to children list of new parent
+    if (file.id === action.newParentId) {
+      file.children = [...file.children, action.id];
+    }
+    // Remove from children list of old parent
+    else if (file.id === action.oldParentId) {
+      file.children = file.children.filter((childId) => childId !== action.id);
+    }
+    return file;
+  });
+}
+
 function renameFile(state, action) {
   return state.map((file) => {
     if (file.id !== action.id) {
@@ -230,6 +244,9 @@ const files = (state, action) => {
         return file;
       });
     }
+    case ActionTypes.CHANGE_PARENT: {
+      return changeParent(state, action);
+    }
     case ActionTypes.DELETE_FILE: {
       const newState = deleteMany(state, [
         action.id,