diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bfd6abc..8b2c620 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,14 +2,18 @@ import { RouterProvider } from 'react-router-dom'; import router from './router'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { Toaster } from './components/ui/toaster'; +import { DndProvider } from 'react-dnd'; +import { HTML5Backend } from 'react-dnd-html5-backend'; const queryClient = new QueryClient(); function App() { return ( - - + + + + ); } diff --git a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx index a494fd4..c3c2a4c 100644 --- a/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx +++ b/frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx @@ -11,8 +11,7 @@ import AutoLabelButton from './AutoLabelButton'; import { Folder, Image as ImageIcon } from 'lucide-react'; import { Spinner } from '../ui/spinner'; import { FixedSizeList as List, ListChildComponentProps } from 'react-window'; -import { DndProvider, useDrag, useDrop } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; +import { useDrag, useDrop } from 'react-dnd'; import useFolderQuery from '@/queries/folders/useFolderQuery'; import MemoFileStatusIcon from './FileStatusIcon'; import moveNodeInTree from '@/utils/moveNodeInTree'; @@ -36,7 +35,7 @@ const MENU_ID = 'project-menu'; export default function ProjectStructure({ project }: { project: Project }) { const { setProject, setCategories, setFolderId } = useProjectStore(); const { image: selectedImage, setImage } = useCanvasStore(); - const { treeData, fetchNodeData, setTreeData } = useTreeData(project.id.toString()); + const { treeData, fetchNodeData, fetchContextFolderData, setTreeData } = useTreeData(project.id.toString()); const { data: categories } = useProjectCategoriesQuery(project.id); const { isLoading, refetch } = useFolderQuery(project.id.toString(), 0); @@ -142,6 +141,8 @@ export default function ProjectStructure({ project }: { project: Project }) { const handleContextMenu = (event: React.MouseEvent, node: FlatNode) => { event.preventDefault(); setContextNode(node); + const parentId = node.parent ? Number(node.parent.id) : null; + fetchContextFolderData(parentId); show({ event }); }; @@ -209,46 +210,44 @@ export default function ProjectStructure({ project }: { project: Project }) { }; return ( - -
-
-
-
-

{project.type}

-
- +
+
+
+

{project.type}

+
+ +
+ {isLoading || !treeData ? ( +
+ -
- {isLoading || !treeData ? ( -
- -
- ) : ( - - {Row} - - )} -
-
- -
+
+ ) : ( + + {Row} + + )} + +
+
-
+ ); }