Refactor Settings, FileTree, GitPanel, Shell, and CodeEditor components (#402)

src/components/file-tree/hooks/useFileTreeData.ts

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+import { api } from '../../../utils/api';
+import type { Project } from '../../../types/app';
+import type { FileTreeNode } from '../types/types';
+
+type UseFileTreeDataResult = {
+  files: FileTreeNode[];
+  loading: boolean;
+};
+
+export function useFileTreeData(selectedProject: Project | null): UseFileTreeDataResult {
+  const [files, setFiles] = useState<FileTreeNode[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const projectName = selectedProject?.name;
+
+    if (!projectName) {
+      setFiles([]);
+      setLoading(false);
+      return;
+    }
+
+    const abortController = new AbortController();
+    // Track mount state so aborted or late responses do not enqueue stale state updates.
+    let isActive = true;
+
+    const fetchFiles = async () => {
+      if (isActive) {
+        setLoading(true);
+      }
+      try {
+        const response = await api.getFiles(projectName, { signal: abortController.signal });
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          console.error('File fetch failed:', response.status, errorText);
+          if (isActive) {
+            setFiles([]);
+          }
+          return;
+        }
+
+        const data = (await response.json()) as FileTreeNode[];
+        if (isActive) {
+          setFiles(data);
+        }
+      } catch (error) {
+        if ((error as { name?: string }).name === 'AbortError') {
+          return;
+        }
+
+        console.error('Error fetching files:', error);
+        if (isActive) {
+          setFiles([]);
+        }
+      } finally {
+        if (isActive) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void fetchFiles();
+
+    return () => {
+      isActive = false;
+      abortController.abort();
+    };
+  }, [selectedProject?.name]);
+
+  return {
+    files,
+    loading,
+  };
+}