Remove legacy code #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

Daan0709 wants to merge 31 commits into master from remove-legacy-code

src/main/frontend/app/components/file-structure/editor-data-provider.ts

-Original file line number
+Diff line change
@@ -1,5 +1,6 @@
     import type { Disposable, TreeDataProvider, TreeItem, TreeItemIndex } from 'react-complex-tree'
-    import { fetchProjectTree } from '~/services/project-service'
+    import { fetchDirectoryByPath, fetchProjectRootTree } from '~/services/project-service'
+    import { sortChildren } from './tree-utilities'
     export interface FileNode {
       name: string
@@ Expand All @@
       private data: Record<TreeItemIndex, TreeItem<FileNode>> = {}
       private readonly treeChangeListeners: ((changedItemIds: TreeItemIndex[]) => void)[] = []
       private readonly projectName: string
+      private loadedDirectories = new Set<string>()
       constructor(projectName: string) {
         this.projectName = projectName
+        this.loadRoot()
       }
-      /**
-       * Public method to initialize data loading.
-       * Call this from your React component's useEffect.
-       */
-      public async loadData(): Promise<void> {
-        await this.fetchAndBuildTree()
-      }
-      /** Fetch file tree from backend and build the provider's data */
-      private async fetchAndBuildTree() {
+      /** Fetch root directory from backend and build the provider's data */
+      private async loadRoot() {
         try {
           if (!this.projectName) return
-          const tree = await fetchProjectTree(this.projectName)
+          const tree = await fetchProjectRootTree(this.projectName)
           if (!tree) {
             console.warn('[EditorFilesDataProvider] Received empty tree from API')
             this.data = {}
             return
           }
-          this.buildTreeFromFileTree(tree)
+          this.data['root'] = {
+            index: 'root',
+            data: { name: tree.name, path: tree.path },
+            isFolder: true,
+            children: [],
+          }
+          // Sort directories first, then files, both alphabetically
+          const sortedChildren = sortChildren(tree.children)
+          for (const child of sortedChildren) {
+            const childIndex = `root/${child.name}`
+            this.data[childIndex] = {
+              index: childIndex,
+              data: { name: child.name, path: child.path },
+              isFolder: child.type === 'DIRECTORY',
+              children: child.type === 'DIRECTORY' ? [] : undefined,
+            }
+            this.data['root'].children!.push(childIndex)
+          }
+          this.loadedDirectories.add(tree.path)
           this.notifyListeners(['root'])
         } catch (error) {
           console.error('[EditorFilesDataProvider] Unexpected error loading tree:', error)
@@ Expand All @@
         }
       }
-      /** Converts the backend file tree to react-complex-tree data */
-      private buildTreeFromFileTree(rootNode: FileTreeNode) {
-        const newData: Record<TreeItemIndex, TreeItem<FileNode>> = {}
-        const traverse = (node: FileTreeNode, parentIndex: TreeItemIndex | null): TreeItemIndex => {
-          const index = parentIndex === null ? 'root' : node.path || `${parentIndex}/${node.name}`
-          newData[index] = {
-            index,
-            data: {
-              name: node.name,
-              path: node.path,
-            },
-            children: node.type === 'DIRECTORY' ? [] : undefined,
-            isFolder: node.type === 'DIRECTORY',
+      public async loadDirectory(itemId: TreeItemIndex): Promise<void> {
+        const item = this.data[itemId]
+        if (!item || !item.isFolder) return
+        if (this.loadedDirectories.has(item.data.path)) return
+        try {
+          const directory = await fetchDirectoryByPath(this.projectName, item.data.path)
+          if (!directory) {
+            console.warn('[EditorFilesDataProvider] Received empty directory from API')
+            this.data = {}
+            return
           }
-          if (node.type === 'DIRECTORY' && node.children) {
-            for (const child of node.children) {
-              const childIndex = traverse(child, index)
-              newData[index].children!.push(childIndex)
+          const sortedChildren = sortChildren(directory.children)
+          const children: TreeItemIndex[] = []
+          for (const child of sortedChildren) {
+            const childIndex = `${itemId}/${child.name}`
+            this.data[childIndex] = {
+              index: childIndex,
+              data: { name: child.name, path: child.path },
+              isFolder: child.type === 'DIRECTORY',
+              children: child.type === 'DIRECTORY' ? [] : undefined,
             }
+            children.push(childIndex)
           }
-          return index
-        }
+          item.children = children
-        if (rootNode) {
-          traverse(rootNode, null)
+          this.loadedDirectories.add(item.data.path)
+          this.notifyListeners([itemId])
+        } catch (error) {
+          console.error('Failed to load directory', error)
         }
-        this.data = newData
       }
       public async getAllItems(): Promise<TreeItem<FileNode>[]> {
@@ Expand Down @@

src/main/frontend/app/components/file-structure/editor-file-structure.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -50,7 +50,6 @@ export default function EditorFileStructure() {
  
        const initProvider = async () => {

          const provider = new EditorFilesDataProvider(project.name)

          await provider.loadData()

          if (isMounted) {

            setDataProvider(provider)

    @@ -114,23 +113,21 @@ export default function EditorFileStructure() {
  
          if (!dataProvider || itemIds.length === 0) return

          const itemId = itemIds[0]

          if (typeof itemId !== 'string') return

          const item = await dataProvider.getTreeItem(itemId)

          if (!item || item.isFolder) return

          if (!item) return

          const filePath = item.data.path

          const fileName = item.data.name

          // Fetch contents and expand folder if folder

          if (item.isFolder) {

            await dataProvider.loadDirectory(itemId)

            return

          }

          openFileTab(filePath, fileName)

          // Load file in editor tab if file

          openFileTab(item.data.path, item.data.name)

        },

        [dataProvider, openFileTab],

      )

      const handleItemClick = (items: TreeItemIndex[], _treeId: string): void => {

        void handleItemClickAsync(items)

      }

      useEffect(() => {

        const handleKeyDown = (event: KeyboardEvent) => {

          if (event.key === 'Escape') {

    @@ -184,12 +181,19 @@ export default function EditorFileStructure() {
  
      const renderItemArrow = ({ item, context }: { item: TreeItem; context: TreeItemRenderContext }) => {

        if (!item.isFolder) return null

        const Icon = context.isExpanded ? AltArrowDownIcon : AltArrowRightIcon

        return (

          <Icon

            onClick={context.toggleExpandedState}

            className="rct-tree-item-arrow-isFolder rct-tree-item-arrow fill-foreground"

          />

        )

        const handleClick = async (event: React.MouseEvent) => {

          event.stopPropagation()

          // Only load when expanding

          if (!context.isExpanded && dataProvider) {

            await dataProvider.loadDirectory(item.index)

          }

          context.toggleExpandedState()

        }

        return <Icon onClick={handleClick} className="rct-tree-item-arrow-isFolder rct-tree-item-arrow fill-foreground" />

      }

      const renderItemTitle = ({

    @@ -250,7 +254,7 @@ export default function EditorFileStructure() {
  
              viewState={{}}

              getItemTitle={getItemTitle}

              dataProvider={dataProvider}

              onSelectItems={handleItemClick}

              onSelectItems={handleItemClickAsync}

              canSearch={false}

              renderItemArrow={renderItemArrow}

              renderItemTitle={renderItemTitle}

src/main/frontend/app/components/file-structure/files-data-provider.ts

This file was deleted.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove legacy code #178

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Remove legacy code #178

Are you sure you want to change the base?

Uh oh!

Remove legacy code #178

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!