refactor: prepare state layer for react

Author: ben-fornefeld

src/features/dashboard/sandbox/inspect/context.tsx

@@ -37,15 +37,59 @@ export function SandboxInspectProvider({
   const { sandbox } = useSandboxContext()
   const storeRef = useRef<FilesystemStore>(null)
   const eventManagerRef = useRef<FilesystemEventManager>(null)
+  const operationsRef = useRef<FilesystemOperations>(null)
 
-  if (!storeRef.current && sandbox) {
-    storeRef.current = createFilesystemStore(rootPath)
-    eventManagerRef.current = new FilesystemEventManager(
-      storeRef.current,
-      sandbox,
-      rootPath
-    )
-  }
+  useLayoutEffect(() => {
+    if (!storeRef.current && sandbox) {
+      storeRef.current = createFilesystemStore(rootPath)
+      eventManagerRef.current = new FilesystemEventManager(
+        storeRef.current,
+        sandbox,
+        rootPath
+      )
+
+      const eventManager = eventManagerRef.current
+      const store = storeRef.current
+
+      operationsRef.current = {
+        loadDirectory: async (path: string) => {
+          await eventManager.loadDirectory(path)
+        },
+        selectNode: (path: string) => {
+          store.getState().setSelected(path)
+        },
+        toggleDirectory: async (path: string) => {
+          const normalizedPath = normalizePath(path)
+          const state = store.getState()
+          const node = state.getNode(normalizedPath)
+
+          if (!node || node.type !== FileType.DIR) {
+            console.log(`Cannot toggle non-directory node at path: ${path}`)
+            return
+          }
+
+          const newExpandedState = !node.isExpanded
+          console.log(
+            `Toggling directory ${path} to ${newExpandedState ? 'expanded' : 'collapsed'}`
+          )
+
+          state.setExpanded(normalizedPath, newExpandedState)
+
+          if (newExpandedState) {
+            if (!node.isLoaded) {
+              console.log(`Loading unloaded directory: ${path}`)
+              await eventManager.loadDirectory(normalizedPath)
+            } else {
+              console.log(`Directory already loaded: ${path}`)
+            }
+          }
+        },
+        refreshDirectory: async (path: string) => {
+          await eventManager.refreshDirectory(path)
+        },
+      }
+    }
+  }, [sandbox, rootPath])
 
   useLayoutEffect(() => {
     const initializeRoot = async () => {
@@ -90,49 +134,18 @@ export function SandboxInspectProvider({
     }
   }, [rootPath, sandbox])
 
-  const operations = useMemo<FilesystemOperations>(() => {
-    if (!storeRef.current || !eventManagerRef.current) {
-      throw new Error('Filesystem store or event manager not initialized')
-    }
-    const eventManager = eventManagerRef.current
-    const store = storeRef.current
-
-    return {
-      loadDirectory: async (path: string) => {
-        await eventManager.loadDirectory(path)
-      },
-      selectNode: (path: string) => {
-        store.getState().setSelected(path)
-      },
-      toggleDirectory: async (path: string) => {
-        const normalizedPath = normalizePath(path)
-        const state = store.getState()
-        const node = state.getNode(normalizedPath)
-
-        if (!node || node.type !== FileType.DIR) return
-
-        const newExpandedState = !node.isExpanded
-        state.setExpanded(normalizedPath, newExpandedState)
-
-        if (newExpandedState) {
-          if (!node.isLoaded) {
-            await eventManager.loadDirectory(normalizedPath)
-          }
-        }
-      },
-      refreshDirectory: async (path: string) => {
-        await eventManager.refreshDirectory(path)
-      },
-    }
-  }, [])
-
-  if (!storeRef.current || !eventManagerRef.current || !sandbox) {
+  if (
+    !storeRef.current ||
+    !eventManagerRef.current ||
+    !sandbox ||
+    !operationsRef.current
+  ) {
     return null
   }
 
   const contextValue: SandboxInspectContextValue = {
     store: storeRef.current,
-    operations: operations,
+    operations: operationsRef.current,
     eventManager: eventManagerRef.current,
   }
 

src/features/dashboard/sandbox/inspect/filesystem/store.ts

@@ -2,6 +2,7 @@
 
 import { create } from 'zustand'
 import { immer } from 'zustand/middleware/immer'
+import { enableMapSet } from 'immer'
 import {
   normalizePath,
   getParentPath,
@@ -10,6 +11,8 @@ import {
 import { FileType } from 'e2b'
 import { FilesystemNode } from './types'
 
+enableMapSet()
+
 interface FilesystemStatics {
   rootPath: string
 }
@@ -49,6 +52,10 @@ export type FilesystemStoreData = FilesystemStatics &
   FilesystemMutations &
   FilesystemComputed
 
+//  to retain reference-stable arrays of children per directory path
+const childrenCache: Map<string, { ref: string[]; result: FilesystemNode[] }> =
+  new Map()
+
 export const createFilesystemStore = (rootPath: string) =>
   create<FilesystemStoreData>()(
     immer((set, get) => ({
@@ -255,9 +262,17 @@ export const createFilesystemStore = (rootPath: string) =>
 
         if (!node || node.type === FileType.FILE) return []
 
-        return node.children
+        const cached = childrenCache.get(normalizedPath)
+        if (cached && cached.ref === node.children) {
+          return cached.result
+        }
+
+        const result = node.children
           .map((childPath) => state.nodes.get(childPath))
           .filter((child): child is FilesystemNode => child !== undefined)
+
+        childrenCache.set(normalizedPath, { ref: node.children, result })
+        return result
       },
 
       getNode: (path: string) => {

src/features/dashboard/sandbox/inspect/hooks/use-directory.ts

@@ -4,14 +4,15 @@ import { useMemo } from 'react'
 import { useSandboxInspectContext } from '../context'
 import { FileType } from 'e2b'
 import { FilesystemNode } from '../filesystem/types'
+import { useStore } from 'zustand'
 
 /**
  * Hook for accessing directory children with automatic updates
  */
 export function useDirectoryChildren(path: string): FilesystemNode[] {
   const { store } = useSandboxInspectContext()
 
-  return store((state) => state.getChildren(path))
+  return useStore(store, (state) => state.getChildren(path))
 }
 
 /**
@@ -20,17 +21,27 @@ export function useDirectoryChildren(path: string): FilesystemNode[] {
 export function useDirectoryState(path: string) {
   const { store } = useSandboxInspectContext()
 
-  return store((state) => {
+  const isExpanded = useStore(store, (state) => state.isExpanded(path))
+  const isLoading = useStore(store, (state) => state.loadingPaths.has(path))
+  const hasError = useStore(store, (state) => state.errorPaths.has(path))
+  const error = useStore(store, (state) => state.errorPaths.get(path))
+  const isLoaded = useStore(store, (state) => {
     const node = state.getNode(path)
-    return {
-      isExpanded: state.isExpanded(path),
-      isLoading: state.loadingPaths.has(path),
-      hasError: state.errorPaths.has(path),
-      error: state.errorPaths.get(path),
-      isLoaded: node?.type === FileType.DIR ? !!node?.isLoaded : undefined,
-      hasChildren: state.hasChildren(path),
-    }
+    return node?.type === FileType.DIR ? !!node?.isLoaded : undefined
   })
+  const hasChildren = useStore(store, (state) => state.hasChildren(path))
+
+  return useMemo(
+    () => ({
+      isExpanded,
+      isLoading,
+      hasError,
+      error,
+      isLoaded,
+      hasChildren,
+    }),
+    [isExpanded, isLoading, hasError, error, isLoaded, hasChildren]
+  )
 }
 
 /**

src/features/dashboard/sandbox/inspect/hooks/use-node.ts

@@ -3,14 +3,15 @@
 import { useMemo } from 'react'
 import { useSandboxInspectContext } from '../context'
 import type { FilesystemNode } from '../filesystem/types'
+import { useStore } from 'zustand'
 
 /**
  * Hook for accessing a specific filesystem node
  */
 export function useFilesystemNode(path: string): FilesystemNode | undefined {
   const { store } = useSandboxInspectContext()
 
-  return store((state) => state.getNode(path))
+  return useStore(store, (state) => state.getNode(path))
 }
 
 /**
@@ -19,7 +20,7 @@ export function useFilesystemNode(path: string): FilesystemNode | undefined {
 export function useNodeSelection(path: string) {
   const { store, operations } = useSandboxInspectContext()
 
-  const isSelected = store((state) => state.isSelected(path))
+  const isSelected = useStore(store, (state) => state.isSelected(path))
 
   const select = useMemo(
     () => () => operations.selectNode(path),
@@ -51,7 +52,7 @@ export function useNode(path: string) {
 export function useRootChildren() {
   const { store } = useSandboxInspectContext()
 
-  return store((state) => state.getChildren(state.rootPath))
+  return useStore(store, (state) => state.getChildren(state.rootPath))
 }
 
 /**
@@ -60,7 +61,7 @@ export function useRootChildren() {
 export function useSelectedPath() {
   const { store } = useSandboxInspectContext()
 
-  return store((state) => state.selectedPath)
+  return useStore(store, (state) => state.selectedPath)
 }
 
 /**
@@ -69,7 +70,7 @@ export function useSelectedPath() {
 export function useLoadingPaths() {
   const { store } = useSandboxInspectContext()
 
-  return store((state) => Array.from(state.loadingPaths))
+  return useStore(store, (state) => state.loadingPaths)
 }
 
 /**
@@ -78,5 +79,5 @@ export function useLoadingPaths() {
 export function useErrorPaths() {
   const { store } = useSandboxInspectContext()
 
-  return store((state) => Object.fromEntries(state.errorPaths))
+  return useStore(store, (state) => state.errorPaths)
 }