From 21769bdf6d5f86d36d4dca69caff339de445604a Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 27 Aug 2021 15:30:19 +0100 Subject: [PATCH] Fetch directory content on folder click --- .../file-explorer/src/lib/file-explorer.tsx | 14 +------ .../workspace/src/lib/actions/workspace.ts | 28 +++++++++++--- .../workspace/src/lib/reducers/workspace.ts | 38 ++++++++++++++++--- .../workspace/src/lib/remix-ui-workspace.tsx | 29 -------------- 4 files changed, 56 insertions(+), 53 deletions(-) diff --git a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx b/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx index fd59f1ede2..3378b6a576 100644 --- a/libs/remix-ui/file-explorer/src/lib/file-explorer.tsx +++ b/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)))] } diff --git a/libs/remix-ui/workspace/src/lib/actions/workspace.ts b/libs/remix-ui/workspace/src/lib/actions/workspace.ts index eb6c4db475..5adf42a71c 100644 --- a/libs/remix-ui/workspace/src/lib/actions/workspace.ts +++ b/libs/remix-ui/workspace/src/lib/actions/workspace.ts @@ -45,10 +45,10 @@ const fetchDirectoryRequest = (promise: Promise) => { } } -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 }) => { diff --git a/libs/remix-ui/workspace/src/lib/reducers/workspace.ts b/libs/remix-ui/workspace/src/lib/reducers/workspace.ts index bce94ba85e..4bbc15cc79 100644 --- a/libs/remix-ui/workspace/src/lib/reducers/workspace.ts +++ b/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 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 => { diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx index 9d55cd1ace..bd14fd0892 100644 --- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx +++ b/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 ( <>