steps to flatten tree

apps/remix-ide/src/app/files/electronProvider.ts

@@ -44,6 +44,7 @@ export class ElectronProvider extends FileProvider {
   // isDirectory is already included
   // this is a more efficient version of the default implementation
   async resolveDirectory(path, cb) {
+    console.log('resolveDirectory', path)
     path = this.removePrefix(path)
     if (path.indexOf('/') !== 0) path = '/' + path
     try {
@@ -58,6 +59,7 @@ export class ElectronProvider extends FileProvider {
           // ^ ret does not accept path starting with '/'
         }
       }
+      console.log('resolveDirectory done')
       if (cb) cb(null, ret)
       return ret
     } catch (error) {

apps/remix-ide/src/app/files/fileProvider.ts

@@ -272,6 +272,7 @@ export default class FileProvider {
   }
 
   async resolveDirectory (path, cb) {
+    const startTime = Date.now()
     path = this.removePrefix(path)
     if (path.indexOf('/') !== 0) path = '/' + path
     try {
@@ -286,6 +287,7 @@ export default class FileProvider {
           // ^ ret does not accept path starting with '/'
         }
       }
+      console.log(`resolveDirectory ${path} took ${Date.now() - startTime} ms`)
       if (cb) cb(null, ret)
       return ret
     } catch (error) {

apps/remix-ide/src/index.tsx

@@ -19,9 +19,8 @@ import {Storage} from '@remix-project/remix-lib'
   theme.initTheme()
   
   render(
-    <React.StrictMode>
       <Preload></Preload>
-    </React.StrictMode>,
+    ,
     document.getElementById('root')
   )
   

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -5,11 +5,11 @@ import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
   const {id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = '', icon, controlBehaviour = false, innerRef, showIcon = true, ...otherProps} = props
-  const [isExpanded, setIsExpanded] = useState(false)
+
 
   useEffect(() => {
-    setIsExpanded(expand)
-  }, [expand])
+    //consolelog('tree view item', id)
+  },[id])
 
   return (
     <li ref={innerRef} key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className="li_tv" {...otherProps}>
@@ -17,16 +17,17 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
         key={`treeViewDiv${id}`}
         data-id={`treeViewDiv${id}`}
         className={`d-flex flex-row align-items-center ${labelClass}`}
-        onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}
+        onClick={() => !controlBehaviour // && setIsExpanded(!isExpanded)
+      }
       >
         {children && showIcon ? (
-          <div className={isExpanded ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
+          <div className={expand ? `pl-2 ${iconY}` : `pl-2 ${iconX} caret caret_tv`} style={{visibility: children ? 'visible' : 'hidden'}}></div>
         ) : icon ? (
           <div className={`pr-2 pl-2 ${icon} caret caret_tv`}></div>
         ) : null}
         <span className="w-100 ml-1 pl-2">{label}</span>
       </div>
-      {isExpanded ? children : null}
+      {expand ? children : null}
     </li>
   )
 }

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

@@ -140,7 +140,7 @@ export const createWorkspace = async (
     await plugin.setWorkspace({ name: workspaceName, isLocalhost: false })
     await plugin.workspaceCreated(workspaceName)
 
-    if (isGitRepo && createCommit) {
+    if (isGitRepo && createCommit && false) {
       const name = await plugin.call('settings', 'get', 'settings/github-user-name')
       const email = await plugin.call('settings', 'get', 'settings/github-email')
       const currentBranch = await plugin.call('dGitProvider', 'currentbranch')
@@ -182,8 +182,8 @@ export const createWorkspace = async (
     cb && cb(null, workspaceName)
     if (isGitRepo) {
       await checkGit()
-      const isActive = await plugin.call('manager', 'isActive', 'dgit')
-      if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+      //const isActive = await plugin.call('manager', 'isActive', 'dgit')
+      //if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
     }
     if (workspaceTemplateName === 'semaphore' || workspaceTemplateName === 'hashchecker' || workspaceTemplateName === 'rln') {
       const isCircomActive = await plugin.call('manager', 'isActive', 'circuit-compiler')
@@ -453,8 +453,8 @@ export const switchToWorkspace = async (name: string) => {
     await plugin.setWorkspace({ name, isLocalhost: false })
     const isGitRepo = await plugin.fileManager.isGitRepo()
     if (isGitRepo) {
-      const isActive = await plugin.call('manager', 'isActive', 'dgit')
-      if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+      //const isActive = await plugin.call('manager', 'isActive', 'dgit')
+      //if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
     }
     dispatch(setMode('browser'))
     dispatch(setCurrentWorkspace({ name, isGitRepo }))
@@ -610,9 +610,9 @@ export const cloneRepository = async (url: string) => {
       dispatch(cloneRepositoryRequest())
       promise
         .then(async () => {
-          const isActive = await plugin.call('manager', 'isActive', 'dgit')
+          //const isActive = await plugin.call('manager', 'isActive', 'dgit')
 
-          if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+          //if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
           await fetchWorkspaceDirectory(ROOT_PATH)
           const workspacesPath = plugin.fileProviders.workspace.workspacesPath
           const branches = await getGitRepoBranches(workspacesPath + '/' + repoName)
@@ -648,6 +648,7 @@ export const cloneRepository = async (url: string) => {
 }
 
 export const checkGit = async () => {
+  return
   const isGitRepo = await plugin.fileManager.isGitRepo()
   const hasGitSubmodule = await plugin.fileManager.hasGitSubmodules()
   dispatch(setCurrentWorkspaceIsGitRepo(isGitRepo))
@@ -677,6 +678,7 @@ export const getRepositoryTitle = async (url: string) => {
 }
 
 export const getGitRepoBranches = async (workspacePath: string) => {
+  return []
   const gitConfig: { fs: IndexedDBStorage; dir: string } = {
     fs: window.remixFileSystemCallback,
     dir: addSlash(workspacePath),
@@ -686,6 +688,7 @@ export const getGitRepoBranches = async (workspacePath: string) => {
 }
 
 export const getGitRepoCurrentBranch = async (workspaceName: string) => {
+  return ''
   const gitConfig: { fs: IndexedDBStorage; dir: string } = {
     fs: window.remixFileSystemCallback,
     dir: addSlash(workspaceName),
@@ -695,8 +698,9 @@ export const getGitRepoCurrentBranch = async (workspaceName: string) => {
 }
 
 export const showAllBranches = async () => {
-  const isActive = await plugin.call('manager', 'isActive', 'dgit')
-  if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
+  return
+  //const isActive = await plugin.call('manager', 'isActive', 'dgit')
+  //if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
   plugin.call('menuicons', 'select', 'dgit')
   plugin.call('dgit', 'open', 'branches')
 }
@@ -896,6 +900,7 @@ export const removeRecentElectronFolder = async (path: string) => {
 }
 
 export const hasLocalChanges = async () => {
+  return []
   const filesStatus = await plugin.call('dGitProvider', 'status')
   const uncommittedFiles = getUncommittedFiles(filesStatus)
 

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

@@ -0,0 +1,17 @@
+import { getPathIcon } from '@remix-ui/helper'
+import React, { SyntheticEvent, useEffect, useRef, useState } from 'react'
+export const FileBlok = (props: any) => {
+
+  const { file } = props
+
+  const handleFileClick = (event: SyntheticEvent) => {
+    event.stopPropagation()
+    props.handleClickFile(file.path, file.type)
+  }
+  return (
+    <>
+    
+      <div className={`pr-2 pl-2 ${getPathIcon(props.file.path)} caret caret_tv`}></div>
+      <div onClick={handleFileClick} className="btn">{props.file.name}</div>
+    </>)
+}

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

@@ -13,6 +13,7 @@ import {Drag, Draggable} from '@remix-ui/drag-n-drop'
 import {ROOT_PATH} from '../utils/constants'
 import { fileKeySort } from '../utils'
 import { moveFileIsAllowed, moveFolderIsAllowed } from '../actions'
+import { FileBlok } from './file-blok'
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const intl = useIntl()
@@ -334,11 +335,23 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }
 
+  useEffect(() => {
+    console.log('fe files changed', ROOT_PATH)
+
+  },[files])
+
+  useEffect(() => {
+    console.log('FE RENDER', ROOT_PATH)
+  },[])
+
   const dragStatus = (isDragged: boolean) => {
     props.dragStatus(isDragged)
   }
 
   useEffect(() => {
+    console.log('fe props', files)
+    return
+    console.log('fe props', files[ROOT_PATH])
     if (files[ROOT_PATH]){
       try {
         const children: FileType[] = files[ROOT_PATH] as any
@@ -380,7 +393,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
           <div>
             <TreeView id="treeViewMenu">
               {files[ROOT_PATH] &&
-                childrenKeys.map((key, index) => (
+                Object.keys(files[ROOT_PATH]).map((key, index) => (
+                  <>
                   <FileRender
                     file={files[ROOT_PATH][key]}
                     fileDecorations={fileState}
@@ -399,6 +413,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
                     hideIconsMenu={props.hideIconsMenu}
                     dragStatus={state.dragStatus}
                   />
+                  </>
                 ))
               }
             </TreeView>

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

@@ -23,6 +23,10 @@ export const FileLabel = (props: FileLabelProps) => {
   const [fileStateClasses, setFileStateClasses] = useState<string>('')
   const labelRef = useRef(null)
 
+  useEffect(() => {
+    //consolelog('file label', file)
+  },[file])
+
   useEffect(() => {
     if (focusEdit.element && file.path) {
       setIsEditable(focusEdit.element === file.path)

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

@@ -1,21 +1,21 @@
 // eslint-disable-next-line no-use-before-define
-import React, {SyntheticEvent, useEffect, useState} from 'react'
-import {FileType, WorkspaceElement} from '../types'
+import React, { SyntheticEvent, useEffect, useState } from 'react'
+import { FileType, WorkspaceElement } from '../types'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import {TreeView, TreeViewItem} from '@remix-ui/tree-view'
-import {getPathIcon} from '@remix-ui/helper'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { getPathIcon } from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import {FileLabel} from './file-label'
-import {fileDecoration, FileDecorationIcons} from '@remix-ui/file-decorators'
-import {Draggable} from '@remix-ui/drag-n-drop'
+import { FileLabel } from './file-label'
+import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators'
+import { Draggable } from '@remix-ui/drag-n-drop'
 import { fileKeySort } from '../utils'
 
 export interface RenderFileProps {
   file: FileType
   index: number
-  focusEdit: {element: string; type: string; isNew: boolean; lastEdit: string}
-  focusElement: {key: string; type: WorkspaceElement}[]
-  focusContext: {element: string; x: number; y: number; type: string}
+  focusEdit: { element: string; type: string; isNew: boolean; lastEdit: string }
+  focusElement: { key: string; type: WorkspaceElement }[]
+  focusContext: { element: string; x: number; y: number; type: string }
   ctrlKey: boolean
   expandPath: string[]
   hideIconsMenu?: React.Dispatch<React.SetStateAction<boolean>>
@@ -29,19 +29,24 @@ export interface RenderFileProps {
 }
 
 export const FileRender = (props: RenderFileProps) => {
-  const [file, setFile] = useState<FileType>({} as FileType)
+  const { file } = props
   const [hover, setHover] = useState<boolean>(false)
-  const [icon, setIcon] = useState<string>('')
+  //const [icon, setIcon] = useState<string>('')
   const [childrenKeys, setChildrenKeys] = useState<string[]>([])
 
   useEffect(() => {
-    if (props.file && props.file.path && props.file.type) {
-      setFile(props.file)
-      setIcon(getPathIcon(props.file.path))
-    }
+    //if (props.file && props.file.path && props.file.type) {
+    //  //consolelog('set icon', props.file.path)
+    //  setIcon(getPathIcon(props.file.path))
+    //}
   }, [props.file])
 
   useEffect(() => {
+    //consolelog('file render', props.file.path)
+  }, [])
+
+  useEffect(() => {
+    return
     if (file.child) {
       try {
         const children: FileType[] = file.child as any
@@ -96,8 +101,13 @@ export const FileRender = (props: RenderFileProps) => {
     event.stopPropagation()
     setHover(true)
   }
+  //consolelog('eval file render', file.path)
 
-  if (file.isDirectory) {
+  if (!file.path) return (<></>)
+
+  ///return (<><div className='btn btn-primary'>file</div></>)
+
+  if (file.isDirectory && false) {
     return (
       <TreeViewItem
         id={`treeViewItem${file.path}`}
@@ -124,7 +134,7 @@ export const FileRender = (props: RenderFileProps) => {
       >
         {file.child ? (
           <TreeView id={`treeView${file.path}`} key={`treeView${file.path}`} {...spreadProps}>
-            {childrenKeys.map((key, index) => (
+            {Object.keys(file.child).map((key, index) => (
               <FileRender
                 file={file.child[key]}
                 fileDecorations={props.fileDecorations}
@@ -148,28 +158,24 @@ export const FileRender = (props: RenderFileProps) => {
         )}
       </TreeViewItem>
     )
-  } else {
+  } else if (!file.isDirectory) {
+    //consolelog('start do file render', file.path)
     return (
-      <TreeViewItem
-        id={`treeViewItem${file.path}`}
-        key={`treeView${file.path}`}
-        label={
-          <>
-            <Draggable isDraggable={props.focusEdit.element !== null} file={file} expandedPath={props.expandPath} handleClickFolder={props.handleClickFolder}>
-              <div className="d-flex flex-row">
-                <FileLabel fileDecorations={props.fileDecorations} file={file} focusEdit={props.focusEdit} editModeOff={props.editModeOff} dragStatus={props.dragStatus} />
-                <FileDecorationIcons file={file} fileDecorations={props.fileDecorations} />
-              </div>
-            </Draggable>
-          </>
-        }
-        onClick={handleFileClick}
-        onContextMenu={handleContextMenu}
-        icon={icon}
-        labelClass={labelClass}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-      />
+      <>
+        <li ref={null} key={`treeViewLi${file.path}`} data-id={`treeViewLi${file.path}`} className="li_tv">
+          <div
+            key={`treeViewDiv${file.path}`}
+            data-id={`treeViewDiv${file.path}`}
+            className={`d-flex flex-row align-items-center ${labelClass}`}
+            onClick={() => {}}
+          >
+            <div className={`pr-2 pl-2 ${getPathIcon(file.path)} caret caret_tv`}></div>
+            <span className="w-100 ml-1 pl-2">{file.name}</span>
+          </div>
+        </li>
+      </>
     )
+  } else {
+    return <></>
   }
 }