Fetch directory content on folder click

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

@@ -7,7 +7,7 @@ import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
 import { FileExplorerContextMenu } from './file-explorer-context-menu' // eslint-disable-line
 import { FileExplorerProps, File, MenuItems, FileExplorerState } from './types'
 import { fileSystemReducer, fileSystemInitialState } from './reducers/fileSystem'
-import { init, resolveDirectory, addInputField, removeInputField } from './actions/fileSystem'
+import { addInputField, removeInputField } from './actions/fileSystem'
 import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
 import QueryParams from '../../../../../apps/remix-ide/src/lib/query-params'
 import { FileSystemContext } from '@remix-ui/workspace'
@@ -53,16 +53,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
   const editRef = useRef(null)
   const global = useContext(FileSystemContext)
 
-  useEffect(() => {
-    init(props.filesProvider, props.plugin, props.registry)(dispatch)
-  }, [])
-
-  useEffect(() => {
-    if (fileSystem.notification.message) {
-      global.modal(fileSystem.notification.title, fileSystem.notification.message, fileSystem.notification.labelOk, fileSystem.notification.actionOk, fileSystem.notification.labelCancel, fileSystem.notification.actionCancel)
-    }
-  }, [fileSystem.notification.message])
-
   useEffect(() => {
     if (global.fs.mode === 'browser') {
       setState(prevState => {
@@ -550,7 +540,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
       if (!state.expandPath.includes(path)) {
         expandPath = [...new Set([...state.expandPath, path])]
-        resolveDirectory(fileSystem.provider.provider, path)(dispatch)
+        global.dispatchFetchDirectory(path)
       } else {
         expandPath = [...new Set(state.expandPath.filter(key => key && (typeof key === 'string') && !key.startsWith(path)))]
       }

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

@@ -45,10 +45,10 @@ const fetchDirectoryRequest = (promise: Promise<any>) => {
   }
 }
 
-const fetchDirectorySuccess = (path: string, files) => {
+const fetchDirectorySuccess = (path: string, fileTree) => {
   return {
     type: 'FETCH_DIRECTORY_SUCCESS',
-    payload: { path, files }
+    payload: { path, fileTree }
   }
 }
 
@@ -231,16 +231,32 @@ const listenOnEvents = (provider) => {
     dispatch(setMode('browser'))
   })
   // provider.event.on('connected', () => {
-  //   remixdExplorer.show()
+  //         props.plugin.fileManager.setMode('localhost')
-  //   setWorkspace(LOCALHOST)
+  // setState(prevState => {
+  //   return { ...prevState, hideRemixdExplorer: false, loadingLocalhost: false }
+  // })
   // })
 
   // provider.event.on('disconnected', () => {
-  //   remixdExplorer.hide()
+  //         // If 'connect to localhost' is clicked from home tab, mode is not 'localhost'
+  // if (props.fileManager.mode === 'localhost') {
+  // await setWorkspace(NO_WORKSPACE)
+  // props.plugin.fileManager.setMode('browser')
+  // setState(prevState => {
+  //   return { ...prevState, hideRemixdExplorer: true, loadingLocalhost: false }
+  // })
+  // } else {
+  //   // Hide spinner in file explorer
+  //   setState(prevState => {
+  //     return { ...prevState, loadingLocalhost: false }
+  //   })
+  // }
   // })
 
   // provider.event.on('loading', () => {
-  //   remixdExplorer.loading()
+  //         setState(prevState => {
+  //   return { ...prevState, loadingLocalhost: true }
+  // })
   // })
 
   provider.event.on('fileExternallyChanged', async (path: string, file: { content: string }) => {

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

@@ -117,20 +117,20 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
     }
 
     case 'FETCH_DIRECTORY_SUCCESS': {
-      const payload = action.payload as { path: string, files }
+      const payload = action.payload as { path: string, fileTree }
 
       return {
         ...state,
         browser: {
           ...state.browser,
-          files: state.mode === 'browser' ? fetchDirectoryContent(payload.files, payload.path) : state.browser.files,
+          files: state.mode === 'browser' ? fetchDirectoryContent(state, payload) : state.browser.files,
           isRequesting: false,
           isSuccessful: true,
           error: null
         },
         localhost: {
           ...state.localhost,
-          files: state.mode === 'localhost' ? fetchDirectoryContent(payload.files, payload.path) : state.localhost.files,
+          files: state.mode === 'localhost' ? fetchDirectoryContent(state, payload) : state.localhost.files,
           isRequesting: false,
           isSuccessful: true,
           error: null
@@ -250,10 +250,36 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
   }
 }
 
-const fetchDirectoryContent = (fileTree, folderPath: string) => {
+const fetchDirectoryContent = (state: BrowserState, payload: { fileTree, path: string }) => {
-  const files = normalize(fileTree)
+  if (state.mode === 'browser') {
+    if (payload.path === state.browser.currentWorkspace) {
+      const files = normalize(payload.fileTree)
 
-  return { [extractNameFromKey(folderPath)]: files }
+      return { [state.browser.currentWorkspace]: files }
+    } else {
+      let files = state.browser.files
+      const _path = splitPath(state, payload.path)
+      const prevFiles = _.get(files, _path)
+
+      prevFiles.child = _.merge(normalize(payload.fileTree), prevFiles.child)
+      files = _.set(files, _path, prevFiles)
+      return files
+    }
+  } else {
+    if (payload.path === state.mode) {
+      const files = normalize(payload.fileTree)
+
+      return { [state.mode]: files }
+    } else {
+      let files = state.localhost.files
+      const _path = splitPath(state, payload.path)
+      const prevFiles = _.get(files, _path)
+
+      prevFiles.child = _.merge(normalize(payload.fileTree), prevFiles.child)
+      files = _.set(files, _path, prevFiles)
+      return files
+    }
+  }
 }
 
 const normalize = (filesList): Record<string, File> => {

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -168,35 +168,6 @@ export function Workspace (props: WorkspaceProps) {
     })
   }
 
-  const remixdExplorer = {
-    hide: async () => {
-      // If 'connect to localhost' is clicked from home tab, mode is not 'localhost'
-      // if (props.fileManager.mode === 'localhost') {
-      await setWorkspace(NO_WORKSPACE)
-      props.plugin.fileManager.setMode('browser')
-      setState(prevState => {
-        return { ...prevState, hideRemixdExplorer: true, loadingLocalhost: false }
-      })
-      // } else {
-      //   // Hide spinner in file explorer
-      //   setState(prevState => {
-      //     return { ...prevState, loadingLocalhost: false }
-      //   })
-      // }
-    },
-    show: () => {
-      props.plugin.fileManager.setMode('localhost')
-      setState(prevState => {
-        return { ...prevState, hideRemixdExplorer: false, loadingLocalhost: false }
-      })
-    },
-    loading: () => {
-      setState(prevState => {
-        return { ...prevState, loadingLocalhost: true }
-      })
-    }
-  }
-
   const createModalMessage = () => {
     return (
       <>