jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor: context 메뉴 수정중

Browse Source
This commit is contained in:
정현조 2024-10-07 16:19:50 +09:00
parent 532303e777
commit 15e7f5bf54
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/WorkspaceSidebar/ProjectContextMenu.tsx
View File

@ -96,7 +96,6 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
}
}
};
const handleDelete = () => {
if (node?.type === 'folder') {
deleteFolderMutation.mutate(
@ -104,7 +103,7 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
{
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['folder', projectId, folderId] });
queryClient.invalidateQueries({ queryKey: ['project', projectId] });
queryClient.invalidateQueries({ queryKey: ['folder', projectId, node.id] });
onRefetch();
},
}
@ -116,7 +115,6 @@ export default function ProjectContextMenu({ projectId, folderId, node, onRefetc
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['folder', projectId, folderId] });
queryClient.invalidateQueries({ queryKey: ['image', node.id] });
queryClient.invalidateQueries({ queryKey: ['project', projectId] });
onRefetch();
},
}

37
frontend/src/hooks/useTreeData.ts
View File

@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
import { getFolder } from '@/api/folderApi';
import buildTreeNodes from '@/utils/buildTreeNodes';
function useFolder(projectId: string, folderId: number, enabled: boolean = folderId === 0) {
function useFolder(projectId: string, folderId: number, enabled: boolean) {
return useQuery({
queryKey: ['folder', projectId, folderId],
queryFn: () => getFolder(projectId, folderId),
@ -16,13 +16,26 @@ function useFolder(projectId: string, folderId: number, enabled: boolean = folde
export default function useTreeData(projectId: string) {
const [treeData, setTreeData] = useState<TreeNode | null>(null);
const [currentFolderId, setCurrentFolderId] = useState<number | null>(null);
const [contextFolderId, setContextFolderId] = useState<number | null>(null);
const { data: rootFolder, isLoading: isRootLoading } = useFolder(projectId, 0);
// 루트 폴더 데이터
const { data: rootFolder, isLoading: isRootLoading } = useFolder(projectId, 0, true);
// 현재 선택된 폴더 데이터
const { data: childFolder, isFetching: isChildLoading } = useFolder(
projectId,
currentFolderId || 0,
currentFolderId !== null
);
// 컨텍스트 메뉴에서 선택된 폴더 데이터
const { data: contextFolder, isFetching: isContextLoading } = useFolder(
projectId,
contextFolderId || 0,
contextFolderId !== null
);
// 트리 데이터를 업데이트하는 함수
const updateTreeData = useCallback((folder: FolderResponse, isRoot: boolean = false) => {
if (!folder) return;
@ -56,16 +69,25 @@ export default function useTreeData(projectId: string) {
});
}, []);
// 루트 폴더 데이터 로드
useEffect(() => {
if (!rootFolder) return;
updateTreeData(rootFolder, true);
}, [rootFolder, updateTreeData]);
// 현재 선택된 폴더 데이터 업데이트
useEffect(() => {
if (!childFolder || currentFolderId === null) return;
updateTreeData(childFolder);
}, [childFolder, currentFolderId, updateTreeData]);
// 컨텍스트 메뉴에서 선택된 폴더 데이터 업데이트
useEffect(() => {
if (!contextFolder || contextFolderId === null) return;
-updateTreeData(contextFolder);
}, [contextFolder, contextFolderId, updateTreeData]);
// 현재 폴더 선택 시 폴더 ID 설정 함수
const fetchNodeData = useCallback(
(node: TreeNode) => {
if (currentFolderId === Number(node.id)) return;
@ -73,11 +95,20 @@ export default function useTreeData(projectId: string) {
},
[currentFolderId]
);
// 컨텍스트 메뉴 선택 시 폴더 ID 설정 함수
const fetchContextFolderData = useCallback(
(folderId: number | null) => {
if (contextFolderId === folderId) return;
setContextFolderId(folderId);
},
[contextFolderId]
);
return {
treeData,
fetchNodeData,
fetchContextFolderData,
setTreeData,
isLoading: isRootLoading || isChildLoading,
isLoading: isRootLoading || isChildLoading || isContextLoading,
};
}