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} + + )} + + + - + ); }