Fixed file/folder removed bug

libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts

@@ -165,10 +165,10 @@ export const folderAddedSuccess = (path: string, files) => {
   }
 }
 
-export const fileRemovedSuccess = (path: string, removePath: string, files) => {
+export const fileRemovedSuccess = (path: string, removePath: string) => {
   return {
     type: 'FILE_REMOVED',
-    payload: { path, removePath, files }
+    payload: { path, removePath }
   }
 }
 
@@ -184,15 +184,12 @@ export const setProvider = (provider, workspaceName) => (dispatch: React.Dispatc
       const path = extractParentFromKey(folderPath) || workspaceName
       const data = await fetchDirectoryContent(provider, path)
 
-      console.log('data: ', data)
-
       dispatch(folderAddedSuccess(path, data))
     })
     provider.event.register('fileRemoved', async (removePath) => {
       const path = extractParentFromKey(removePath) || workspaceName
-      const data = await fetchDirectoryContent(provider, path)
 
-      dispatch(fileRemovedSuccess(path, removePath, data))
+      dispatch(fileRemovedSuccess(path, removePath))
     })
     provider.event.register('fileRenamed', async () => {
 
@@ -229,20 +226,13 @@ export const addInputField = (provider, type: string, path: string) => (dispatch
   return promise
 }
 
-export const removeInputFieldSuccess = (path: string, files: File[]) => {
+export const removeInputFieldSuccess = (path: string) => {
   return {
     type: 'REMOVE_INPUT_FIELD',
-    payload: { path, files }
+    payload: { path }
   }
 }
 
-export const removeInputField = (provider, path: string) => (dispatch: React.Dispatch<any>) => {
-  const promise = fetchDirectoryContent(provider, path)
-
-  promise.then((files) => {
-    dispatch(removeInputFieldSuccess(path, files))
-  }).catch((error) => {
-    console.error(error)
-  })
-  return promise
+export const removeInputField = (path: string) => (dispatch: React.Dispatch<any>) => {
+  return dispatch(removeInputFieldSuccess(path))
 }

libs/remix-ui/file-explorer/src/lib/file-explorer.tsx

@@ -654,7 +654,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
     if (!content || (content.trim() === '')) {
       if (state.focusEdit.isNew) {
-        removeInputField(fileSystem.provider.provider, parentFolder)(dispatch)
+        removeInputField(parentFolder)(dispatch)
         setState(prevState => {
           return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
         })
@@ -679,7 +679,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
       } else {
         if (state.focusEdit.isNew) {
           state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content))
-          removeInputField(fileSystem.provider.provider, parentFolder)(dispatch)
+          removeInputField(parentFolder)(dispatch)
         } else {
           const oldPath: string = state.focusEdit.element
           // const oldName = extractNameFromKey(oldPath)
@@ -768,6 +768,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
           ? 'bg-light border' : (state.focusContext.element === file.path) && (state.focusEdit.element !== file.path)
             ? 'bg-light border' : ''
     const icon = helper.getPathIcon(file.path)
+    const spreadProps = {
+      onClick: (e) => e.stopPropagation()
+    }
 
     if (file.isDirectory) {
       return (
@@ -799,12 +802,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
           }}
         >
           {
-            file.child ? <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`}>{
+            file.child ? <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps }>{
               Object.keys(file.child).map((key, index) => {
                 return renderFiles(file.child[key], index)
               })
             }
-            </TreeView> : <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} />
+            </TreeView> : <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps }/>
           }
         </TreeViewItem>
       )

libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts

@@ -153,7 +153,7 @@ export const fileSystemReducer = (state = fileSystemInitialState, action: Action
         ...state,
         files: {
           ...state.files,
-          files: removeInputField(state.files.workspaceName, state.files.blankPath, state.files.files, action.payload.files),
+          files: removeInputField(state.files.workspaceName, state.files.blankPath, state.files.files),
           blankPath: null,
           isRequesting: false,
           isSuccessful: true,
@@ -190,7 +190,7 @@ export const fileSystemReducer = (state = fileSystemInitialState, action: Action
         ...state,
         files: {
           ...state.files,
-          files: fileRemoved(state.files.workspaceName, action.payload.path, action.payload.removePath, state.files.files, action.payload.files),
+          files: fileRemoved(state.files.workspaceName, action.payload.path, action.payload.removePath, state.files.files),
           isRequesting: false,
           isSuccessful: true,
           error: null
@@ -211,29 +211,51 @@ const resolveDirectory = (root, path: string, files, content) => {
     return Array.isArray(cur) ? [...acc, ...cur] : [...acc, cur]
   }, [])
 
+  const prevFiles = _.get(files, _path)
+
+  files = _.set(files, _path, {
+    isDirectory: true,
+    path,
+    name: extractNameFromKey(path),
+    child: { ...content[pathArr[pathArr.length - 1]], ...prevFiles.child }
+  })
+
+  return files
+}
+
+const removePath = (root, path: string, pathName, files) => {
+  const pathArr: string[] = path.split('/').filter(value => value)
+
+  if (pathArr[0] !== root) pathArr.unshift(root)
+  const _path = pathArr.map((key, index) => index > 1 ? ['child', key] : key).reduce((acc: string[], cur) => {
+    return Array.isArray(cur) ? [...acc, ...cur] : [...acc, cur]
+  }, [])
+  const prevFiles = _.get(files, _path)
+
+  pathName && delete prevFiles.child[pathName]
   files = _.set(files, _path, {
     isDirectory: true,
     path,
     name: extractNameFromKey(path),
-    child: { ...content[pathArr[pathArr.length - 1]] }
+    child: prevFiles.child
   })
 
   return files
 }
 
 const addInputField = (root, path: string, files, content) => {
-  if (Object.keys(content)[0] === root) return { [Object.keys(content)[0]]: { ...content[Object.keys(content)[0]], ...files[Object.keys(content)[0]] } }
+  if (path === root) return { [root]: { ...content[root], ...files[root] } }
   const result = resolveDirectory(root, path, files, content)
 
   return result
 }
 
-const removeInputField = (root, path: string, files, content) => {
-  if (Object.keys(content)[0] === root) {
+const removeInputField = (root, path: string, files) => {
+  if (path === root) {
     delete files[root][path + '/' + 'blank']
     return files
   }
-  return resolveDirectory(root, path, files, content)
+  return removePath(root, path, path + '/' + 'blank', files)
 }
 
 const fileAdded = (root, path: string, files, content) => {
@@ -244,12 +266,11 @@ const folderAdded = (root, path: string, files, content) => {
   return resolveDirectory(root, path, files, content)
 }
 
-const fileRemoved = (root, path: string, removedPath: string, files, content) => {
+const fileRemoved = (root, path: string, removedPath: string, files) => {
   if (path === root) {
-    const allFiles = { [root]: { ...content[root], ...files[root] } }
+    delete files[root][removedPath]
 
-    delete allFiles[root][removedPath]
-    return allFiles
+    return files
   }
-  return resolveDirectory(root, path, files, content)
+  return removePath(root, path, extractNameFromKey(removedPath), files)
 }