From 60b02e6d2b1734c9c90450ac482ec9206bba293c Mon Sep 17 00:00:00 2001 From: yyh Date: Wed, 25 Feb 2026 20:49:06 +0800 Subject: [PATCH] refactor(web): destructure mutation result to narrow useCallback dependencies --- .../operations/use-create-operations.ts | 16 ++++++++-------- .../operations/use-modify-operations.ts | 8 ++++---- .../hooks/file-tree/operations/use-node-move.ts | 8 ++++---- .../file-tree/operations/use-node-reorder.ts | 8 ++++---- .../file-tree/operations/use-paste-operation.ts | 8 ++++---- web/service/use-app-asset.ts | 1 - 6 files changed, 24 insertions(+), 25 deletions(-) diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts index 7b2f97c4dd..de44bfd6a0 100644 --- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts +++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-create-operations.ts @@ -32,9 +32,9 @@ export function useCreateOperations({ const fileInputRef = useRef(null) const folderInputRef = useRef(null) - const createFolder = useCreateAppAssetFolder() - const uploadFile = useUploadFileWithPresignedUrl() - const batchUpload = useBatchUpload() + const { isPending: isCreateFolderPending } = useCreateAppAssetFolder() + const { mutateAsync: uploadFileAsync, isPending: isUploadFilePending } = useUploadFileWithPresignedUrl() + const { mutateAsync: batchUploadAsync, isPending: isBatchUploadPending } = useBatchUpload() const emitTreeUpdate = useSkillTreeUpdateEmitter() const handleNewFile = useCallback(() => { @@ -65,7 +65,7 @@ export function useCreateOperations({ await Promise.all( uploadFiles.map(async (file) => { try { - await uploadFile.mutateAsync({ appId, file, parentId }) + await uploadFileAsync({ appId, file, parentId }) progress.uploaded++ } catch { @@ -87,7 +87,7 @@ export function useCreateOperations({ e.target.value = '' onClose() } - }, [appId, uploadFile, onClose, parentId, storeApi, emitTreeUpdate]) + }, [appId, uploadFileAsync, onClose, parentId, storeApi, emitTreeUpdate]) const handleFolderChange = useCallback(async (e: React.ChangeEvent) => { const files = Array.from(e.target.files || []) @@ -144,7 +144,7 @@ export function useCreateOperations({ } } - await batchUpload.mutateAsync({ + await batchUploadAsync({ appId, tree, files: fileMap, @@ -165,12 +165,12 @@ export function useCreateOperations({ e.target.value = '' onClose() } - }, [appId, batchUpload, onClose, parentId, storeApi, emitTreeUpdate]) + }, [appId, batchUploadAsync, onClose, parentId, storeApi, emitTreeUpdate]) return { fileInputRef, folderInputRef, - isCreating: uploadFile.isPending || createFolder.isPending || batchUpload.isPending, + isCreating: isUploadFilePending || isCreateFolderPending || isBatchUploadPending, handleNewFile, handleNewFolder, handleFileChange, diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts index e0fc05e01f..c735804b71 100644 --- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts +++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-modify-operations.ts @@ -35,7 +35,7 @@ export function useModifyOperations({ }: UseModifyOperationsOptions) { const { t } = useTranslation('workflow') const [showDeleteConfirm, setShowDeleteConfirm] = useState(false) - const deleteNode = useDeleteAppAssetNode() + const { mutateAsync: deleteNodeAsync, isPending: isDeleting } = useDeleteAppAssetNode() const emitTreeUpdate = useSkillTreeUpdateEmitter() const handleRename = useCallback(() => { @@ -60,7 +60,7 @@ export function useModifyOperations({ ? getAllDescendantFileIds(nodeId, treeData.children) : [] - await deleteNode.mutateAsync({ appId, nodeId }) + await deleteNodeAsync({ appId, nodeId }) emitTreeUpdate() descendantFileIds.forEach((fileId) => { @@ -93,7 +93,7 @@ export function useModifyOperations({ setShowDeleteConfirm(false) onClose() } - }, [appId, nodeId, node?.data?.node_type, deleteNode, storeApi, treeData?.children, onClose, t, emitTreeUpdate]) + }, [appId, nodeId, node?.data?.node_type, deleteNodeAsync, storeApi, treeData?.children, onClose, t, emitTreeUpdate]) const handleDeleteCancel = useCallback(() => { setShowDeleteConfirm(false) @@ -101,7 +101,7 @@ export function useModifyOperations({ return { showDeleteConfirm, - isDeleting: deleteNode.isPending, + isDeleting, handleRename, handleDeleteClick, handleDeleteConfirm, diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts index fc60f1ca7f..106b64c784 100644 --- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts +++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-move.ts @@ -15,13 +15,13 @@ export function useNodeMove() { const { t } = useTranslation('workflow') const appDetail = useAppStore(s => s.appDetail) const appId = appDetail?.id || '' - const moveNode = useMoveAppAssetNode() + const { mutateAsync: moveNodeAsync, isPending: isMoving } = useMoveAppAssetNode() const emitTreeUpdate = useSkillTreeUpdateEmitter() // Execute move API call - validation is handled by react-arborist's disableDrop callback const executeMoveNode = useCallback(async (nodeId: string, targetFolderId: string | null) => { try { - await moveNode.mutateAsync({ + await moveNodeAsync({ appId, nodeId, payload: { parent_id: toApiParentId(targetFolderId) }, @@ -39,10 +39,10 @@ export function useNodeMove() { message: t('skillSidebar.menu.moveError'), }) } - }, [appId, moveNode, t, emitTreeUpdate]) + }, [appId, moveNodeAsync, t, emitTreeUpdate]) return { executeMoveNode, - isMoving: moveNode.isPending, + isMoving, } } diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts index c76bb8cb24..d152ed0443 100644 --- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts +++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-node-reorder.ts @@ -13,12 +13,12 @@ export function useNodeReorder() { const { t } = useTranslation('workflow') const appDetail = useAppStore(s => s.appDetail) const appId = appDetail?.id || '' - const reorderNode = useReorderAppAssetNode() + const { mutateAsync: reorderNodeAsync, isPending: isReordering } = useReorderAppAssetNode() const emitTreeUpdate = useSkillTreeUpdateEmitter() const executeReorderNode = useCallback(async (nodeId: string, afterNodeId: string | null) => { try { - await reorderNode.mutateAsync({ + await reorderNodeAsync({ appId, nodeId, payload: { after_node_id: afterNodeId }, @@ -36,10 +36,10 @@ export function useNodeReorder() { message: t('skillSidebar.menu.moveError'), }) } - }, [appId, reorderNode, t, emitTreeUpdate]) + }, [appId, reorderNodeAsync, t, emitTreeUpdate]) return { executeReorderNode, - isReordering: reorderNode.isPending, + isReordering, } } diff --git a/web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts b/web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts index 4dda64b963..c6ac8e1140 100644 --- a/web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts +++ b/web/app/components/workflow/skill/hooks/file-tree/operations/use-paste-operation.ts @@ -33,7 +33,7 @@ export function usePasteOperation({ const storeApi = useWorkflowStore() const appDetail = useAppStore(s => s.appDetail) const appId = appDetail?.id || '' - const moveNode = useMoveAppAssetNode() + const { mutateAsync: moveNodeAsync, isPending: isPasting } = useMoveAppAssetNode() const emitTreeUpdate = useSkillTreeUpdateEmitter() const isPastingRef = useRef(false) @@ -77,7 +77,7 @@ export function usePasteOperation({ try { await Promise.all( nodeIdsArray.map(nodeId => - moveNode.mutateAsync({ + moveNodeAsync({ appId, nodeId, payload: { parent_id: targetParentId }, @@ -103,7 +103,7 @@ export function usePasteOperation({ isPastingRef.current = false } } - }, [appId, moveNode, storeApi, t, treeData?.children, treeRef, emitTreeUpdate]) + }, [appId, moveNodeAsync, storeApi, t, treeData?.children, treeRef, emitTreeUpdate]) useEffect(() => { if (!enabled) @@ -120,7 +120,7 @@ export function usePasteOperation({ }, [enabled, handlePaste]) return { - isPasting: moveNode.isPending, + isPasting, handlePaste, } } diff --git a/web/service/use-app-asset.ts b/web/service/use-app-asset.ts index 45c2c97566..39541e1311 100644 --- a/web/service/use-app-asset.ts +++ b/web/service/use-app-asset.ts @@ -20,7 +20,6 @@ import { uploadToPresignedUrl } from './upload-to-presigned-url' export function appAssetTreeOptions(appId: string) { return consoleQuery.appAsset.tree.queryOptions({ input: { params: { appId } }, - enabled: !!appId, }) }