template files

libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts

+import React from 'react'
+import { File } from '../types'
+import { extractNameFromKey, extractParentFromKey } from '../utils'
+
+const globalRegistry = require('../../../../../../apps/remix-ide/src/global/registry')
+const fileProviders = globalRegistry.get('fileproviders').api
+const browser = fileProviders.browser // eslint-disable-line
+const workspace = fileProviders.workspace
+const localhost = fileProviders.localhost // eslint-disable-line
+
+export const fetchDirectoryError = (error: any) => {
+  return {
+    type: 'FETCH_DIRECTORY_ERROR',
+    payload: error
+  }
+}
+
+export const fetchDirectoryRequest = (promise: Promise<any>) => {
+  return {
+    type: 'FETCH_DIRECTORY_REQUEST',
+    payload: promise
+  }
+}
+
+export const fetchDirectorySuccess = (path: string, files: File[]) => {
+  return {
+    type: 'FETCH_DIRECTORY_SUCCESS',
+    payload: { path, files }
+  }
+}
+
+export const fileSystemReset = () => {
+  return {
+    type: 'FILESYSTEM_RESET'
+  }
+}
+
+const normalize = (filesList): File[] => {
+  const folders = []
+  const files = []
+
+  Object.keys(filesList || {}).forEach(key => {
+    key = key.replace(/^\/|\/$/g, '') // remove first and last slash
+    let path = key
+    path = path.replace(/^\/|\/$/g, '') // remove first and last slash
+
+    if (filesList[key].isDirectory) {
+      folders.push({
+        path,
+        name: extractNameFromKey(path),
+        isDirectory: filesList[key].isDirectory
+      })
+    } else {
+      files.push({
+        path,
+        name: extractNameFromKey(path),
+        isDirectory: filesList[key].isDirectory
+      })
+    }
+  })
+
+  return [...folders, ...files]
+}
+
+const fetchDirectoryContent = async (folderPath: string): Promise<File[]> => {
+  return new Promise((resolve) => {
+    workspace.resolveDirectory(folderPath, (error, fileTree) => {
+      if (error) console.error(error)
+      const files = normalize(fileTree)
+
+      resolve(files)
+    })
+  })
+}
+
+export const fetchDirectory = (path: string) => (dispatch: React.Dispatch<any>) => {
+  const promise = fetchDirectoryContent(path)
+
+  dispatch(fetchDirectoryRequest(promise))
+  promise.then((files) => {
+    dispatch(fetchDirectorySuccess(path, files))
+  }).catch((error) => {
+    dispatch(fetchDirectoryError({ error }))
+  })
+  return promise
+}

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

@@ -260,10 +260,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const fetchDirectoryContent = async (folderPath: string): Promise<File[]> => {
+    console.log('folderPath: ', folderPath)
     return new Promise((resolve) => {
       filesProvider.resolveDirectory(folderPath, (_error, fileTree) => {
         const files = normalize(fileTree)
 
+        console.log('files: ', files)
         resolve(files)
       })
     })

libs/remix-ui/file-explorer/src/lib/reducers/fileSystem.ts

+import { extractNameFromKey, extractParentFromKey } from '../utils'
 interface Action {
     type: string;
-    payload: Record<string, string | number | boolean>;
+    payload: Record<string, any>;
 }
 
 export const initialState = {
   files: [],
+  expandPath: [],
   isRequesting: false,
   isSuccessful: false,
   hasError: null
@@ -22,7 +24,8 @@ export const reducer = (state = initialState, action: Action) => {
     }
     case 'FETCH_DIRECTORY_SUCCESS': {
       return {
-        files: [],
+        files: action.payload.files,
+        expandPath: [...action.payload.path],
         isRequesting: false,
         isSuccessful: true,
         hasError: null

libs/remix-ui/file-explorer/src/lib/utils/index.ts

+export const extractNameFromKey = (key: string): string => {
+  const keyPath = key.split('/')
+
+  return keyPath[keyPath.length - 1]
+}
+
+export const extractParentFromKey = (key: string):string => {
+  if (!key) return
+  const keyPath = key.split('/')
+  keyPath.pop()
+
+  return keyPath.join('/')
+}