split files to fix circular dependency errors

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

 import { extractParentFromKey } from '@remix-ui/helper'
 import React from 'react'
 import { action } from '../types'
-import { displayNotification, displayPopUp, fileAddedSuccess, fileRemovedSuccess, fileRenamedSuccess, folderAddedSuccess, removeContextMenuItem, rootFolderChangedSuccess, setContextMenuItem } from './payload'
+import { displayNotification, displayPopUp, fileAddedSuccess, fileRemovedSuccess, fileRenamedSuccess, folderAddedSuccess, loadLocalhostError, loadLocalhostRequest, loadLocalhostSuccess, removeContextMenuItem, rootFolderChangedSuccess, setContextMenuItem, setMode } from './payload'
 import { addInputField, createWorkspace, fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile } from './workspace'
 
 const queuedEvents = []
@@ -61,28 +61,25 @@ export const listenOnProviderEvents = (provider) => async (reducerDispatch: Reac
     await executeEvent('fileRenamed', oldPath, newPath)
   })
 
-  // provider.event.on('disconnected', () => {
-  //   dispatch(setMode('browser'))
-  // })
-
-  provider.event.on('connected', async () => {
-    fetchWorkspaceDirectory('/')
-    // setState(prevState => {
-    //   return { ...prevState, hideRemixdExplorer: false, loadingLocalhost: false }
-    // })
-  })
-
   provider.event.on('disconnected', async () => {
+    plugin.fileManager.setMode('browser')
+    dispatch(setMode('browser'))
+    dispatch(loadLocalhostError('Remixd disconnected!'))
     const workspaceProvider = plugin.fileProviders.workspace
 
     await switchToWorkspace(workspaceProvider.workspace)
   })
 
+  provider.event.on('connected', async () => {
+    plugin.fileManager.setMode('localhost')
+    dispatch(setMode('localhost'))
+    fetchWorkspaceDirectory('/')
+    dispatch(loadLocalhostSuccess())
+  })
+
   provider.event.on('loadingLocalhost', async () => {
     await switchToWorkspace(LOCALHOST)
-    // setState(prevState => {
-    //   return { ...prevState, loadingLocalhost: true }
-    // })
+    dispatch(loadLocalhostRequest())
   })
 
   provider.event.on('fileExternallyChanged', async (path: string, file: { content: string }) => {

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

@@ -207,3 +207,22 @@ export const setExpandPath = (paths: string[]) => {
     payload: paths
   }
 }
+
+export const loadLocalhostError = (error: any) => {
+  return {
+    type: 'LOAD_LOCALHOST_ERROR',
+    payload: error
+  }
+}
+
+export const loadLocalhostRequest = () => {
+  return {
+    type: 'LOAD_LOCALHOST_REQUEST'
+  }
+}
+
+export const loadLocalhostSuccess = () => {
+  return {
+    type: 'LOAD_LOCALHOST_SUCCESS'
+  }
+}

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

@@ -10,7 +10,6 @@ import '../css/file-explorer.css'
 import { checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath } from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { FileRender } from './file-render'
-import { handleExpandPath } from '../actions/workspace'
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const { name, contextMenuItems, removedContextMenuItems, files } = props
@@ -404,7 +403,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
     } else {
       expandPath = [...new Set(props.expandPath.filter(key => key && (typeof key === 'string') && !key.startsWith(props.name)))]
     }
-    handleExpandPath(expandPath)
+    props.dispatchHandleExpandPath(expandPath)
   }
 
   return (

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

@@ -5,7 +5,7 @@ import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { FileSystemContext } from '../contexts'
 import { browserReducer, browserInitialState } from '../reducers/workspace'
-import { initWorkspace, fetchDirectory, addInputField, removeInputField, createWorkspace, fetchWorkspaceDirectory, switchToWorkspace, renameWorkspace, deleteWorkspace, clearPopUp, publishToGist, uploadFile, createNewFile, setFocusElement, createNewFolder, deletePath, renamePath, copyFile, copyFolder, runScript, emitContextMenuEvent, handleClickFile, handleExpandPath } from '../actions/workspace'
+import { initWorkspace, fetchDirectory, removeInputField, deleteWorkspace, clearPopUp, publishToGist, createNewFile, setFocusElement, createNewFolder, deletePath, renamePath, copyFile, copyFolder, runScript, emitContextMenuEvent, handleClickFile, handleExpandPath, addInputField, createWorkspace, fetchWorkspaceDirectory, renameWorkspace, switchToWorkspace, uploadFile } from '../actions'
 import { Modal, WorkspaceProps } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { Workspace } from '../remix-ui-workspace'

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

@@ -533,6 +533,44 @@ export const browserReducer = (state = browserInitialState, action: Action) => {
       }
     }
 
+    case 'LOAD_LOCALHOST_REQUEST': {
+      return {
+        ...state,
+        localhost: {
+          ...state.localhost,
+          isRequesting: true,
+          isSuccessful: false,
+          error: null
+        }
+      }
+    }
+
+    case 'LOAD_LOCALHOST_SUCCESS': {
+      return {
+        ...state,
+        localhost: {
+          ...state.localhost,
+          isRequesting: false,
+          isSuccessful: true,
+          error: null
+        }
+      }
+    }
+
+    case 'LOAD_LOCALHOST_ERROR': {
+      const payload = action.payload as string
+
+      return {
+        ...state,
+        localhost: {
+          ...state.localhost,
+          isRequesting: false,
+          isSuccessful: false,
+          error: payload
+        }
+      }
+    }
+
     default:
       throw new Error()
   }

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

 import React, { useState, useEffect, useRef, useContext } from 'react' // eslint-disable-line
 import { FileExplorer } from './components/file-explorer' // eslint-disable-line
 import './css/remix-ui-workspace.css'
-import { WorkspaceState } from './types'
 import { FileSystemContext } from './contexts'
 
 const canUpload = window.File || window.FileReader || window.FileList || window.Blob
@@ -9,11 +8,6 @@ const canUpload = window.File || window.FileReader || window.FileList || window.
 export function Workspace () {
   const LOCALHOST = ' - connect to localhost - '
   const NO_WORKSPACE = ' - none - '
-  const [state] = useState<WorkspaceState>({
-    hideRemixdExplorer: true,
-    displayNewFile: false,
-    loadingLocalhost: false
-  })
   const [currentWorkspace, setCurrentWorkspace] = useState<string>(NO_WORKSPACE)
   const global = useContext(FileSystemContext)
   const workspaceRenameInput = useRef()
@@ -215,9 +209,9 @@ export function Workspace () {
               }
             </div>
             {
-              state.loadingLocalhost ? <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>
+              global.fs.localhost.isRequesting ? <div className="text-center py-5"><i className="fas fa-spinner fa-pulse fa-2x"></i></div>
                 : <div className='pl-2 filesystemexplorer remixui_treeview'>
-                  { global.fs.mode === 'localhost' &&
+                  { global.fs.mode === 'localhost' && global.fs.localhost.isSuccessful &&
                       <FileExplorer
                         name='localhost'
                         menuItems={['createNewFile', 'createNewFolder']}