Fetch directory content on folder click

pull/1575/head
ioedeveloper 3 years ago
parent 587969bd8e
commit 049705d121
  1. 14
      libs/remix-ui/file-explorer/src/lib/file-explorer.tsx
  2. 28
      libs/remix-ui/workspace/src/lib/actions/workspace.ts
  3. 38
      libs/remix-ui/workspace/src/lib/reducers/workspace.ts
  4. 29
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.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)))]
}

@ -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()
// setWorkspace(LOCALHOST)
// props.plugin.fileManager.setMode('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 }) => {

@ -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 files = normalize(fileTree)
const fetchDirectoryContent = (state: BrowserState, payload: { fileTree, path: string }) => {
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> => {

@ -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 (
<>

Loading…
Cancel
Save