Move file tree folder loading into hook

Author: vipmax

anycode/App.tsx

@@ -38,7 +38,7 @@ import { normalizePath } from './utils';
 const App: React.FC = () => {
     const { wsRef, isConnected } = useSocket({});
 
-    const fileTree = useFileTree();
+    const fileTree = useFileTree({ wsRef, isConnected });
     const editors = useEditors({ wsRef, isConnected });
     const terminals = useTerminals({ wsRef, isConnected });
     const terminalPanes = useTerminalPanes({
@@ -53,13 +53,6 @@ const App: React.FC = () => {
     const { currentThemeId, handleThemeChange } = useTheme({ wsRef, isConnected });
     const layoutActionsRef = useRef<LayoutActions | null>(null);
 
-    const openFolder = useMemo(() => {
-        return (path: string) => {
-            if (!wsRef.current || !isConnected) return;
-            wsRef.current.emit('dir:list', { path }, fileTree.handleOpenFolderResponse);
-        };
-    }, [wsRef, isConnected, fileTree.handleOpenFolderResponse]);
-
     useEffect(() => {
         const ws = wsRef.current;
         if (!ws || !isConnected) return;
@@ -96,14 +89,14 @@ const App: React.FC = () => {
 
     useEffect(() => {
         if (isConnected && !wasConnectedRef.current) {
-            openFolder('.');
+            fileTree.openFolder('.');
             terminals.reconnectTerminals();
             agents.reconnectToAcpAgents();
             git.fetchGitStatus();
             git.fetchBranches();
         }
         wasConnectedRef.current = isConnected;
-    }, [isConnected, openFolder, terminals.reconnectTerminals,
+    }, [isConnected, fileTree.openFolder, terminals.reconnectTerminals,
         agents.reconnectToAcpAgents, git.fetchGitStatus, git.fetchBranches]);
 
     useEffect(() => {
@@ -326,7 +319,7 @@ const App: React.FC = () => {
                         onToggle={fileTree.toggleNode}
                         onSelect={fileTree.selectNode}
                         onOpenFile={handleOpenFile}
-                        onLoadFolder={openFolder}
+                        onLoadFolder={fileTree.openFolder}
                         onFocusEditor={() => editors.focusEditorInPane(editors.activeEditorPaneId)}
                         onNavigateByKey={fileTree.navigateByKey}
                     />

anycode/hooks/useFileTree.ts

@@ -1,7 +1,13 @@
 import { useCallback, useState } from 'react';
+import type { Socket } from 'socket.io-client';
 import type { TreeNode, WatcherCreate, WatcherRemove } from '../types';
 import { getFileName, getParentPath, joinPath } from '../utils';
 
+type UseFileTreeParams = {
+    wsRef: React.RefObject<Socket | null>;
+    isConnected: boolean;
+};
+
 type TreeNavigationHandlers = {
     onOpenFile: (path: string) => void;
     onLoadFolder: (path: string) => void;
@@ -105,7 +111,7 @@ const walkVisibleForNode = (nodes: TreeNode[], targetNodeId: string | null): Vis
     return context;
 };
 
-export const useFileTree = () => {
+export const useFileTree = ({ wsRef, isConnected }: UseFileTreeParams) => {
     const [fileTree, setFileTree] = useState<TreeNode[]>([]);
     const [activeNodeId, setActiveNodeId] = useState<string | null>(null);
 
@@ -200,6 +206,11 @@ export const useFileTree = () => {
         });
     }, [convertToTree]);
 
+    const openFolder = useCallback((path: string) => {
+        if (!wsRef.current || !isConnected) return;
+        wsRef.current.emit('dir:list', { path }, handleOpenFolderResponse);
+    }, [wsRef, isConnected, handleOpenFolderResponse]);
+
     const toggleNode = useCallback((nodeId: string) => {
         setFileTree((prevTree) => {
             const updateNode = (nodes: TreeNode[]): TreeNode[] => {
@@ -441,6 +452,7 @@ export const useFileTree = () => {
         fileTree,
         activeNodeId,
         setActiveNode,
+        openFolder,
         handleOpenFolderResponse,
         toggleNode,
         findNodeByPath,