folderAdded and rename

libs/remix-ui/workspace/src/lib/actions/workspace.ts

@@ -1,7 +1,7 @@
 import React from 'react'
 import { bufferToHex, keccakFromString } from 'ethereumjs-util'
 import axios, { AxiosResponse } from 'axios'
-import { checkSpecialChars, checkSlash } from '@remix-ui/helper'
+import { checkSpecialChars, checkSlash, extractParentFromKey } from '@remix-ui/helper'
 
 const QueryParams = require('../../../../../../apps/remix-ide/src/lib/query-params')
 const examples = require('../../../../../../apps/remix-ide/src/app/editor/examples')
@@ -72,10 +72,10 @@ const fileAddedSuccess = (filePath: string) => {
   }
 }
 
-const folderAddedSuccess = (folderPath: string) => {
+const folderAddedSuccess = (folderPath: string, fileTree) => {
   return {
     type: 'FOLDER_ADDED_SUCCESS',
-    payload: folderPath
+    payload: { path: folderPath, fileTree }
   }
 }
 
@@ -86,10 +86,10 @@ const fileRemovedSuccess = (removePath: string) => {
   }
 }
 
-const fileRenamedSuccess = (oldPath: string, newPath: string) => {
+const fileRenamedSuccess = (path: string, oldPath: string, fileTree) => {
   return {
     type: 'FILE_RENAMED_SUCCESS',
-    payload: { oldPath, newPath }
+    payload: { path, oldPath, fileTree }
   }
 }
 
@@ -413,15 +413,45 @@ const fileAdded = async (filePath: string) => {
 }
 
 const folderAdded = async (folderPath: string) => {
-  await dispatch(folderAddedSuccess(folderPath))
+  const provider = plugin.fileManager.currentFileProvider()
+  const path = extractParentFromKey(folderPath) || provider.workspace || provider.type || ''
+
+  const promise = new Promise((resolve) => {
+    provider.resolveDirectory(path, (error, fileTree) => {
+      if (error) console.error(error)
+
+      resolve(fileTree)
+    })
+  })
+
+  promise.then((files) => {
+    dispatch(folderAddedSuccess(path, files))
+  }).catch((error) => {
+    console.error(error)
+  })
+  return promise
 }
 
 const fileRemoved = async (removePath: string) => {
   await dispatch(fileRemovedSuccess(removePath))
 }
 
-const fileRenamed = async (oldPath: string, newPath: string) => {
-  await dispatch(fileRenamedSuccess(oldPath, newPath))
+const fileRenamed = async (oldPath: string) => {
+  const provider = plugin.fileManager.currentFileProvider()
+  const path = extractParentFromKey(oldPath) || provider.workspace || provider.type || ''
+  const promise = new Promise((resolve) => {
+    provider.resolveDirectory(path, (error, fileTree) => {
+      if (error) console.error(error)
+
+      resolve(fileTree)
+    })
+  })
+
+  promise.then((files) => {
+    dispatch(fileRenamedSuccess(path, oldPath, files))
+  }).catch((error) => {
+    console.error(error)
+  })
 }
 
 const rootFolderChanged = async (path) => {
@@ -465,7 +495,7 @@ const executeEvent = async (eventName: 'fileAdded' | 'folderAdded' | 'fileRemove
       break
 
     case 'fileRenamed':
-      await fileRenamed(args[0], args[1])
+      await fileRenamed(args[0])
       delete pendingEvents[eventName + args[0]]
       if (queuedEvents.length) {
         const next = queuedEvents.pop()

libs/remix-ui/workspace/src/lib/reducers/workspace.ts

@@ -201,18 +201,18 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
     }
 
     case 'FOLDER_ADDED_SUCCESS': {
-      const payload = action.payload as string
+      const payload = action.payload as { path: string, fileTree }
 
       return {
         ...state,
         browser: {
           ...state.browser,
-          files: state.mode === 'browser' ? folderAdded(state, payload) : state.browser.files,
+          files: state.mode === 'browser' ? fetchDirectoryContent(state, payload) : state.browser.files,
           expandPath: state.mode === 'browser' ? [...new Set([...state.browser.expandPath, payload])] : state.browser.expandPath
         },
         localhost: {
           ...state.localhost,
-          files: state.mode === 'localhost' ? folderAdded(state, payload) : state.localhost.files,
+          files: state.mode === 'localhost' ? fetchDirectoryContent(state, payload) : state.localhost.files,
           expandPath: state.mode === 'localhost' ? [...new Set([...state.localhost.expandPath, payload])] : state.localhost.expandPath
         }
       }
@@ -290,17 +290,17 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
     }
 
     case 'FILE_RENAMED_SUCCESS': {
-      const payload = action.payload as { oldPath: string, newPath: string }
+      const payload = action.payload as { path: string, oldPath: string, fileTree }
 
       return {
         ...state,
         browser: {
           ...state.browser,
-          files: state.mode === 'browser' ? fileRenamed(state, payload) : state.browser.files
+          files: state.mode === 'browser' ? fetchDirectoryContent(state, payload, payload.oldPath) : state.browser.files
         },
         localhost: {
           ...state.localhost,
-          files: state.mode === 'localhost' ? fileRenamed(state, payload) : state.localhost.files
+          files: state.mode === 'localhost' ? fetchDirectoryContent(state, payload, payload.oldPath) : state.localhost.files
         }
       }
     }
@@ -323,27 +323,6 @@ const fileAdded = (state: BrowserState, path: string): { [x: string]: Record<str
   return files
 }
 
-const folderAdded = (state: BrowserState, path: string): { [x: string]: Record<string, File> } => {
-  let files = state.mode === 'browser' ? state.browser.files : state.localhost.files
-  const _path = splitPath(state, path)
-  const _dir = splitPath(state, extractParentFromKey(path))
-  const prevFiles = _.get(files, _dir)
-
-  if (prevFiles.child) {
-
-  } else {
-    
-  }
-
-  files = _.set(files, _path, {
-    path: path,
-    name: extractNameFromKey(path),
-    isDirectory: true,
-    type: 'folder'
-  })
-  return files
-}
-
 const fileRemoved = (state: BrowserState, path: string): { [x: string]: Record<string, File> } => {
   const files = state.mode === 'browser' ? state.browser.files : state.localhost.files
   const _path = splitPath(state, path)
@@ -352,28 +331,6 @@ const fileRemoved = (state: BrowserState, path: string): { [x: string]: Record<s
   return files
 }
 
-const fileRenamed = (state: BrowserState, payload: { oldPath: string, newPath: string }): { [x: string]: Record<string, File> } => {
-  let files = state.mode === 'browser' ? state.browser.files : state.localhost.files
-  const _oldPath = splitPath(state, payload.oldPath)
-  const _newPath = splitPath(state, payload.newPath)
-  const prevFiles = _.get(files, _oldPath)
-  const nextFiles = {
-    ...prevFiles,
-    path: payload.newPath,
-    name: extractNameFromKey(payload.newPath)
-  }
-
-  if (nextFiles.child) {
-    nextFiles.child = sortFolderAndFiles(nextFiles.child)
-    files = _.set(files, _newPath, nextFiles)
-  } else {
-    files = _.set(files, _newPath, nextFiles)
-    files = state.mode === 'browser' ? { [state.browser.currentWorkspace]: sortFolderAndFiles(files[state.browser.currentWorkspace]) } : { [state.mode]: sortFolderAndFiles(files[state.mode]) }
-  }
-  _.unset(files, _oldPath)
-  return files
-}
-
 // IDEA: Modify function to remove blank input field without fetching content
 const fetchDirectoryContent = (state: BrowserState, payload: { fileTree, path: string, type?: 'file' | 'folder' }, deletePath?: string) => {
   if (state.mode === 'browser') {
@@ -473,18 +430,3 @@ const splitPath = (state: BrowserState, path: string): string[] | string => {
 
   return _path
 }
-
-const sortFolderAndFiles = (filesList: Record<string, File>): Record<string, File> => {
-  const folders = {}
-  const files = {}
-
-  Object.keys(filesList || {}).forEach(key => {
-    if (filesList[key].isDirectory) {
-      folders[key] = filesList[key]
-    } else {
-      files[key] = filesList[key]
-    }
-  })
-
-  return Object.assign({}, folders, files)
-}