fix: improving file/folder structure and resolving typescript errors

src/components/Explorer/FileExplorer.tsx

@@ -1,31 +1,12 @@
 import type { FileEntry } from '@src/lib/project'
-import type { ReactNode } from 'react'
-import type { CustomIconName } from '@src/components/CustomIcon'
 import { CustomIcon } from '@src/components/CustomIcon'
 import { sortFilesAndDirectories } from '@src/lib/desktopFS'
 import { uuidv4 } from '@src/lib/utils'
-
+import {
-export interface FileExplorerEntry extends FileEntry {
+  FileExplorerEntry,
-  parentPath: string
+  FileExplorerRow,
-  level: number
+  FileExplorerRender,
-  index: number
+} from '@src/components/Explorer/utils'
-}
-
-export interface FileExplorerRow extends FileExplorerEntry {
-  icon: CustomIconName
-  name: string
-  isFolder: boolean
-  status?: ReactNode
-  isOpen: boolean
-  rowClicked: (domIndex: number) => void
-  /**
-   * Fake file or folder rows are the placeholders for users to input a value
-   * and write that to disk to be read as a real one.
-   * they are placed in the DOM as if they are real but not from the source of truth
-   */
-  isFake: boolean
-  activeIndex: number
-}
 
 export const StatusDot = () => {
   return <span>•</span>
@@ -47,7 +28,7 @@ const Spacer = (level: number) => {
     >
       {Array(level)
         .fill(0)
-        .map((value, index) => {
+        .map(() => {
           const remSpacing = `${0.5}rem`
           return (
             <div className="h-full w-full" key={uuidv4()}>
@@ -137,21 +118,6 @@ export const flattenProject = (
   return flattenTreeInOrder
 }
 
-const insertFakeRowAtFirstPositionUnderParentAfterFolder = (
-  fileExplorerEntries: FileExplorerEntry[],
-  fakeRow: { entry: FileExplorerEntry | null; isFile: boolean } | null
-): void => {
-  if (!fakeRow) {
-    // no op
-    return
-  }
-
-  // const requestedEntry: FileExplorerEntry = {
-  //   ...fakeRow,
-  // }
-  // fileExplorerEntries.splice(insertIndex, 0, requestedEntry)
-}
-
 /**
  * Render all the rows of the file explorer in linear layout in the DOM.
  * each row is rendered one after another in the same parent DOM element
@@ -177,14 +143,17 @@ export const FileExplorer = ({
           return row.isOpen
         })
         .map((row, index, original) => {
-          row.domIndex = index
+          const renderRow : FileExplorerRender= {
-          row.domLength = original.length
+            ...row,
+            domIndex: index,
+            domLength: original.length
+          }
           return (
-            <FileExplorerRow
+            <FileExplorerRowElement
               key={uuidv4()}
-              row={row}
+              row={renderRow}
               selectedRow={selectedRow}
-            ></FileExplorerRow>
+            ></FileExplorerRowElement>
           )
         })}
     </div>
@@ -195,11 +164,11 @@ export const FileExplorer = ({
  * Making div soup!
  * A row is a folder or a file.
  */
-export const FileExplorerRow = ({
+export const FileExplorerRowElement = ({
   row,
   selectedRow,
 }: {
-  row: FileExplorerRow
+  row: FileExplorerRender
   selectedRow: FileExplorerEntry | null
   domLength: number
 }) => {

src/components/Explorer/ProjectExplorer.tsx

@@ -1,14 +1,15 @@
-import type { Project, FileEntry } from '@src/lib/project'
+import type { Project } from '@src/lib/project'
 import { FILE_EXT } from '@src/lib/constants'
 import {
   FileExplorer,
   constructPath,
-  FileExplorerEntry,
-  FileExplorerRow,
   flattenProject,
   StatusDot
 } from '@src/components/Explorer/FileExplorer'
-import type { FileExplorerEntry } from '@src/components/Explorer/FileExplorer'
+import {
+  FileExplorerRow,
+} from '@src/components/Explorer/utils'
+import type { FileExplorerEntry } from '@src/components/Explorer/utils'
 import { FileExplorerHeaderActions } from '@src/components/Explorer/FileExplorerHeaderActions'
 import { useState, useRef, useEffect } from 'react'
 import { systemIOActor } from '@src/lib/singletons'

src/components/Explorer/utils.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+import type { FileEntry } from '@src/lib/project'
+import type { CustomIconName } from '@src/components/CustomIcon'
+
+export interface FileExplorerEntry extends FileEntry {
+  parentPath: string
+  level: number
+  index: number
+}
+
+export interface FileExplorerRow extends FileExplorerEntry {
+  icon: CustomIconName
+  name: string
+  isFolder: boolean
+  status?: ReactNode
+  isOpen: boolean
+  rowClicked: (domIndex: number) => void
+  /**
+   * Fake file or folder rows are the placeholders for users to input a value
+   * and write that to disk to be read as a real one.
+   * they are placed in the DOM as if they are real but not from the source of truth
+   */
+  isFake: boolean
+  activeIndex: number
+}
+
+export interface FileExplorerRender extends FileExplorerRow {
+  domIndex: number
+  domLength: number
+}