nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine frontend folder management and display by merging folder tree data.

Browse Source
This commit is contained in:
nils
2025-12-09 12:37:27 +01:00
parent 463046c970
commit 8a16293f0e
7 changed files with 155 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/documents/features/folders/useFolderTree.ts
+85 -67
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
import { createRootNode, DEFAULT_FOLDER_NAME, flattenFolderTree } from '../../../app/workspaceUtils';
import type { FolderNodeId, FolderId } from '../../../types/identifiers';
import type { FolderNode } from '../../../types/documents';
@@ -18,67 +18,81 @@ const useFolderTree = ({
initialSelectedFolder = 'root',
foldersManager,
}: UseFolderTreeOptions) => {
const [folderNodes, setFolderNodes] = useState<Map<FolderNodeId, FolderNode>>(() => {
const rootNode = createRootNode() as FolderNode;
return new Map([[rootNode.id, rootNode]]);
});
// Subscribe to manager updates
const managerSnapshot = useSyncExternalStore(
useCallback(cb => foldersManager ? foldersManager.subscribe(cb) : () => { }, [foldersManager]),
() => foldersManager ? foldersManager.getSnapshot() : null,
() => foldersManager ? foldersManager.getSnapshot() : null,
);
const treeSnapshot = useSyncExternalStore(
useCallback(cb => foldersManager ? foldersManager.subscribe(cb) : () => { }, [foldersManager]),
() => foldersManager ? foldersManager.getTreeSnapshot() : [],
() => foldersManager ? foldersManager.getTreeSnapshot() : [],
);
// Track expanded state locally
const [expandedIds, setExpandedIds] = useState<Set<FolderNodeId>>(new Set(['root']));
// Fetch tree on mount
useEffect(() => {
const fetchTree = async () => {
try {
if (!foldersManager) return;
// Use FoldersManager as the single source of truth for fetching the tree
const roots = await foldersManager.ensureTree();
setFolderNodes((prev) => {
const next = new Map(prev);
const rootChildren: FolderNodeId[] = [];
const flatData = flattenFolderTree(roots);
flatData.forEach((item) => {
const id = item.id as FolderNodeId;
const parentId = (item.parent_id || 'root') as FolderNodeId;
// item.children is now FolderTreeNode[], so map to IDs
const children = (item.children || []).map((c) => c.id as FolderNodeId);
// Preserve existing UI state (expanded, loaded)
const existing = prev.get(id);
next.set(id, {
id,
name: item.name,
parentId,
children,
expanded: existing?.expanded ?? false,
loaded: true,
hasChildren: children.length > 0,
});
if (parentId === 'root') {
rootChildren.push(id);
}
});
const root = next.get('root');
if (root) {
next.set('root', {
...(root as FolderNode),
children: rootChildren,
hasChildren: rootChildren.length > 0,
loaded: true,
});
}
return next;
});
} catch (error) {
console.error('Failed to fetch folder tree', error);
}
};
fetchTree();
if (foldersManager) {
foldersManager.ensureTree().catch(err => console.error(err));
}
}, [foldersManager]);
const folderNodes = useMemo(() => {
if (!foldersManager || !managerSnapshot) {
const rootNode = createRootNode() as FolderNode;
return new Map([[rootNode.id, rootNode]]);
}
const map = new Map<FolderNodeId, FolderNode>();
// Use the synced tree snapshot
const roots = treeSnapshot;
if (roots.length === 0) {
// Return placeholder or empty
const rootNode = createRootNode() as FolderNode;
return new Map([[rootNode.id, rootNode]]);
}
const flatStructure = flattenFolderTree(roots);
// Use the synced data snapshot
const dataSnapshot = managerSnapshot;
// Reconstruct the nodes integrating data from byId and structure from tree
// plus local UI state (expanded)
const rootChildren: FolderNodeId[] = [];
flatStructure.forEach((item) => {
const id = item.id as FolderNodeId;
const data = dataSnapshot.get(id);
// Merge: structure (children, parent) comes from flatStructure (which comes from treeSnapshot)
// Data (name) comes from dataSnapshot (byId) to ensure renames propagate instantly
const name = data?.name ?? item.name;
const parentId = (item.parent_id || 'root') as FolderNodeId;
const children = (item.children || []).map(c => c.id as FolderNodeId);
map.set(id, {
id,
name,
parentId,
children,
expanded: expandedIds.has(id),
loaded: true,
hasChildren: children.length > 0
});
if (parentId === 'root') {
rootChildren.push(id);
}
});
return map;
}, [foldersManager, managerSnapshot, treeSnapshot, expandedIds]);
const [selectedFolder, setSelectedFolder] = useState<FolderNodeId>(initialSelectedFolder || 'root');
const isInvalidFolderDrop = useCallback(
@@ -108,8 +122,7 @@ const useFolderTree = ({
);
const resetFolderTreeState = useCallback(() => {
const rootNode = createRootNode() as FolderNode;
setFolderNodes(new Map<FolderNodeId, FolderNode>([[rootNode.id, rootNode]]));
setExpandedIds(new Set(['root']));
setSelectedFolder('root');
}, []);
@@ -157,12 +170,6 @@ const useFolderTree = ({
}, [folderNodes]);
useEffect(() => {
if (foldersManager && folderNodes.size > 0) {
foldersManager.ingest(Array.from(folderNodes.values()));
}
}, [foldersManager, folderNodes]);
const folderLabelMap = useMemo(() => {
const map = new Map<FolderNodeId, string>();
folderOptions.forEach((option) => {
@@ -171,9 +178,18 @@ const useFolderTree = ({
return map;
}, [folderOptions]);
// Exposed helper to toggle expansion (if needed by consumers who can reach here)
const toggleFolder = useCallback((folderId: FolderNodeId) => {
setExpandedIds(prev => {
const next = new Set(prev);
if (next.has(folderId)) next.delete(folderId);
else next.add(folderId);
return next;
});
}, []);
return {
folderNodes,
setFolderNodes,
selectedFolder,
setSelectedFolder,
currentFolderName,
@@ -181,6 +197,8 @@ const useFolderTree = ({
folderLabelMap,
isInvalidFolderDrop,
resetFolderTreeState,
toggleFolder,
setExpandedIds
};
};
frontend/src/documents/features/folders/useFolderTreeActions.ts
+27 -101
View File
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import type { DragEvent } from 'react';
import { useStatusToast } from '../../../lib/context/StatusToastContext';
import { DEFAULT_FOLDER_NAME, hasFiles } from '../../../app/workspaceUtils';
import { hasFiles } from '../../../app/workspaceUtils';
import {
createFolder,
deleteFolder,
@@ -35,11 +35,12 @@ import useNotifyApiError from '../../../hooks/useNotifyApiError';
import type {
FolderState,
DragState,
FolderNode,
} from '../../types/workspaceTypes';
import type FoldersManager from '../../FoldersManager';
interface UseFolderTreeActionsOptions {
folderState: Pick<FolderState, 'folderNodes' | 'setFolderNodes' | 'selectedFolder' | 'setSelectedFolder' | 'setCreatingFolder'>;
folderState: Pick<FolderState, 'folderNodes' | 'selectedFolder' | 'setSelectedFolder' | 'setCreatingFolder'> & { foldersManager?: FoldersManager };
dragState: DragState;
actions: {
handleFileDrop: (dataTransfer: DataTransfer, folderId: FolderKey) => Promise<void> | void;
@@ -58,10 +59,10 @@ const useFolderTreeActions = ({
}: UseFolderTreeActionsOptions) => {
const {
folderNodes,
setFolderNodes,
selectedFolder,
setSelectedFolder,
setCreatingFolder,
foldersManager,
} = folderState;
const {
@@ -101,50 +102,9 @@ const useFolderTreeActions = ({
try {
await moveFolderRequest(folderId, parent_id);
setFolderNodes((prev: Map<FolderKey, FolderNode>) => {
const next = new Map(prev);
const currentNode = next.get(folderId);
if (!currentNode) {
return prev;
}
next.set(folderId, { ...currentNode, parentId: parent_id ?? null });
const previousParent = next.get(previousParentKey);
if (previousParent) {
const remainingChildren = (previousParent.children || []).filter(
(childId) => childId !== folderId,
);
next.set(previousParentKey, {
...previousParent,
children: remainingChildren,
hasChildren: remainingChildren.length > 0,
});
}
if (!next.has(targetKey)) {
next.set(targetKey, {
id: targetKey,
name: targetKey === 'root' ? DEFAULT_FOLDER_NAME : 'Folder',
parentId: targetKey === 'root' ? null : null,
children: [],
expanded: targetKey === 'root',
loaded: false,
hasChildren: false,
});
}
const targetNode = next.get(targetKey);
if (targetNode && !targetNode.children.includes(folderId)) {
next.set(targetKey, {
...targetNode,
children: [...targetNode.children, folderId],
hasChildren: true,
});
}
return next;
});
if (foldersManager) {
foldersManager.invalidateTree();
}
if (selectedFolder === folderId) {
setSelectedFolder(folderId);
@@ -160,7 +120,7 @@ const useFolderTreeActions = ({
folderNodes,
notifyApiError,
selectedFolder,
setFolderNodes,
foldersManager,
setSelectedFolder,
showToast,
],
@@ -202,14 +162,9 @@ const useFolderTreeActions = ({
try {
await renameFolderRequest(folderId, trimmed);
setFolderNodes((prev: Map<FolderKey, FolderNode>) => {
const next = new Map(prev);
const node = next.get(folderId);
if (node) {
next.set(folderId, { ...node, name: trimmed });
}
return next;
});
if (foldersManager) {
foldersManager.ingest([{ id: folderId, name: trimmed }]);
}
showToast('Folder renamed.', 'success');
return true;
@@ -221,7 +176,7 @@ const useFolderTreeActions = ({
},
[
notifyApiError,
setFolderNodes,
foldersManager,
showToast,
],
);
@@ -250,29 +205,13 @@ const useFolderTreeActions = ({
throw new Error('Folder creation failed.');
}
showToast('Folder created.', 'success');
setFolderNodes((prev: Map<FolderKey, FolderNode>) => {
const next = new Map(prev);
const parentId = folderData.parent_id ?? payload.parent_id ?? 'root';
const parentNode = next.get(parentId);
if (parentNode) {
next.set(parentId, {
...parentNode,
children: parentNode.children.concat([folderData.id]),
loaded: true,
hasChildren: true,
});
}
next.set(folderData.id, {
id: folderData.id,
name: folderData.name ?? payload.name,
parentId: parentId,
children: folderData.children || [],
expanded: false,
loaded: false,
hasChildren: Array.isArray(folderData.children) ? folderData.children.length > 0 : false,
});
return next;
});
if (foldersManager) {
// Ingest the new folder data immediately so it's available
foldersManager.ingest([folderData]);
// Force tree refresh to update structure
foldersManager.invalidateTree();
}
await selectFolder(folderData.id, { immediate: true });
succeeded = true;
@@ -293,7 +232,7 @@ const useFolderTreeActions = ({
selectFolder,
selectedFolder,
setCreatingFolder,
setFolderNodes,
foldersManager,
showToast,
],
);
@@ -310,26 +249,13 @@ const useFolderTreeActions = ({
try {
await deleteFolder(folderId);
setFolderNodes((prev: Map<FolderKey, FolderNode>) => {
const next = new Map(prev);
const node = next.get(folderId);
next.delete(folderId);
if (node) {
const parentId = node.parentId || 'root';
const parentNode = next.get(parentId);
if (parentNode) {
const remaining = parentNode.children.filter((id) => id !== folderId);
next.set(parentId, {
...parentNode,
children: remaining,
hasChildren: remaining.length > 0,
});
}
}
return next;
});
if (foldersManager) {
foldersManager.remove([folderId]);
foldersManager.invalidateTree();
}
if (selectedFolder === folderId) {
// Fallback selection logic
const node = folderNodes.get(folderId);
const parentId = node?.parentId || 'root';
setSelectedFolder(parentId);
@@ -352,7 +278,7 @@ const useFolderTreeActions = ({
folderNodes,
notifyApiError,
selectedFolder,
setFolderNodes,
foldersManager,
setSelectedFolder,
showToast,
],