Setup localhost events

apps/remix-ide/src/app/files/remixDProvider.js

@@ -41,8 +41,8 @@ module.exports = class RemixDProvider extends FileProvider {
       this.event.emit('fileRenamed', oldPath, newPath)
     })
 
-    this._appManager.on('remixd', 'rootFolderChanged', () => {
-      this.event.emit('rootFolderChanged')
+    this._appManager.on('remixd', 'rootFolderChanged', (path) => {
+      this.event.emit('rootFolderChanged', path)
     })
   }
 

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

@@ -86,6 +86,13 @@ const fileRemovedSuccess = (removePath: string) => {
   }
 }
 
+const rootFolderChangedSuccess = (path: string) => {
+  return {
+    type: 'ROOT_FOLDER_CHANGED',
+    payload: path
+  }
+}
+
 const createWorkspaceTemplate = async (workspaceName: string, setDefaults = true, template: 'gist-template' | 'code-template' | 'default-template' = 'default-template') => {
   if (!workspaceName) throw new Error('workspace name cannot be empty')
   if (checkSpecialChars(workspaceName) || checkSlash(workspaceName)) throw new Error('special characters are not allowed')
@@ -215,13 +222,54 @@ const listenOnEvents = (provider) => {
   provider.event.on('fileRemoved', async (removePath) => {
     await executeEvent('fileRemoved', removePath)
   })
+
+  plugin.on('remixd', 'rootFolderChanged', async (path) => {
+    await executeEvent('rootFolderChanged', path)
+  })
+
+  provider.event.on('disconnected', () => {
+    dispatch(setMode('browser'))
+  })
+  // provider.event.on('connected', () => {
+  //   remixdExplorer.show()
+  //   setWorkspace(LOCALHOST)
+  // })
+
+  // provider.event.on('disconnected', () => {
+  //   remixdExplorer.hide()
+  // })
+
+  // provider.event.on('loading', () => {
+  //   remixdExplorer.loading()
+  // })
+
+  provider.event.on('fileExternallyChanged', async (path: string, file: { content: string }) => {
+    const config = plugin.registry.get('config').api
+    const editor = plugin.registry.get('editor').api
+
+    if (config.get('currentFile') === path && editor.currentContent() !== file.content) {
+      if (provider.isReadOnly(path)) return editor.setText(file.content)
+      dispatch(displayNotification(
+        path + ' changed',
+        'This file has been changed outside of Remix IDE.',
+        'Replace by the new content', 'Keep the content displayed in Remix',
+        () => {
+          editor.setText(file.content)
+        }
+      ))
+    }
+  })
+  provider.event.on('fileRenamedError', async () => {
+    dispatch(displayNotification('File Renamed Failed', '', 'Ok', 'Cancel'))
+  })
 }
 
 export const initWorkspace = (filePanelPlugin) => async (reducerDispatch: React.Dispatch<any>) => {
   if (filePanelPlugin) {
     plugin = filePanelPlugin
     dispatch = reducerDispatch
-    const provider = filePanelPlugin.fileProviders.workspace
+    const workspaceProvider = filePanelPlugin.fileProviders.workspace
+    const localhostProvider = filePanelPlugin.fileProviders.localhost
     const queryParams = new QueryParams()
     const params = queryParams.get()
     const workspaces = await getWorkspaces() || []
@@ -238,39 +286,17 @@ export const initWorkspace = (filePanelPlugin) => async (reducerDispatch: React.
         dispatch(setCurrentWorkspace('default_workspace'))
       } else {
         if (workspaces.length > 0) {
-          provider.setWorkspace(workspaces[workspaces.length - 1])
+          workspaceProvider.setWorkspace(workspaces[workspaces.length - 1])
           dispatch(setCurrentWorkspace(workspaces[workspaces.length - 1]))
         }
       }
     }
 
-    listenOnEvents(provider)
+    listenOnEvents(workspaceProvider)
+    listenOnEvents(localhostProvider)
     // provider.event.on('fileRenamed', async (oldPath) => {
     //   await executeEvent('fileRenamed', oldPath)
     // })
-    // provider.event.on('rootFolderChanged', async () => {
-    //   await executeEvent('rootFolderChanged')
-    // })
-    // provider.event.on('fileExternallyChanged', async (path: string, file: { content: string }) => {
-    //   const config = plugin.registry.get('config').api
-    //   const editor = plugin.registry.get('editor').api
-
-    //   if (config.get('currentFile') === path && editor.currentContent() !== file.content) {
-    //     if (provider.isReadOnly(path)) return editor.setText(file.content)
-    //     dispatch(displayNotification(
-    //       path + ' changed',
-    //       'This file has been changed outside of Remix IDE.',
-    //       'Replace by the new content', 'Keep the content displayed in Remix',
-    //       () => {
-    //         editor.setText(file.content)
-    //       }
-    //     ))
-    //   }
-    // })
-    // provider.event.on('fileRenamedError', async () => {
-    //   dispatch(displayNotification('File Renamed Failed', '', 'Ok', 'Cancel'))
-    // })
-    // dispatch(fetchProviderSuccess(provider))
 
     // provider.event.on('createWorkspace', (name) => {
     //   createNewWorkspace(name)
@@ -280,26 +306,6 @@ export const initWorkspace = (filePanelPlugin) => async (reducerDispatch: React.
   }
 }
 
-export const initLocalhost = (filePanelPlugin) => async (dispatch: React.Dispatch<any>) => {
-  if (filePanelPlugin) {
-  // plugin.fileProviders.localhost.event.off('disconnected', localhostDisconnect)
-  // plugin.fileProviders.localhost.event.on('disconnected', localhostDisconnect)
-  // plugin.fileProviders.localhost.event.on('connected', () => {
-  //   remixdExplorer.show()
-  //   setWorkspace(LOCALHOST)
-  // })
-
-    // plugin.fileProviders.localhost.event.on('disconnected', () => {
-    //   remixdExplorer.hide()
-    // })
-
-    // plugin.fileProviders.localhost.event.on('loading', () => {
-    //   remixdExplorer.loading()
-    // })
-    dispatch(setMode('localhost'))
-  }
-}
-
 export const fetchDirectory = (path: string) => (dispatch: React.Dispatch<any>) => {
   const provider = plugin.fileManager.currentFileProvider()
   const promise = new Promise((resolve) => {
@@ -341,11 +347,9 @@ const fileRemoved = async (removePath: string) => {
 //   await dispatch(fileRenamedSuccess(path, oldPath, data))
 // }
 
-// const rootFolderChanged = async () => {
-//   const workspaceName = provider.workspace || provider.type || ''
-
-//   await fetchDirectory(provider, workspaceName)(dispatch)
-// }
+const rootFolderChanged = async (path) => {
+  await dispatch(rootFolderChangedSuccess(path))
+}
 
 const executeEvent = async (eventName: 'fileAdded' | 'folderAdded' | 'fileRemoved' | 'fileRenamed' | 'rootFolderChanged', path?: string) => {
   if (Object.keys(pendingEvents).length) {
@@ -383,24 +387,24 @@ const executeEvent = async (eventName: 'fileAdded' | 'folderAdded' | 'fileRemove
       }
       break
 
-    // case 'fileRenamed':
-    //   await fileRenamed(path)
-    //   delete pendingEvents[eventName + path]
-    //   if (queuedEvents.length) {
-    //     const next = queuedEvents.pop()
-
-    //     await executeEvent(next.eventName, next.path)
-    //   }
-    //   break
-
-    // case 'rootFolderChanged':
-    //   await rootFolderChanged()
-    //   delete pendingEvents[eventName + path]
-    //   if (queuedEvents.length) {
-    //     const next = queuedEvents.pop()
-
-    //     await executeEvent(next.eventName, next.path)
-    //   }
-    //   break
+      // case 'fileRenamed':
+      //   await fileRenamed(path)
+      //   delete pendingEvents[eventName + path]
+      //   if (queuedEvents.length) {
+      //     const next = queuedEvents.pop()
+
+      //     await executeEvent(next.eventName, next.path)
+      //   }
+      //   break
+
+    case 'rootFolderChanged':
+      await rootFolderChanged(path)
+      delete pendingEvents[eventName + path]
+      if (queuedEvents.length) {
+        const next = queuedEvents.pop()
+
+        await executeEvent(next.eventName, next.path)
+      }
+      break
   }
 }

libs/remix-ui/workspace/src/lib/contexts/index.ts

@@ -5,6 +5,5 @@ export const FileSystemContext = createContext<{
   fs: BrowserState,
   modal:(title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
   dispatchInitWorkspace:() => void,
-  dispatchInitLocalhost:() => void,
   dispatchFetchDirectory:(path: string) => void
     }>(null)

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

@@ -4,7 +4,7 @@ import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { FileSystemContext } from '../contexts'
 import { browserReducer, browserInitialState } from '../reducers/workspace'
-import { initWorkspace, initLocalhost, fetchDirectory } from '../actions/workspace'
+import { initWorkspace, fetchDirectory } from '../actions/workspace'
 import { Modal, WorkspaceProps } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Workspace } from '../remix-ui-workspace'
@@ -27,10 +27,6 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     await initWorkspace(plugin)(fsDispatch)
   }
 
-  const dispatchInitLocalhost = async () => {
-    await initLocalhost(plugin)(fsDispatch)
-  }
-
   const dispatchFetchDirectory = async (path: string) => {
     await fetchDirectory(path)(fsDispatch)
   }
@@ -79,7 +75,6 @@ export const FileSystemProvider = (props: WorkspaceProps) => {
     fs,
     modal,
     dispatchInitWorkspace,
-    dispatchInitLocalhost,
     dispatchFetchDirectory
   }
   return (

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

@@ -15,6 +15,7 @@ export interface BrowserState {
     error: string
   },
   localhost: {
+    sharedFolder: string,
     files: { [x: string]: Record<string, File> },
     expandPath: string[],
     isRequesting: boolean,
@@ -43,6 +44,7 @@ export const browserInitialState: BrowserState = {
     error: null
   },
   localhost: {
+    sharedFolder: '',
     files: {},
     expandPath: [],
     isRequesting: false,
@@ -231,6 +233,18 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
       }
     }
 
+    case 'ROOT_FOLDER_CHANGED': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        localhost: {
+          ...state.localhost,
+          sharedFolder: payload
+        }
+      }
+    }
+
     default:
       throw new Error()
   }

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

@@ -27,11 +27,17 @@ export function Workspace (props: WorkspaceProps) {
   }, [])
 
   useEffect(() => {
-    if (global.fs.browser.currentWorkspace) {
+    if (global.fs.mode === 'browser') {
       setCurrentWorkspace(global.fs.browser.currentWorkspace)
       global.dispatchFetchDirectory(global.fs.browser.currentWorkspace)
+    } else if (global.fs.mode === 'localhost') {
+      global.dispatchFetchDirectory('localhost')
     }
-  }, [global.fs.browser.currentWorkspace])
+  }, [global.fs.browser.currentWorkspace, global.fs.localhost.sharedFolder])
+
+  useEffect(() => {
+    if (global.fs.mode === 'localhost') setCurrentWorkspace(LOCALHOST)
+  }, [global.fs.mode])
 
   props.plugin.resetNewFile = () => {
     setState(prevState => {
@@ -65,15 +71,6 @@ export function Workspace (props: WorkspaceProps) {
     return { name: currentWorkspace, isLocalhost: currentWorkspace === LOCALHOST, absolutePath: `${props.plugin.workspace.workspacesPath}/${currentWorkspace}` }
   }
 
-  const localhostDisconnect = () => {
-    if (currentWorkspace === LOCALHOST) setWorkspace(props.plugin.workspaces.length > 0 ? props.plugin.workspaces[0] : NO_WORKSPACE)
-    // This should be removed some time after refactoring: https://github.com/ethereum/remix-project/issues/1197
-    else {
-      setWorkspace(currentWorkspace) // Useful to switch to last selcted workspace when remixd is disconnected
-      props.plugin.fileManager.setMode('browser')
-    }
-  }
-
   const createNewWorkspace = async (workspaceName) => {
     try {
       await props.plugin.fileManager.closeAllFiles()

libs/remixd/src/services/remixdClient.ts

@@ -23,7 +23,7 @@ export class RemixdClient extends PluginClient {
 
   sharedFolder (currentSharedFolder: string): void {
     this.currentSharedFolder = currentSharedFolder
-    if (this.isLoaded) this.emit('rootFolderChanged')
+    if (this.isLoaded) this.emit('rootFolderChanged', this.currentSharedFolder)
   }
 
   list (): Filelist {