Function FileTree

src/components/FileTree/FileTree.tsx:14–128

(props: React.HTMLProps<HTMLDivElement>)

import "./FileTree.css";

const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
  const {
    db,
    initialized,
    importedSqliteFilePath,
    currentPath,
    startProcessing,
    endProcessing,
    updateCurrentPath,
  } = useWorkbenchDB();

  const [treeData, setTreeData] = useState<FileDataNode[] | null>(null);
  const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);

  useEffect(() => {
    if (currentPath.length === 0) return;

    // Show working indicator while the FileTree Node is being rendered and focused
    startProcessing();

    setExpandedKeys((keys) => {
      return [...keys, currentPath.substring(0, currentPath.lastIndexOf("/"))];
    });

    // Scroll to selected filetree node
    // Hide working indicator after the FileTree Node is focused
    const clearThrottledScroll = throttledScroller(
      `[data-tree-node-id="${currentPath}"]`,
      () => endProcessing()
    );

    return () => {
      // Clear any pending scroll timeout
      clearThrottledScroll();
    };
  }, [currentPath]);

  useEffect(() => {
    if (!initialized || !db || !importedSqliteFilePath) {
      setTreeData(null);
      return;
    }

    db.findAllJSTree().then((treeData) => {
      // Wrap with react-scroll wrapper
      function wrapNode(node: FileDataNode) {
        const key = String(node.key);
        node.title = (
          <Element
            key={key}
            name={key}
            className="filetree-node-wrapper"
            data-tree-node-id={key}
          >
            <span>{String(node.title)}</span>
          </Element>
        );
        node.children?.forEach(wrapNode);